Better layouts and more props

Author: stronk-dev

.env

@@ -1,2 +1,5 @@
 REACT_APP_API_BASE_URL = "http://localhost:3678"
 REACT_APP_WS_URL = "ws://localhost:3678/events"
+REACT_APP_KIOSK_MODE = "false"
+REACT_APP_HIDE_ON_DISCONNECT = "false"
+REACT_APP_LAYOUT = "auto"

README.md

@@ -60,16 +60,22 @@ TODO: OS instructions (auto-login, open browser, etc)
 
 First install the dependency:
 ```
-npm install --save `@stronk-tech/spotify-player`
+npm install --save `@stronk-tech/react-librespot-controller`
 ```
 
 Then import the component and fill in your API endpoints:
 ```
-import MediaPlayer from "@stronk-tech/spotify-player";
-<MediaPlayer websocketUrl={"ws://apollo:3678/events"} apiBaseUrl={"http://apollo:3678"} hideOnDisconnect={true} />
+import MediaPlayer from "@stronk-tech/react-librespot-controller";
+<MediaPlayer websocketUrl={"ws://apollo:3678/events"} apiBaseUrl={"http://apollo:3678"} hideOnDisconnect={false} />
 ```
 
-If you set `hideOnDisconnect` to true, the entire component will hide itself when there is no connection to the API endpoint. Otherwise it will display an error state (an retry the connection of course).
+### Props
+
+- `hideOnDisconnect`: When `true`, the entire component will hide itself when there is no connection to the API endpoint. Otherwise it will display an error state.
+- `websocketUrl`: Full URL to the WebSocket endpoint of the `go-librespot` client.
+- `apiBaseUrl`: Full URL to the HTTP API endpoint of the `go-librespot` client.
+- `kioskMode`: When `true`, the component will fill the entire screen. Otherwise it will fill the available width and base the layout on the width only. It is recommended to leave this option `false` when importing the module into an existing webpage and to `true` when you are running the player standalone on a touch screen.
+- `layout`: Can be `auto`, `default`, `widescreen`, `portrait`. See the screenshots for how the layouts look like.
 
 # Screen shots
 The player arranges itself based on the screen dimensions, with three possible layouts:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stronk-tech/react-librespot-controller",
   "description": "`go-librespot` squeezebox-alike web frontend for small touchscreens",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [

src/components/MediaPlayer.css

@@ -16,10 +16,9 @@
   box-shadow: rgba(40, 44, 52, 0.5) 2px 4px 6px 2px;
 }
 
-.spotify-player-spotify-card:hover {
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
-  z-index: 3;
-  position: relative;
+.kiosk {
+  height: 100vh;
+  width: 100vw;
 }
 
 .spotify-player-info-container {
@@ -67,9 +66,7 @@
 }
 
 .spotify-player-default-layout .spotify-player-left {
-  justify-content: space-between;
-  height: 100%;
-  flex: 1;
+  display: flex;
 }
 
 .spotify-player-default-layout .spotify-player-right {

src/components/MediaPlayer.js

@@ -13,14 +13,17 @@ import VolumeControls from "./Controls/VolumeControls";
 import "./MediaPlayer.css";
 
 const thresholdWidescreen = 800;
-const thresholdNarrowscreen = 450;
+const thresholdTallcreen = 500;
+const thresholdNarrowscreen = 500;
 
-// TODO: add props for forcing a layout
+// TODO: add props for the WebSocket retries, etc.
 // TODO: add more comments, IE for props
 const MediaPlayer = ({
   websocketUrl = process.env.REACT_APP_WS_URL || "ws://localhost:3678/events",
   apiBaseUrl = process.env.REACT_APP_API_BASE_URL || "http://localhost:3678",
-  hideOnDisconnect = false,
+  kioskMode = (process.env.REACT_APP_KIOSK_MODE.toLowerCase() == "true") || false,
+  hideOnDisconnect = (process.env.REACT_APP_HIDE_ON_DISCONNECT.toLowerCase() == "true") || false,
+  layout = process.env.REACT_APP_LAYOUT || "auto",
 }) => {
   const {
     playerRef,
@@ -46,7 +49,6 @@ const MediaPlayer = ({
   const { width, height } = useComponentSize(playerRef); //< Retrieve dimensions of media player
   const [activeTab, setActiveTab] = useState("Info"); //< Text info view or Playlist selection
   const [selectedPlaylist, setSelectedPlaylist] = useState(null);
-  const [arrowOffset, setArrowOffset] = useState(0); 
 
   useEffect(() => {
     if (!isConnected) {
@@ -66,49 +68,56 @@ const MediaPlayer = ({
   };
 
   const handleTabSwitch = (newVal) => {
-    if (newVal == "Info"){
+    if (newVal == "Info") {
       setSelectedPlaylist(null);
     }
     setActiveTab(newVal);
   }
 
-  // Watch for dimension updates and inject appropriate CSS layout
-  useEffect(() => {
-    const updateLayout = () => {
-      if (playerRef.current) {
-        const layoutClass =
-          width > thresholdWidescreen
-            ? "spotify-player-widescreen-layout"
-            : width < thresholdNarrowscreen
-              ? "spotify-player-portrait-layout"
-              : "spotify-player-default-layout";
-
-        // Remove previous layout classes
-        playerRef.current.classList.remove(
-          "spotify-player-widescreen-layout",
-          "spotify-player-portrait-layout",
-          "spotify-player-default-layout"
-        );
-
-        // Add the current layout class
-        playerRef.current.classList.add(layoutClass);
-      }
-    };
-    updateLayout();
-  }, [width, playerRef]);
-
   // Hide the entire player if we are not connected to the API and the hideOnDisconnect prop is set.
   if (hideOnDisconnect && !isConnected) {
     return null;
   }
 
-  const albumTitle = ((selectedPlaylist && activeTab == "Playlists") ? selectedPlaylist.name : null) || null
-  const albumSubtitle = (selectedPlaylist && activeTab == "Playlists") ? selectedPlaylist.owner.display_name : `Disc ${trackInfo?.disc_number || "N/A"}, Track ${trackInfo?.track_number || "N/A"}`
-  const albumImage = ((selectedPlaylist && activeTab == "Playlists") ? selectedPlaylist.images[0]?.url : trackInfo?.album_cover_url) || null
+  const albumTitle = ((selectedPlaylist && activeTab == "Playlists") ? selectedPlaylist.name : null) || null;
+  const albumSubtitle = (selectedPlaylist && activeTab == "Playlists") ? selectedPlaylist.owner.display_name : `Disc ${trackInfo?.disc_number || "N/A"}, Track ${trackInfo?.track_number || "N/A"}`;
+  const albumImage = ((selectedPlaylist && activeTab == "Playlists") ? selectedPlaylist.images[0]?.url : trackInfo?.album_cover_url) || null;
+  let playerClass = "spotify-player-spotify-card";
+  if (layout == "auto") {
+    if (!playerRef.current) {
+      layout = "default";
+    } else if (kioskMode) {
+      if (width > thresholdNarrowscreen && height > thresholdTallcreen) {
+        layout = "default";
+      } else if (width > height) {
+        layout = "widescreen";
+      } else {
+        layout = "portrait";
+      }
+    } else {
+      if (width > thresholdWidescreen) {
+        layout = "widescreen";
+      } else if (width < thresholdNarrowscreen) {
+        layout = "portrait";
+      } else {
+        layout = "default";
+      }
+    }
+  }
+  if (layout == "default") {
+    playerClass += " spotify-player-default-layout";
+  } else if (layout == "widescreen") {
+    playerClass += " spotify-player-widescreen-layout";
+  } else if (layout == "portrait") {
+    playerClass += " spotify-player-portrait-layout";
+  }
+  if (kioskMode) {
+    playerClass += " kiosk";
+  }
 
   return (
-    <div ref={playerRef} className="spotify-player-spotify-card">
-      {width < thresholdNarrowscreen ? (
+    <div ref={playerRef} className={playerClass}>
+      {layout == "portrait" ? (
         <>
           <Header
             isConnected={isConnected}
@@ -167,7 +176,7 @@ const MediaPlayer = ({
             />
           </div>
         </>
-      ) : width > thresholdWidescreen ? (
+      ) : layout == "widescreen" ? (
         <div className="spotify-player-info-container">
           <div className="spotify-player-left">
             <AlbumCard

src/standalone.css

@@ -19,5 +19,6 @@ body {
 
 body #root {
   height: unset;
-  padding: 2em;
+  padding: 0;
+  overflow-y: auto;
 }