From 884d79da95496a042d2d80795440b2a6a574761d Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 17 Jun 2021 11:40:02 +0200 Subject: [PATCH 01/29] refactor(Addons): autofocus Add addon modal input --- src/routes/Addons/Addons.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index 2bf978a38..b639f8257 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -182,6 +182,7 @@ const Addons = ({ urlParams, queryParams }) => { className={styles['addon-url-input']} type={'text'} placeholder={'Paste addon URL'} + autoFocus onSubmit={addAddonOnSubmit} /> From 772cde815edf39a248e3357e8b71725112ebc6b0 Mon Sep 17 00:00:00 2001 From: Tim Date: Sat, 19 Jun 2021 11:11:46 +0200 Subject: [PATCH 02/29] refactor(Player): allow to download a m3u playlist in case of a playback error --- src/routes/Player/Player.js | 16 +++++++++++++-- src/routes/Player/styles.less | 37 ++++++++++++++++++++++++++++++++-- src/routes/Player/usePlayer.js | 14 ++++++++++++- 3 files changed, 62 insertions(+), 5 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index d54124e02..d8c91af99 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -6,7 +6,8 @@ const classnames = require('classnames'); const debounce = require('lodash.debounce'); const { useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); -const { HorizontalNavBar, useDeepEqualEffect, useFullscreen, useBinaryState, useToast, useStreamingServer } = require('stremio/common'); +const { HorizontalNavBar, Button, useDeepEqualEffect, useFullscreen, useBinaryState, useToast, useStreamingServer } = require('stremio/common'); +const Icon = require('@stremio/stremio-icons/dom'); const BufferingLoader = require('./BufferingLoader'); const ControlBar = require('./ControlBar'); const InfoMenu = require('./InfoMenu'); @@ -21,7 +22,7 @@ const Player = ({ urlParams, queryParams }) => { const forceTranscoding = React.useMemo(() => { return queryParams.has('forceTranscoding'); }, [queryParams]); - const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams); + const [player, playlist, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams); const [settings, updateSettings] = useSettings(); const streamingServer = useStreamingServer(); const routeFocused = useRouteFocused(); @@ -418,6 +419,17 @@ const Player = ({ urlParams, queryParams }) => { error !== null ?
{error.message}
+ { + playlist ? +
+ +
+ : + null + }
: null diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index 8c84da749..a77874539 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -36,13 +36,14 @@ html:not(.active-slider-within) { left: 0; right: 0; bottom: 0; - z-index: 0; &.error-layer { + z-index: 1; display: flex; - flex-direction: row; + flex-direction: column; align-items: center; justify-content: center; + gap: 1.5rem; background-color: @color-background-dark5; .error-label { @@ -53,9 +54,39 @@ html:not(.active-slider-within) { color: @color-surface-light5-90; text-align: center; } + + .error-details { + gap: 0.8rem; + font-size: 1.5rem; + color: @color-surface-light5-90; + + .error-details-button { + flex: none; + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + height: 3.5rem; + padding: 0.5rem 1rem; + font-weight: 500; + color: @color-surface-light5-90; + background-color: @color-surface-light5-20; + + &:hover, &:focus { + background-color: @color-accent3; + } + + .icon { + width: 1.5rem; + height: 1.5rem; + fill: @color-surface-light5-90; + } + } + } } &.nav-bar-layer { + z-index: 2; bottom: initial; background: transparent; overflow: visible; @@ -86,6 +117,7 @@ html:not(.active-slider-within) { } &.control-bar-layer { + z-index: 2; top: initial; overflow: visible; @@ -101,6 +133,7 @@ html:not(.active-slider-within) { } &.menu-layer { + z-index: 2; top: initial; left: initial; right: 2rem; diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js index 54b6ded23..3db53fd1b 100644 --- a/src/routes/Player/usePlayer.js +++ b/src/routes/Player/usePlayer.js @@ -110,7 +110,19 @@ const usePlayer = (urlParams) => { }, 'player'); }, []); const player = useModelState({ model: 'player', action, init, map }); - return [player, updateLibraryItemState, pushToLibrary]; + 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]; }; module.exports = usePlayer; From ed51814c27302cf0a9daae6587bd80b1bc9fd949 Mon Sep 17 00:00:00 2001 From: Tim Date: Sun, 20 Jun 2021 10:43:12 +0200 Subject: [PATCH 03/29] refactor(Settings): add seek time properties --- src/common/CONSTANTS.js | 2 + src/routes/Settings/Settings.js | 20 ++++++++ .../Settings/useProfileSettingsInputs.js | 46 +++++++++++++++++++ 3 files changed, 68 insertions(+) diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index f5702fd4e..7b6ee1549 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -3,6 +3,7 @@ const CHROMECAST_RECEIVER_APP_ID = '1634F54B'; const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250]; const SUBTITLES_FONTS = ['Roboto', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace']; +const SEEK_TIME_DURATIONS = [5, 10, 15, 20, 25, 30]; const CATALOG_PREVIEW_SIZE = 10; const CATALOG_PAGE_SIZE = 100; const NONE_EXTRA_VALUE = 'None'; @@ -28,6 +29,7 @@ module.exports = { CHROMECAST_RECEIVER_APP_ID, SUBTITLES_SIZES, SUBTITLES_FONTS, + SEEK_TIME_DURATIONS, CATALOG_PREVIEW_SIZE, CATALOG_PAGE_SIZE, NONE_EXTRA_VALUE, diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 546912994..567d8c586 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -27,6 +27,8 @@ const Settings = () => { subtitlesTextColorInput, subtitlesBackgroundColorInput, subtitlesOutlineColorInput, + seekTimeDuration, + seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, @@ -303,6 +305,24 @@ const Settings = () => { {...subtitlesOutlineColorInput} /> +
+
+
Arrow keys seek time
+
+ +
+
+
+
Arrow keys seek time when holding Shift key
+
+ +
Auto-play next episode
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index 26619afce..dad762254 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -110,6 +110,50 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); + const seekTimeDuration = useDeepEqualMemo(() => ({ + options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ + value: `${size}`, + label: `${size}s` + })), + selected: [`${profile.settings.seekTimeDuration}`], + renderLabelText: () => { + return `${profile.settings.seekTimeDuration}s`; + }, + onSelect: (event) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UpdateSettings', + args: { + ...profile.settings, + seekTimeDuration: parseInt(event.value, 10) + } + } + }); + } + }), [profile.settings]); + const seekTimeShiftDuration = useDeepEqualMemo(() => ({ + options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ + value: `${size}`, + label: `${size}s` + })), + selected: [`${profile.settings.seekTimeShiftDuration}`], + renderLabelText: () => { + return `${profile.settings.seekTimeShiftDuration}s`; + }, + onSelect: (event) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UpdateSettings', + args: { + ...profile.settings, + seekTimeShiftDuration: parseInt(event.value, 10) + } + } + }); + } + }), [profile.settings]); const bingeWatchingCheckbox = useDeepEqualMemo(() => ({ checked: profile.settings.bingeWatching, onClick: () => { @@ -192,6 +236,8 @@ const useProfileSettingsInputs = (profile) => { subtitlesTextColorInput, subtitlesBackgroundColorInput, subtitlesOutlineColorInput, + seekTimeDuration, + seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, From cccca662417660c66fcb04c292a6cf1aa971e00e Mon Sep 17 00:00:00 2001 From: abdev Date: Sat, 26 Jun 2021 11:37:22 +0530 Subject: [PATCH 04/29] added metapreview show button --- src/common/MetaPreview/MetaPreview.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js index 1099ea546..73323bc82 100644 --- a/src/common/MetaPreview/MetaPreview.js +++ b/src/common/MetaPreview/MetaPreview.js @@ -194,6 +194,15 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele : null } + { + + } { linksGroups.has(CONSTANTS.SHARE_LINK_CATEGORY) ? From 4c09156e02b98c51456a6ba864604391d0203f50 Mon Sep 17 00:00:00 2001 From: abdev Date: Sat, 26 Jun 2021 12:06:43 +0530 Subject: [PATCH 05/29] showbutton linked to metadetails page --- src/common/MetaPreview/MetaPreview.js | 24 ++++++++++++++++++++++-- src/routes/Discover/Discover.js | 1 + 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js index 73323bc82..96741bfe4 100644 --- a/src/common/MetaPreview/MetaPreview.js +++ b/src/common/MetaPreview/MetaPreview.js @@ -23,7 +23,7 @@ const ALLOWED_LINK_REDIRECTS = [ routesRegexp.metadetails.regexp ]; -const MetaPreview = ({ className, compact, name, logo, background, runtime, releaseInfo, released, description, links, trailerStreams, inLibrary, toggleInLibrary }) => { +const MetaPreview = ({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary }) => { const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false); const linksGroups = React.useMemo(() => { return Array.isArray(links) ? @@ -70,6 +70,21 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele : new Map(); }, [links]); + const href = React.useMemo(() => { + return deepLinks ? + typeof deepLinks.player === 'string' ? + deepLinks.player + : + typeof deepLinks.metaDetailsStreams === 'string' ? + deepLinks.metaDetailsStreams + : + typeof deepLinks.metaDetailsVideos === 'string' ? + deepLinks.metaDetailsVideos + : + null + : + null; + }, [deepLinks]); const trailerHref = React.useMemo(() => { if (!Array.isArray(trailerStreams) || trailerStreams.length === 0) { return null; @@ -200,7 +215,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele icon={'ic_play'} label={'Show'} tabIndex={compact ? -1 : 0} - href={'#'} + href={href} /> } { @@ -245,6 +260,11 @@ MetaPreview.propTypes = { releaseInfo: PropTypes.string, released: PropTypes.instanceOf(Date), description: PropTypes.string, + deepLinks: PropTypes.shape({ + metaDetailsVideos: PropTypes.string, + metaDetailsStreams: PropTypes.string, + player: PropTypes.string + }), links: PropTypes.arrayOf(PropTypes.shape({ category: PropTypes.string, name: PropTypes.string, diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 56ea7401d..bbccda7a5 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -165,6 +165,7 @@ const Discover = ({ urlParams, queryParams }) => { releaseInfo={selectedMetaItem.releaseInfo} released={selectedMetaItem.released} description={selectedMetaItem.description} + deepLinks={selectedMetaItem.deepLinks} trailerStreams={selectedMetaItem.trailerStreams} inLibrary={selectedMetaItem.inLibrary} toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary} From 80f26f5794b339d68e0c8af75f6ce7067a367ef2 Mon Sep 17 00:00:00 2001 From: abdev Date: Mon, 28 Jun 2021 14:37:41 +0530 Subject: [PATCH 06/29] showbutton ambiguous naming fixed --- src/common/MetaPreview/MetaPreview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js index 96741bfe4..548faf5a7 100644 --- a/src/common/MetaPreview/MetaPreview.js +++ b/src/common/MetaPreview/MetaPreview.js @@ -70,7 +70,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele : new Map(); }, [links]); - const href = React.useMemo(() => { + const showHref = React.useMemo(() => { return deepLinks ? typeof deepLinks.player === 'string' ? deepLinks.player @@ -215,7 +215,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele icon={'ic_play'} label={'Show'} tabIndex={compact ? -1 : 0} - href={href} + href={showHref} /> } { From 31469a5c887dfd1729c90affd9ffd846451feac7 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 12 Jul 2021 15:26:36 +0200 Subject: [PATCH 07/29] refactor(Addons): update syntax --- src/routes/Addons/Addons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index b639f8257..63f2b6757 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -182,7 +182,7 @@ const Addons = ({ urlParams, queryParams }) => { className={styles['addon-url-input']} type={'text'} placeholder={'Paste addon URL'} - autoFocus + autoFocus={true} onSubmit={addAddonOnSubmit} /> From 89832951ec6e2df38ddced1eb71cab9a7ed7b47b Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 12 Jul 2021 19:48:47 +0200 Subject: [PATCH 08/29] 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; From d4d1217686da94dee1f94b4e35311d5f73a14aa3 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 13 Jul 2021 11:18:58 -0100 Subject: [PATCH 09/29] check if chromecast service is active --- src/routes/Player/Player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index d54124e02..d3102aa15 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -233,7 +233,7 @@ const Player = ({ urlParams, queryParams }) => { streamingServer.selected.transportUrl : null, - chromecastTransport: chromecast.transport + chromecastTransport: chromecast.active ? chromecast.transport : null } }); } From 8a943e2888944073fa8e34889726111a1a020ccd Mon Sep 17 00:00:00 2001 From: abdev Date: Wed, 14 Jul 2021 18:29:10 +0530 Subject: [PATCH 10/29] showHref str check, share hidden in discover --- src/common/MetaPreview/MetaPreview.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js index 548faf5a7..a9424b8fd 100644 --- a/src/common/MetaPreview/MetaPreview.js +++ b/src/common/MetaPreview/MetaPreview.js @@ -210,16 +210,19 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele null } { - + typeof showHref === 'string' && compact ? + + : + null } { - linksGroups.has(CONSTANTS.SHARE_LINK_CATEGORY) ? + linksGroups.has(CONSTANTS.SHARE_LINK_CATEGORY) && !compact ? Date: Thu, 15 Jul 2021 10:46:50 +0200 Subject: [PATCH 11/29] refactor(Player): fix markup hierarchy, remove gap and declare flex props in style --- src/routes/Player/Player.js | 37 +++++++++++++++++++---------------- src/routes/Player/styles.less | 6 ++---- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index d96048ed5..10e896ce9 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -428,29 +428,32 @@ const Player = ({ urlParams, queryParams }) => { videoState.buffering ? : - error !== null ? -
-
{error.message}
- { - playlist ? -
- -
- : - null - } -
- : - null + null }
+ { + error !== null ? +
+
{error.message}
+ { + playlist ? +
+ +
+ : + null + } +
+ : + null + } { subtitlesMenuOpen || infoMenuOpen ?
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index 07ba94378..6ada11277 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -38,7 +38,6 @@ html:not(.active-slider-within) { bottom: 0; &.error-layer { - z-index: 1; display: flex; flex-direction: column; align-items: center; @@ -55,8 +54,7 @@ html:not(.active-slider-within) { } .error-details { - display: flex; - gap: 0.8rem; + flex: 0 1 auto; font-size: 1.5rem; margin-top: 1.5rem; color: @color-surface-light5-90; @@ -66,7 +64,6 @@ html:not(.active-slider-within) { display: flex; flex-direction: row; align-items: center; - gap: 1rem; height: 3.5rem; padding: 0.5rem 1rem; font-weight: 500; @@ -80,6 +77,7 @@ html:not(.active-slider-within) { .icon { width: 1.5rem; height: 1.5rem; + margin-right: 1rem; fill: @color-surface-light5-90; } } From 25322171716b522ce5a75c506732bcb7d4237b0a Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 16 Jul 2021 03:02:38 +0200 Subject: [PATCH 12/29] refactor(Player): revert z-index changes --- src/routes/Player/styles.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index 6ada11277..45889141b 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -36,6 +36,7 @@ html:not(.active-slider-within) { left: 0; right: 0; bottom: 0; + z-index: 0; &.error-layer { display: flex; @@ -85,7 +86,6 @@ html:not(.active-slider-within) { } &.nav-bar-layer { - z-index: 2; bottom: initial; background: transparent; overflow: visible; @@ -116,7 +116,6 @@ html:not(.active-slider-within) { } &.control-bar-layer { - z-index: 2; top: initial; overflow: visible; @@ -132,7 +131,6 @@ html:not(.active-slider-within) { } &.menu-layer { - z-index: 2; top: initial; left: initial; right: 2rem; From c11caaacd03eb4cac12aa23505f6ddda4031be13 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 16 Jul 2021 10:44:47 +0200 Subject: [PATCH 13/29] refactor(Settings): remove seekTimeShiftDuration --- src/routes/Settings/Settings.js | 10 -------- .../Settings/useProfileSettingsInputs.js | 23 ------------------- 2 files changed, 33 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 567d8c586..8d4ac199f 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -28,7 +28,6 @@ const Settings = () => { subtitlesBackgroundColorInput, subtitlesOutlineColorInput, seekTimeDuration, - seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, @@ -314,15 +313,6 @@ const Settings = () => { {...seekTimeDuration} />
-
-
-
Arrow keys seek time when holding Shift key
-
- -
Auto-play next episode
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index dad762254..a34e422ad 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -132,28 +132,6 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const seekTimeShiftDuration = useDeepEqualMemo(() => ({ - options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ - value: `${size}`, - label: `${size}s` - })), - selected: [`${profile.settings.seekTimeShiftDuration}`], - renderLabelText: () => { - return `${profile.settings.seekTimeShiftDuration}s`; - }, - onSelect: (event) => { - core.transport.dispatch({ - action: 'Ctx', - args: { - action: 'UpdateSettings', - args: { - ...profile.settings, - seekTimeShiftDuration: parseInt(event.value, 10) - } - } - }); - } - }), [profile.settings]); const bingeWatchingCheckbox = useDeepEqualMemo(() => ({ checked: profile.settings.bingeWatching, onClick: () => { @@ -237,7 +215,6 @@ const useProfileSettingsInputs = (profile) => { subtitlesBackgroundColorInput, subtitlesOutlineColorInput, seekTimeDuration, - seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, From 839f2b8cba72d0b2150d03885a9587b521d9eab0 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 16 Jul 2021 11:21:09 +0200 Subject: [PATCH 14/29] refactor(Player): use seek duration from settings and handle shift key event --- src/routes/Player/Player.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index d54124e02..84be29c2a 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -331,14 +331,26 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowRight': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - onSeekRequested(videoState.time + 15000); + let seekTimeDuration = settings.seekTimeDuration * 1000; + + if (event.shiftKey === true) { + seekTimeDuration = seekTimeDuration * 3; + } + + onSeekRequested(videoState.time + seekTimeDuration); } break; } case 'ArrowLeft': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - onSeekRequested(videoState.time - 15000); + let seekTimeDuration = settings.seekTimeDuration * 1000; + + if (event.shiftKey === true) { + seekTimeDuration = seekTimeDuration * 3; + } + + onSeekRequested(videoState.time - seekTimeDuration); } break; From 335fc5ccca73948b7c61cb12655aef9bc2a1dd60 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 16 Jul 2021 11:38:19 +0200 Subject: [PATCH 15/29] style(Player): fix flex, add missing class --- src/routes/Player/styles.less | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index 45889141b..9be841e46 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -46,7 +46,7 @@ html:not(.active-slider-within) { background-color: @color-background-dark5; .error-label { - flex: 0 1 auto; + flex: none; padding: 0 8rem; max-height: 4.8em; font-size: 2rem; @@ -55,32 +55,40 @@ html:not(.active-slider-within) { } .error-details { - flex: 0 1 auto; + display: flex; + flex: none; font-size: 1.5rem; margin-top: 1.5rem; color: @color-surface-light5-90; .error-details-button { - flex: none; display: flex; + flex: none; flex-direction: row; align-items: center; height: 3.5rem; padding: 0.5rem 1rem; font-weight: 500; - color: @color-surface-light5-90; - background-color: @color-surface-light5-20; + background-color: @color-accent3; &:hover, &:focus { - background-color: @color-accent3; + background-color: @color-accent3-light1; } .icon { + flex: none; width: 1.5rem; height: 1.5rem; margin-right: 1rem; fill: @color-surface-light5-90; } + + .label { + flex: auto; + max-height: 2.4em; + font-size: 1.1rem; + color: @color-surface-light5-90; + } } } } From e190f43ef171efb6164dd9841d2d1a94e32e1343 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 16 Jul 2021 20:03:28 +0200 Subject: [PATCH 16/29] style(Player): fix flex --- src/routes/Player/styles.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index 9be841e46..10c1921c5 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -46,7 +46,7 @@ html:not(.active-slider-within) { background-color: @color-background-dark5; .error-label { - flex: none; + flex: auto; padding: 0 8rem; max-height: 4.8em; font-size: 2rem; @@ -56,7 +56,7 @@ html:not(.active-slider-within) { .error-details { display: flex; - flex: none; + flex: auto; font-size: 1.5rem; margin-top: 1.5rem; color: @color-surface-light5-90; From bb73cd8695f108d33efe0ffec0be8387aca00962 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 19 Jul 2021 16:18:55 +0200 Subject: [PATCH 17/29] refactor: convert seekTimeDuration to ms --- src/common/CONSTANTS.js | 2 +- src/routes/Player/Player.js | 4 ++-- src/routes/Settings/useProfileSettingsInputs.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index 7b6ee1549..ff9d18e58 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -3,7 +3,7 @@ const CHROMECAST_RECEIVER_APP_ID = '1634F54B'; const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250]; const SUBTITLES_FONTS = ['Roboto', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace']; -const SEEK_TIME_DURATIONS = [5, 10, 15, 20, 25, 30]; +const SEEK_TIME_DURATIONS = [5000, 10000, 15000, 20000, 25000, 30000]; const CATALOG_PREVIEW_SIZE = 10; const CATALOG_PAGE_SIZE = 100; const NONE_EXTRA_VALUE = 'None'; diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 4614ba444..0f9fff879 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -344,7 +344,7 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowRight': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration * 1000; + let seekTimeDuration = settings.seekTimeDuration; if (event.shiftKey === true) { seekTimeDuration = seekTimeDuration * 3; @@ -357,7 +357,7 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowLeft': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration * 1000; + let seekTimeDuration = settings.seekTimeDuration; if (event.shiftKey === true) { seekTimeDuration = seekTimeDuration * 3; diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index a34e422ad..479b1bf49 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -113,11 +113,11 @@ const useProfileSettingsInputs = (profile) => { const seekTimeDuration = useDeepEqualMemo(() => ({ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ value: `${size}`, - label: `${size}s` + label: `${size / 1000}s` })), selected: [`${profile.settings.seekTimeDuration}`], renderLabelText: () => { - return `${profile.settings.seekTimeDuration}s`; + return `${profile.settings.seekTimeDuration / 1000}s`; }, onSelect: (event) => { core.transport.dispatch({ From 4f407a97a567947ab32cfd0adb141eff43034e81 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 19 Jul 2021 16:59:56 +0200 Subject: [PATCH 18/29] refactor(Player): add settings.seekTimeDuration to layoutEffect, update to cleaner code syntax --- src/routes/Player/Player.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 0f9fff879..af4a341a0 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -344,26 +344,16 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowRight': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration; - - if (event.shiftKey === true) { - seekTimeDuration = seekTimeDuration * 3; - } - - onSeekRequested(videoState.time + seekTimeDuration); + const seekTimeMultiplier = event.shiftKey ? 3 : 1; + onSeekRequested(videoState.time + (settings.seekTimeDuration * seekTimeMultiplier)); } break; } case 'ArrowLeft': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration; - - if (event.shiftKey === true) { - seekTimeDuration = seekTimeDuration * 3; - } - - onSeekRequested(videoState.time - seekTimeDuration); + const seekTimeMultiplier = event.shiftKey ? 3 : 1; + onSeekRequested(videoState.time - (settings.seekTimeDuration * seekTimeMultiplier)); } break; @@ -411,7 +401,7 @@ const Player = ({ urlParams, queryParams }) => { return () => { window.removeEventListener('keydown', onKeyDown); }; - }, [player, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]); + }, [player, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu, settings.seekTimeDuration]); React.useLayoutEffect(() => { return () => { setImmersedDebounced.cancel(); From c128defdae66d6071b06256c6c6b7a0495deacd7 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 17:54:48 +0300 Subject: [PATCH 19/29] update stremio-core-web --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 575d6312f..f4b88a1e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8117,9 +8117,9 @@ "integrity": "sha512-yT3No1gIWKLV2BhQIeSgG94EzXxmEqXJLulO+pFpziqWNUbmmEKeE+nRvW5wtoIK4SLy+v0bLd0b6HBH3KFfWw==" }, "@stremio/stremio-core-web": { - "version": "0.22.0", - "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.22.0.tgz", - "integrity": "sha512-PqvIXKwYmRYwzh0BFCEb9orZ3533OVLmLNbV1mCf9dmHG+BX+mREv9IB5+/yJZal2GMLnEBPfgeNxvIDYU6sww==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.23.0.tgz", + "integrity": "sha512-eZyBEWuB90y6lTG47Y4lKUnlM4bpVhmKh96DUHMPtMKOsyHRutOkuKXYjAwP0WjCbe57/vbalI04Fout7SZwWg==", "requires": { "@babel/runtime": "7.10.0" }, diff --git a/package.json b/package.json index fe95fed64..a421cbe3b 100755 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@babel/runtime": "7.12.5", "@sentry/browser": "5.11.1", "@stremio/stremio-colors": "4.0.1", - "@stremio/stremio-core-web": "0.22.0", + "@stremio/stremio-core-web": "0.23.0", "@stremio/stremio-icons": "3.0.5", "@stremio/stremio-video": "0.0.7", "a-color-picker": "1.2.1", From 6e5c2e6a87adadff3f25110848cbb10ddda5de8c Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 17:59:27 +0300 Subject: [PATCH 20/29] reorder deps in layout effect --- src/routes/Player/Player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index af4a341a0..db43dd26f 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -401,7 +401,7 @@ const Player = ({ urlParams, queryParams }) => { return () => { window.removeEventListener('keydown', onKeyDown); }; - }, [player, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu, settings.seekTimeDuration]); + }, [player, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]); React.useLayoutEffect(() => { return () => { setImmersedDebounced.cancel(); From c7d13fbaf30a7cf4d9a5c2fc22a264d493c13eb5 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:04:13 +0300 Subject: [PATCH 21/29] seekTimeDurationSelect renamed --- src/routes/Settings/Settings.js | 4 ++-- src/routes/Settings/useProfileSettingsInputs.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 8d4ac199f..0a1e215f8 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -27,7 +27,7 @@ const Settings = () => { subtitlesTextColorInput, subtitlesBackgroundColorInput, subtitlesOutlineColorInput, - seekTimeDuration, + seekTimeDurationSelect, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, @@ -310,7 +310,7 @@ const Settings = () => {
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index 479b1bf49..c1f1acb54 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -110,7 +110,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const seekTimeDuration = useDeepEqualMemo(() => ({ + const seekTimeDurationSelect = useDeepEqualMemo(() => ({ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ value: `${size}`, label: `${size / 1000}s` @@ -214,7 +214,7 @@ const useProfileSettingsInputs = (profile) => { subtitlesTextColorInput, subtitlesBackgroundColorInput, subtitlesOutlineColorInput, - seekTimeDuration, + seekTimeDurationSelect, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, From 4df2da82c944fbc00cea78f9f925081f865bb70b Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:05:16 +0300 Subject: [PATCH 22/29] use `seconds` label in the multiselect options --- src/routes/Settings/useProfileSettingsInputs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index c1f1acb54..8cb558146 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -113,11 +113,11 @@ const useProfileSettingsInputs = (profile) => { const seekTimeDurationSelect = useDeepEqualMemo(() => ({ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ value: `${size}`, - label: `${size / 1000}s` + label: `${size / 1000} seconds` })), selected: [`${profile.settings.seekTimeDuration}`], renderLabelText: () => { - return `${profile.settings.seekTimeDuration / 1000}s`; + return `${profile.settings.seekTimeDuration / 1000} seconds`; }, onSelect: (event) => { core.transport.dispatch({ From efd41bc0ef25ecc6d92211529ce78fbc300d7a5f Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:26:25 +0300 Subject: [PATCH 23/29] change seek time setting label --- src/routes/Settings/Settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 0a1e215f8..85d014f5f 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -306,7 +306,7 @@ const Settings = () => {
-
Arrow keys seek time
+
Rewind & Fast-forward duration
Date: Tue, 20 Jul 2021 18:32:46 +0300 Subject: [PATCH 24/29] move playlist hook above --- src/routes/Player/Player.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index db43dd26f..5adb9daab 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -28,6 +28,18 @@ const Player = ({ urlParams, queryParams }) => { const routeFocused = useRouteFocused(); const toast = useToast(); const [, , , toggleFullscreen] = useFullscreen(); + 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 [casting, setCasting] = React.useState(() => { return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED; }); @@ -64,18 +76,6 @@ 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 }); From 9e014b64893df4e61212f6ed6d7e3b4bf6aeef09 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:33:00 +0300 Subject: [PATCH 25/29] change playlist props --- src/routes/Player/Player.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 5adb9daab..652a9150d 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -33,12 +33,10 @@ const Player = ({ urlParams, queryParams }) => { return null; } + const name = `${player.title}.m3u`; 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 - }; + const href = `data:application/octet-stream;charset=utf-8;base64,${window.btoa(m3u)}`; + return { name, href }; }, [player]); const [casting, setCasting] = React.useState(() => { return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED; @@ -444,7 +442,7 @@ const Player = ({ urlParams, queryParams }) => { { playlist ?
- From e6d213f5414f36500deebb9f067b1e27812ae23b Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:41:08 +0300 Subject: [PATCH 26/29] usePlaylist hook created --- src/routes/Player/Player.js | 12 ++---------- src/routes/Player/usePlaylist.js | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 src/routes/Player/usePlaylist.js diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 652a9150d..3d1580caf 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -14,6 +14,7 @@ const InfoMenu = require('./InfoMenu'); const SubtitlesMenu = require('./SubtitlesMenu'); const Video = require('./Video'); const usePlayer = require('./usePlayer'); +const usePlaylist = require('./usePlaylist'); const useSettings = require('./useSettings'); const styles = require('./styles'); @@ -23,21 +24,12 @@ const Player = ({ urlParams, queryParams }) => { return queryParams.has('forceTranscoding'); }, [queryParams]); const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams); + const playlist = usePlaylist(player); const [settings, updateSettings] = useSettings(); const streamingServer = useStreamingServer(); const routeFocused = useRouteFocused(); const toast = useToast(); const [, , , toggleFullscreen] = useFullscreen(); - const playlist = React.useMemo(() => { - if (player.selected === null || typeof player.selected.stream.url !== 'string') { - return null; - } - - const name = `${player.title}.m3u`; - const m3u = `#EXTM3U\n\n#EXTINF:0,${encodeURIComponent(player.title)}\n${encodeURI(player.selected.stream.url)}`; - const href = `data:application/octet-stream;charset=utf-8;base64,${window.btoa(m3u)}`; - return { name, href }; - }, [player]); const [casting, setCasting] = React.useState(() => { return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED; }); diff --git a/src/routes/Player/usePlaylist.js b/src/routes/Player/usePlaylist.js new file mode 100644 index 000000000..d2d343217 --- /dev/null +++ b/src/routes/Player/usePlaylist.js @@ -0,0 +1,16 @@ +const React = require('react'); + +const usePlaylist = (player) => { + return React.useMemo(() => { + if (player.selected === null || typeof player.selected.stream.url !== 'string') { + return null; + } + + const name = `${player.title}.m3u`; + const m3u = `#EXTM3U\n\n#EXTINF:0,${encodeURIComponent(player.title)}\n${encodeURI(player.selected.stream.url)}`; + const href = `data:application/octet-stream;charset=utf-8;base64,${window.btoa(m3u)}`; + return { name, href }; + }, [player]); +}; + +module.exports = usePlaylist; From e259f4a54fad228cb9b93e68d43511c3549743f0 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:44:56 +0300 Subject: [PATCH 27/29] title added to error label --- src/routes/Player/Player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 3d1580caf..0d38b419d 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -430,7 +430,7 @@ const Player = ({ urlParams, queryParams }) => { { error !== null ?
-
{error.message}
+
{error.message}
{ playlist ?
From 3951f5328a8929dc20b96b7dd848569e36b295f3 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:46:32 +0300 Subject: [PATCH 28/29] fix type in M3U --- src/routes/Player/Player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 0d38b419d..9c6238f41 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -434,7 +434,7 @@ const Player = ({ urlParams, queryParams }) => { { playlist ?
- From 67a9abfe5d93dfded1829c53bcb9163a5180d14e Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 20 Jul 2021 18:59:56 +0300 Subject: [PATCH 29/29] improve playlist button styles --- src/routes/Player/Player.js | 10 +++--- src/routes/Player/styles.less | 57 ++++++++++++++++------------------- 2 files changed, 30 insertions(+), 37 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 9c6238f41..191f0423c 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -433,12 +433,10 @@ const Player = ({ urlParams, queryParams }) => {
{error.message}
{ playlist ? -
- -
+ : null } diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index 10c1921c5..e4fe58c55 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -46,7 +46,7 @@ html:not(.active-slider-within) { background-color: @color-background-dark5; .error-label { - flex: auto; + flex: 0 1 auto; padding: 0 8rem; max-height: 4.8em; font-size: 2rem; @@ -54,41 +54,36 @@ html:not(.active-slider-within) { text-align: center; } - .error-details { + .playlist-button { + flex: none; display: flex; - flex: auto; - font-size: 1.5rem; + flex-direction: row; + align-items: center; + height: 3.5rem; + max-width: 16rem; margin-top: 1.5rem; - color: @color-surface-light5-90; + padding: 0.5rem 1rem; + background-color: @color-accent3; - .error-details-button { - display: flex; + &:hover, &:focus { + background-color: @color-accent3-light1; + } + + .icon { flex: none; - flex-direction: row; - align-items: center; - height: 3.5rem; - padding: 0.5rem 1rem; + width: 1.5rem; + height: 1.5rem; + margin-right: 1rem; + fill: @color-surface-light5-90; + } + + .label { + flex: 1; + max-height: 2.4em; + font-size: 1.1rem; font-weight: 500; - background-color: @color-accent3; - - &:hover, &:focus { - background-color: @color-accent3-light1; - } - - .icon { - flex: none; - width: 1.5rem; - height: 1.5rem; - margin-right: 1rem; - fill: @color-surface-light5-90; - } - - .label { - flex: auto; - max-height: 2.4em; - font-size: 1.1rem; - color: @color-surface-light5-90; - } + color: @color-surface-light5-90; + text-align: center; } } }