From 89832951ec6e2df38ddced1eb71cab9a7ed7b47b Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 12 Jul 2021 19:48:47 +0200
Subject: [PATCH] refactor(Player): move playlist to Player.js, fix less

---
 src/routes/Player/Player.js    | 14 +++++++++++++-
 src/routes/Player/styles.less  |  3 ++-
 src/routes/Player/usePlayer.js | 14 +-------------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index d8c91af99..d96048ed5 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -22,7 +22,7 @@ const Player = ({ urlParams, queryParams }) => {
     const forceTranscoding = React.useMemo(() => {
         return queryParams.has('forceTranscoding');
     }, [queryParams]);
-    const [player, playlist, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
+    const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
     const routeFocused = useRouteFocused();
@@ -64,6 +64,18 @@ const Player = ({ urlParams, queryParams }) => {
             videoRef.current.dispatch(args);
         }
     }, []);
+    const playlist = React.useMemo(() => {
+        if (player.selected === null || typeof player.selected.stream.url !== 'string') {
+            return null;
+        }
+
+        const m3u = `#EXTM3U\n\n#EXTINF:0,${encodeURIComponent(player.title)}\n${encodeURI(player.selected.stream.url)}`;
+        const base64File = `data:application/octet-stream;charset=utf-8;base64,${window.btoa(m3u)}`;
+        return {
+            name: `${player.title}.m3u`,
+            file: base64File
+        };
+    }, [player]);
     const onImplementationChanged = React.useCallback((manifest) => {
         manifest.props.forEach((propName) => {
             dispatch({ type: 'observeProp', propName });
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index a77874539..07ba94378 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -43,7 +43,6 @@ html:not(.active-slider-within) {
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            gap: 1.5rem;
             background-color: @color-background-dark5;
 
             .error-label {
@@ -56,8 +55,10 @@ html:not(.active-slider-within) {
             }
 
             .error-details {
+                display: flex;
                 gap: 0.8rem;
                 font-size: 1.5rem;
+                margin-top: 1.5rem;
                 color: @color-surface-light5-90;
 
                 .error-details-button {
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 3db53fd1b..54b6ded23 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -110,19 +110,7 @@ const usePlayer = (urlParams) => {
         }, 'player');
     }, []);
     const player = useModelState({ model: 'player', action, init, map });
-    const playlist = React.useMemo(() => {
-        if (player.selected === null || typeof player.selected.stream.url !== 'string') {
-            return null;
-        }
-
-        const playlist = `#EXTM3U\n\n#EXTINF:0,${player.title}\n${player.selected.stream.url}`;
-        const base64File = `data:application/octet-stream;charset=utf-8;base64,${window.btoa(playlist)}`;
-        return {
-            name: `${player.title}.m3u`,
-            file: base64File
-        };
-    }, [player]);
-    return [player, playlist, updateLibraryItemState, pushToLibrary];
+    return [player, updateLibraryItemState, pushToLibrary];
 };
 
 module.exports = usePlayer;