{t('WEBSITE_SLOGAN_NEW_NEW')}
@@ -387,7 +387,7 @@ const Intro = ({ queryParams }) => {
{
state.form === SIGNUP_FORM ?
:
null
@@ -395,7 +395,7 @@ const Intro = ({ queryParams }) => {
{
state.form === LOGIN_FORM ?
:
null
@@ -403,7 +403,7 @@ const Intro = ({ queryParams }) => {
{
state.form === SIGNUP_FORM ?
:
null
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 32fc73d79..4a6f6ec8e 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -19,7 +19,7 @@
bottom: -1rem;
left: -1rem;
right: -1rem;
- background: url('/images/background_1.svg'), url('/images/background_2.svg');
+ background: url('/assets/images/background_1.svg'), url('/assets/images/background_2.svg');
background-color: var(--primary-background-color);
background-position: bottom left, top right;
background-size: 53%, 54%;
@@ -101,10 +101,6 @@
color: var(--primary-foreground-color);
text-align: center;
}
-
- .uppercase {
- text-transform: uppercase;
- }
}
.submit-button, .guest-login-button, .signup-form-button, .login-form-button {
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 16a4c79b5..8307b786a 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -85,7 +85,7 @@ const Library = ({ model, urlParams, queryParams }) => {
{model === 'library' ? t('LIBRARY_NOT_LOADED') : t('BOARD_CONTINUE_WATCHING_NOT_LOADED')}
@@ -96,7 +96,7 @@ const Library = ({ model, urlParams, queryParams }) => {
{model === 'library' ? t('LIBRARY_EMPTY') : t('BOARD_CONTINUE_WATCHING_EMPTY')}
diff --git a/src/routes/Library/Placeholder/Placeholder.tsx b/src/routes/Library/Placeholder/Placeholder.tsx
index d854a2d54..a066324e0 100644
--- a/src/routes/Library/Placeholder/Placeholder.tsx
+++ b/src/routes/Library/Placeholder/Placeholder.tsx
@@ -17,7 +17,7 @@ const Placeholder = () => {
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 7d6f21d69..9f2279bd9 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -134,20 +134,20 @@ const MetaDetails = ({ urlParams, queryParams }) => {
metaPath === null ?
-
+
{t('ERR_NO_META_SELECTED')}
:
metaDetails.metaItem === null ?
-
+
{t('ERR_NO_ADDONS_FOR_META')}
:
metaDetails.metaItem.content.type === 'Err' ?
-
+
{t('ERR_NO_META_FOUND')}
:
@@ -194,6 +194,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
metaItem={metaDetails.metaItem}
libraryItem={metaDetails.libraryItem}
season={season}
+ selectedVideoId={metaDetails.libraryItem?.state?.video_id}
seasonOnSelect={seasonOnSelect}
toggleNotifications={toggleNotifications}
/>
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index eebc0c3cf..7021644ab 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -132,7 +132,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
: null
}
-
+
{t('ERR_NO_ADDONS_FOR_STREAMS')}
:
@@ -148,7 +148,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
{t('UPCOMING')}...
: null
}
-
+
{t('NO_STREAM')}
{
showInstallAddonsButton ?
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 88d53d427..3cc3832d6 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -11,9 +11,10 @@ const SeasonsBar = require('./SeasonsBar');
const { default: EpisodePicker } = require('../EpisodePicker');
const styles = require('./styles');
-const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
+const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, selectedVideoId, toggleNotifications }) => {
const { core } = useServices();
const profile = useProfile();
+
const showNotificationsToggle = React.useMemo(() => {
return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
}, [metaItem]);
@@ -123,7 +124,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
metaItem.content.type === 'Err' || videosForSeason.length === 0 ?
-
+
{t('ERR_NO_VIDEOS_FOR_META')}
:
@@ -178,6 +179,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
deepLinks={video.deepLinks}
scheduled={video.scheduled}
seasonWatched={seasonWatched}
+ selected={video.id === selectedVideoId}
onMarkVideoAsWatched={onMarkVideoAsWatched}
onMarkSeasonAsWatched={onMarkSeasonAsWatched}
/>
@@ -195,6 +197,7 @@ VideosList.propTypes = {
metaItem: PropTypes.object,
libraryItem: PropTypes.object,
season: PropTypes.number,
+ selectedVideoId: PropTypes.string,
seasonOnSelect: PropTypes.func,
toggleNotifications: PropTypes.func,
};
diff --git a/src/routes/NotFound/NotFound.js b/src/routes/NotFound/NotFound.js
index d984496bc..a3c97d8c1 100644
--- a/src/routes/NotFound/NotFound.js
+++ b/src/routes/NotFound/NotFound.js
@@ -19,7 +19,7 @@ const NotFound = () => {
{t('PAGE_NOT_FOUND')}
diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less
index 344ec13e7..ae3e8acb1 100644
--- a/src/routes/Player/AudioMenu/AudioMenu.less
+++ b/src/routes/Player/AudioMenu/AudioMenu.less
@@ -7,6 +7,7 @@
align-self: stretch;
display: flex;
flex-direction: column;
+ max-height: 25rem;
width: 16rem;
.header {
diff --git a/src/routes/Player/BufferingLoader/BufferingLoader.js b/src/routes/Player/BufferingLoader/BufferingLoader.js
index 3d5664ae4..a762506f4 100644
--- a/src/routes/Player/BufferingLoader/BufferingLoader.js
+++ b/src/routes/Player/BufferingLoader/BufferingLoader.js
@@ -13,7 +13,7 @@ const BufferingLoader = React.forwardRef(({ className, logo }, ref) => {
className={styles['buffering-loader']}
src={logo}
alt={' '}
- fallbackSrc={require('/images/stremio_symbol.png')}
+ fallbackSrc={require('/assets/images/stremio_symbol.png')}
/>
);
diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index 968de5341..da826ba41 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -54,8 +54,8 @@ const OptionsMenu = ({ className, stream, playbackDevices, extraSubtitlesTracks,
}
}, [streamingUrl, downloadUrl]);
const onDownloadVideoButtonClick = React.useCallback(() => {
- if (streamingUrl || downloadUrl) {
- platform.openExternal(streamingUrl || downloadUrl);
+ if (downloadUrl || streamingUrl ) {
+ platform.openExternal(downloadUrl || streamingUrl);
}
}, [streamingUrl, downloadUrl]);
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index eab38bd96..196bb813b 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -8,7 +8,7 @@ const langs = require('langs');
const { useTranslation } = require('react-i18next');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
-const { onFileDrop, useSettings, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell } = require('stremio/common');
+const { onFileDrop, useSettings, useProfile, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell, usePlatform, onShortcut } = require('stremio/common');
const { HorizontalNavBar, Transition, ContextMenu } = require('stremio/components');
const BufferingLoader = require('./BufferingLoader');
const VolumeChangeIndicator = require('./VolumeChangeIndicator');
@@ -29,6 +29,9 @@ const styles = require('./styles');
const Video = require('./Video');
const { default: Indicator } = require('./Indicator/Indicator');
+const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
+const findTrackById = (tracks, id) => tracks.find((track) => track.id === id);
+
const Player = ({ urlParams, queryParams }) => {
const { t } = useTranslation();
const services = useServices();
@@ -36,13 +39,14 @@ const Player = ({ urlParams, queryParams }) => {
const forceTranscoding = React.useMemo(() => {
return queryParams.has('forceTranscoding');
}, [queryParams]);
-
- const [player, videoParamsChanged, timeChanged, seek, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
- const [settings, updateSettings] = useSettings();
+ const profile = useProfile();
+ const [player, videoParamsChanged, streamStateChanged, timeChanged, seek, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
+ const [settings] = useSettings();
const streamingServer = useStreamingServer();
const statistics = useStatistics(player, streamingServer);
const video = useVideo();
const routeFocused = useRouteFocused();
+ const platform = usePlatform();
const toast = useToast();
const [seeking, setSeeking] = React.useState(false);
@@ -92,25 +96,34 @@ const Player = ({ urlParams, queryParams }) => {
const isNavigating = React.useRef(false);
const onImplementationChanged = React.useCallback(() => {
- video.setProp('subtitlesSize', settings.subtitlesSize);
- video.setProp('subtitlesOffset', settings.subtitlesOffset);
- video.setProp('subtitlesTextColor', settings.subtitlesTextColor);
- video.setProp('subtitlesBackgroundColor', settings.subtitlesBackgroundColor);
- video.setProp('subtitlesOutlineColor', settings.subtitlesOutlineColor);
- video.setProp('extraSubtitlesSize', settings.subtitlesSize);
- video.setProp('extraSubtitlesOffset', settings.subtitlesOffset);
- video.setProp('extraSubtitlesTextColor', settings.subtitlesTextColor);
- video.setProp('extraSubtitlesBackgroundColor', settings.subtitlesBackgroundColor);
- video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
- }, [settings.subtitlesSize, settings.subtitlesOffset, settings.subtitlesTextColor, settings.subtitlesBackgroundColor, settings.subtitlesOutlineColor]);
+ video.setSubtitlesSize(settings.subtitlesSize);
+ video.setSubtitlesOffset(settings.subtitlesOffset);
+ video.setSubtitlesTextColor(settings.subtitlesTextColor);
+ video.setSubtitlesBackgroundColor(settings.subtitlesBackgroundColor);
+ video.setSubtitlesOutlineColor(settings.subtitlesOutlineColor);
+ }, [settings]);
- const handleNextVideoNavigation = React.useCallback((deepLinks) => {
- if (deepLinks.player) {
- isNavigating.current = true;
- window.location.replace(deepLinks.player);
- } else if (deepLinks.metaDetailsStreams) {
- isNavigating.current = true;
- window.location.replace(deepLinks.metaDetailsStreams);
+ const handleNextVideoNavigation = React.useCallback((deepLinks, bingeWatching, ended) => {
+ if (ended) {
+ if (bingeWatching) {
+ if (deepLinks.player) {
+ isNavigating.current = true;
+ window.location.replace(deepLinks.player);
+ } else if (deepLinks.metaDetailsStreams) {
+ isNavigating.current = true;
+ window.location.replace(deepLinks.metaDetailsStreams);
+ }
+ } else {
+ window.history.back();
+ }
+ } else {
+ if (deepLinks.player) {
+ isNavigating.current = true;
+ window.location.replace(deepLinks.player);
+ } else if (deepLinks.metaDetailsStreams) {
+ isNavigating.current = true;
+ window.location.replace(deepLinks.metaDetailsStreams);
+ }
}
}, []);
@@ -126,7 +139,8 @@ const Player = ({ urlParams, queryParams }) => {
nextVideo();
const deepLinks = window.playerNextVideo.deepLinks;
- handleNextVideoNavigation(deepLinks);
+ handleNextVideoNavigation(deepLinks, profile.settings.bingeWatching, true);
+
} else {
window.history.back();
}
@@ -174,53 +188,71 @@ const Player = ({ urlParams, queryParams }) => {
}, []);
const onPlayRequested = React.useCallback(() => {
- video.setProp('paused', false);
+ video.setPaused(false);
setSeeking(false);
}, []);
const onPlayRequestedDebounced = React.useCallback(debounce(onPlayRequested, 200), []);
const onPauseRequested = React.useCallback(() => {
- video.setProp('paused', true);
+ video.setPaused(true);
}, []);
const onPauseRequestedDebounced = React.useCallback(debounce(onPauseRequested, 200), []);
const onMuteRequested = React.useCallback(() => {
- video.setProp('muted', true);
+ video.setMuted(true);
}, []);
const onUnmuteRequested = React.useCallback(() => {
- video.setProp('muted', false);
+ video.setMuted(false);
}, []);
const onVolumeChangeRequested = React.useCallback((volume) => {
- video.setProp('volume', volume);
+ video.setVolume(volume);
}, []);
const onSeekRequested = React.useCallback((time) => {
- video.setProp('time', time);
+ video.setTime(time);
seek(time, video.state.duration, video.state.manifest?.name);
}, [video.state.duration, video.state.manifest]);
const onPlaybackSpeedChanged = React.useCallback((rate) => {
- video.setProp('playbackSpeed', rate);
+ video.setPlaybackSpeed(rate);
}, []);
const onSubtitlesTrackSelected = React.useCallback((id) => {
video.setSubtitlesTrack(id);
- }, []);
+ streamStateChanged({
+ subtitleTrack: {
+ id,
+ embedded: true,
+ },
+ });
+ }, [streamStateChanged]);
const onExtraSubtitlesTrackSelected = React.useCallback((id) => {
video.setExtraSubtitlesTrack(id);
- }, []);
+ streamStateChanged({
+ subtitleTrack: {
+ id,
+ embedded: false,
+ },
+ });
+ }, [streamStateChanged]);
const onAudioTrackSelected = React.useCallback((id) => {
- video.setProp('selectedAudioTrackId', id);
- }, []);
+ video.setAudioTrack(id);
+ streamStateChanged({
+ audioTrack: {
+ id,
+ },
+ });
+ }, [streamStateChanged]);
const onExtraSubtitlesDelayChanged = React.useCallback((delay) => {
- video.setProp('extraSubtitlesDelay', delay);
- }, []);
+ video.setSubtitlesDelay(delay);
+ streamStateChanged({ subtitleDelay: delay });
+ }, [streamStateChanged]);
const onIncreaseSubtitlesDelay = React.useCallback(() => {
const delay = video.state.extraSubtitlesDelay + 250;
@@ -233,8 +265,9 @@ const Player = ({ urlParams, queryParams }) => {
}, [video.state.extraSubtitlesDelay, onExtraSubtitlesDelayChanged]);
const onSubtitlesSizeChanged = React.useCallback((size) => {
- updateSettings({ subtitlesSize: size });
- }, [updateSettings]);
+ video.setSubtitlesSize(size);
+ streamStateChanged({ subtitleSize: size });
+ }, [streamStateChanged]);
const onUpdateSubtitlesSize = React.useCallback((delta) => {
const sizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(video.state.subtitlesSize);
@@ -243,8 +276,9 @@ const Player = ({ urlParams, queryParams }) => {
}, [video.state.subtitlesSize, onSubtitlesSizeChanged]);
const onSubtitlesOffsetChanged = React.useCallback((offset) => {
- updateSettings({ subtitlesOffset: offset });
- }, [updateSettings]);
+ video.setSubtitlesOffset(offset);
+ streamStateChanged({ subtitleOffset: offset });
+ }, [streamStateChanged]);
const onDismissNextVideoPopup = React.useCallback(() => {
closeNextVideoPopup();
@@ -256,9 +290,9 @@ const Player = ({ urlParams, queryParams }) => {
nextVideo();
const deepLinks = player.nextVideo.deepLinks;
- handleNextVideoNavigation(deepLinks);
+ handleNextVideoNavigation(deepLinks, profile.settings.bingeWatching, false);
}
- }, [player.nextVideo, handleNextVideoNavigation]);
+ }, [player.nextVideo, handleNextVideoNavigation, profile.settings]);
const onVideoClick = React.useCallback(() => {
if (video.state.paused !== null) {
@@ -322,10 +356,10 @@ const Player = ({ urlParams, queryParams }) => {
setError(null);
video.unload();
- if (player.selected && streamingServer.settings?.type !== 'Loading') {
+ if (player.selected && player.stream?.type === 'Ready' && streamingServer.settings?.type !== 'Loading') {
video.load({
stream: {
- ...player.selected.stream,
+ ...player.stream.content,
subtitles: Array.isArray(player.selected.stream.subtitles) ?
player.selected.stream.subtitles.map((subtitles) => ({
...subtitles,
@@ -345,6 +379,9 @@ const Player = ({ urlParams, queryParams }) => {
forceTranscoding: forceTranscoding || casting,
maxAudioChannels: settings.surroundSound ? 32 : 2,
hardwareDecoding: settings.hardwareDecoding,
+ assSubtitlesStyling: settings.assSubtitlesStyling,
+ videoMode: settings.videoMode,
+ platform: platform.name,
streamingServerURL: streamingServer.baseUrl ?
casting ?
streamingServer.baseUrl
@@ -358,7 +395,7 @@ const Player = ({ urlParams, queryParams }) => {
shellTransport: services.shell.active ? services.shell.transport : null,
});
}
- }, [streamingServer.baseUrl, player.selected, forceTranscoding, casting]);
+ }, [streamingServer.baseUrl, player.selected, player.stream, forceTranscoding, casting]);
React.useEffect(() => {
if (video.state.stream !== null) {
const tracks = player.subtitles.map((subtitles) => ({
@@ -369,31 +406,6 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [player.subtitles, video.state.stream]);
- React.useEffect(() => {
- video.setProp('subtitlesSize', settings.subtitlesSize);
- video.setProp('extraSubtitlesSize', settings.subtitlesSize);
- }, [settings.subtitlesSize]);
-
- React.useEffect(() => {
- video.setProp('subtitlesOffset', settings.subtitlesOffset);
- video.setProp('extraSubtitlesOffset', settings.subtitlesOffset);
- }, [settings.subtitlesOffset]);
-
- React.useEffect(() => {
- video.setProp('subtitlesTextColor', settings.subtitlesTextColor);
- video.setProp('extraSubtitlesTextColor', settings.subtitlesTextColor);
- }, [settings.subtitlesTextColor]);
-
- React.useEffect(() => {
- video.setProp('subtitlesBackgroundColor', settings.subtitlesBackgroundColor);
- video.setProp('extraSubtitlesBackgroundColor', settings.subtitlesBackgroundColor);
- }, [settings.subtitlesBackgroundColor]);
-
- React.useEffect(() => {
- video.setProp('subtitlesOutlineColor', settings.subtitlesOutlineColor);
- video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
- }, [settings.subtitlesOutlineColor]);
-
React.useEffect(() => {
!seeking && timeChanged(video.state.time, video.state.duration, video.state.manifest?.name);
}, [video.state.time, video.state.duration, video.state.manifest, seeking]);
@@ -409,7 +421,7 @@ const Player = ({ urlParams, queryParams }) => {
}, [video.state.videoParams]);
React.useEffect(() => {
- if (!!settings.bingeWatching && player.nextVideo !== null && !nextVideoPopupDismissed.current) {
+ if (player.nextVideo !== null && !nextVideoPopupDismissed.current) {
if (video.state.time !== null && video.state.duration !== null && video.state.time < video.state.duration && (video.state.duration - video.state.time) <= settings.nextVideoNotificationDuration) {
openNextVideoPopup();
} else {
@@ -426,41 +438,69 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [player.nextVideo, video.state.time, video.state.duration]);
+ // Auto subtitles track selection
React.useEffect(() => {
if (!defaultSubtitlesSelected.current) {
- const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
-
if (settings.subtitlesLanguage === null) {
- onSubtitlesTrackSelected(null);
- onExtraSubtitlesTrackSelected(null);
+ video.setSubtitlesTrack(null);
+ video.setExtraSubtitlesTrack(null);
defaultSubtitlesSelected.current = true;
return;
}
- const subtitlesTrack = findTrackByLang(video.state.subtitlesTracks, settings.subtitlesLanguage);
- const extraSubtitlesTrack = findTrackByLang(video.state.extraSubtitlesTracks, settings.subtitlesLanguage);
+ const savedTrackId = player.streamState?.subtitleTrack?.id;
+ const subtitlesTrack = savedTrackId ?
+ findTrackById(video.state.subtitlesTracks, savedTrackId) :
+ findTrackByLang(video.state.subtitlesTracks, settings.subtitlesLanguage);
+
+ const extraSubtitlesTrack = savedTrackId ?
+ findTrackById(video.state.extraSubtitlesTracks, savedTrackId) :
+ findTrackByLang(video.state.extraSubtitlesTracks, settings.subtitlesLanguage);
if (subtitlesTrack && subtitlesTrack.id) {
- onSubtitlesTrackSelected(subtitlesTrack.id);
+ video.setSubtitlesTrack(subtitlesTrack.id);
defaultSubtitlesSelected.current = true;
} else if (extraSubtitlesTrack && extraSubtitlesTrack.id) {
- onExtraSubtitlesTrackSelected(extraSubtitlesTrack.id);
+ video.setExtraSubtitlesTrack(extraSubtitlesTrack.id);
defaultSubtitlesSelected.current = true;
}
}
- }, [video.state.subtitlesTracks, video.state.extraSubtitlesTracks]);
+ }, [video.state.subtitlesTracks, video.state.extraSubtitlesTracks, player.streamState]);
+ // Auto audio track selection
React.useEffect(() => {
if (!defaultAudioTrackSelected.current) {
- const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
- const audioTrack = findTrackByLang(video.state.audioTracks, settings.audioLanguage);
+ const savedTrackId = player.streamState?.audioTrack?.id;
+ const audioTrack = savedTrackId ?
+ findTrackById(video.state.audioTracks, savedTrackId) :
+ findTrackByLang(video.state.audioTracks, settings.audioLanguage);
if (audioTrack && audioTrack.id) {
- onAudioTrackSelected(audioTrack.id);
+ video.setAudioTrack(audioTrack.id);
defaultAudioTrackSelected.current = true;
}
}
- }, [video.state.audioTracks]);
+ }, [video.state.audioTracks, player.streamState]);
+
+ // Saved subtitles settings
+ React.useEffect(() => {
+ if (video.state.stream !== null) {
+ const delay = player.streamState?.subtitleDelay;
+ if (typeof delay === 'number') {
+ video.setSubtitlesDelay(delay);
+ }
+
+ const size = player.streamState?.subtitleSize;
+ if (typeof size === 'number') {
+ video.setSubtitlesSize(size);
+ }
+
+ const offset = player.streamState?.subtitleOffset;
+ if (typeof offset === 'number') {
+ video.setSubtitlesOffset(offset);
+ }
+ }
+ }, [video.state.stream, player.streamState]);
React.useEffect(() => {
defaultSubtitlesSelected.current = false;
@@ -546,11 +586,11 @@ const Player = ({ urlParams, queryParams }) => {
React.useEffect(() => {
if (!navigator.mediaSession) return;
- const metaItem = player.metaItem && player.metaItem.type === 'Ready' ? player.metaItem.content : null;
- const videoId = player.selected ? player.selected.streamRequest.path.id : null;
+ const metaItem = player.metaItem && player.metaItem?.type === 'Ready' ? player.metaItem.content : null;
+ const videoId = player.selected ? player.selected?.streamRequest?.path?.id : null;
const video = metaItem ? metaItem.videos.find(({ id }) => id === videoId) : null;
- const videoInfo = video && video.season && video.episode ? ` (${video.season}x${video.episode})`: null;
+ const videoInfo = video && video.season && video.episode ? ` (${video.season}x${video.episode})` : null;
const videoTitle = video ? `${video.title}${videoInfo}` : null;
const metaTitle = metaItem ? metaItem.name : null;
const imageUrl = metaItem ? metaItem.logo : null;
@@ -579,117 +619,99 @@ const Player = ({ urlParams, queryParams }) => {
navigator.mediaSession.setActionHandler('nexttrack', nexVideoCallback);
}, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested]);
- React.useLayoutEffect(() => {
- const onKeyDown = (event) => {
- switch (event.code) {
- case 'Space': {
- if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
- if (video.state.paused) {
- onPlayRequested();
- setSeeking(false);
- } else {
- onPauseRequested();
- }
- }
-
- break;
- }
- case 'ArrowRight': {
- if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
- const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
- setSeeking(true);
- onSeekRequested(video.state.time + seekDuration);
- }
-
- break;
- }
- case 'ArrowLeft': {
- if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
- const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
- setSeeking(true);
- onSeekRequested(video.state.time - seekDuration);
- }
-
- break;
- }
- case 'ArrowUp': {
- if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
- onVolumeChangeRequested(Math.min(video.state.volume + 5, 200));
- }
-
- break;
- }
- case 'ArrowDown': {
- if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
- onVolumeChangeRequested(Math.max(video.state.volume - 5, 0));
- }
-
- break;
- }
- case 'KeyS': {
- closeMenus();
- if ((Array.isArray(video.state.subtitlesTracks) && video.state.subtitlesTracks.length > 0) ||
- (Array.isArray(video.state.extraSubtitlesTracks) && video.state.extraSubtitlesTracks.length > 0)) {
- toggleSubtitlesMenu();
- }
-
- break;
- }
- case 'KeyA': {
- closeMenus();
- if (Array.isArray(video.state.audioTracks) && video.state.audioTracks.length > 0) {
- toggleAudioMenu();
- }
-
- break;
- }
- case 'KeyI': {
- closeMenus();
- if (player.metaItem !== null && player.metaItem.type === 'Ready') {
- toggleSideDrawer();
- }
-
- break;
- }
- case 'KeyR': {
- closeMenus();
- if (video.state.playbackSpeed !== null) {
- toggleSpeedMenu();
- }
-
- break;
- }
- case 'KeyD': {
- closeMenus();
- if (streamingServer.statistics !== null && streamingServer.statistics.type !== 'Err' && player.selected && typeof player.selected.stream.infoHash === 'string' && typeof player.selected.stream.fileIdx === 'number') {
- toggleStatisticsMenu();
- }
-
- break;
- }
- case 'KeyG': {
- onDecreaseSubtitlesDelay();
- break;
- }
- case 'KeyH': {
- onIncreaseSubtitlesDelay();
- break;
- }
- case 'Minus': {
- onUpdateSubtitlesSize(-1);
- break;
- }
- case 'Equal': {
- onUpdateSubtitlesSize(1);
- break;
- }
- case 'Escape': {
- closeMenus();
- !settings.escExitFullscreen && window.history.back();
- break;
- }
+ onShortcut('playPause', () => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
+ if (video.state.paused) {
+ onPlayRequested();
+ setSeeking(false);
+ } else {
+ onPauseRequested();
}
- };
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.paused, onPlayRequested, onPauseRequested]);
+
+ onShortcut('seekForward', (combo) => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
+ const seekDuration = combo === 1 ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+ setSeeking(true);
+ onSeekRequested(video.state.time + seekDuration);
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.time, onSeekRequested]);
+
+ onShortcut('seekBackward', (combo) => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
+ const seekDuration = combo === 1 ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+ setSeeking(true);
+ onSeekRequested(video.state.time - seekDuration);
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.time, onSeekRequested]);
+
+ onShortcut('mute', () => {
+ video.state.muted === true ? onUnmuteRequested() : onMuteRequested();
+ }, [video.state.muted]);
+
+ onShortcut('volumeUp', () => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+ onVolumeChangeRequested(Math.min(video.state.volume + 5, 200));
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.volume]);
+
+ onShortcut('volumeDown', () => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+ onVolumeChangeRequested(Math.min(video.state.volume - 5, 200));
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.volume]);
+
+ onShortcut('subtitlesDelay', (combo) => {
+ combo === 1 ? onIncreaseSubtitlesDelay() : onDecreaseSubtitlesDelay();
+ }, [onIncreaseSubtitlesDelay, onDecreaseSubtitlesDelay]);
+
+ onShortcut('subtitlesSize', (combo) => {
+ combo === 1 ? onUpdateSubtitlesSize(-1) : onUpdateSubtitlesSize(1);
+ }, [onUpdateSubtitlesSize, onUpdateSubtitlesSize]);
+
+ onShortcut('subtitlesMenu', () => {
+ closeMenus();
+ if (video.state?.subtitlesTracks?.length > 0 || video.state?.extraSubtitlesTracks?.length > 0) {
+ toggleSubtitlesMenu();
+ }
+ }, [video.state.subtitlesTracks, video.state.extraSubtitlesTracks, toggleSubtitlesMenu]);
+
+ onShortcut('audioMenu', () => {
+ closeMenus();
+ if (video.state?.audioTracks?.length > 0) {
+ toggleAudioMenu();
+ }
+ }, [video.state.audioTracks, toggleAudioMenu]);
+
+ onShortcut('infoMenu', () => {
+ closeMenus();
+ if (player.metaItem?.type === 'Ready') {
+ toggleSideDrawer();
+ }
+ }, [player.metaItem, toggleSideDrawer]);
+
+ onShortcut('speedMenu', () => {
+ closeMenus();
+ if (video.state.playbackSpeed !== null) {
+ toggleSpeedMenu();
+ }
+ }, [video.state.playbackSpeed, toggleSpeedMenu]);
+
+ onShortcut('statisticsMenu', () => {
+ closeMenus();
+ const stream = player.selected?.stream;
+ if (streamingServer?.statistics?.type !== 'Err' && typeof stream === 'string' && typeof stream === 'number') {
+ toggleStatisticsMenu();
+ }
+ }, [player.selected, streamingServer.statistics, toggleStatisticsMenu]);
+
+ onShortcut('exit', () => {
+ closeMenus();
+ !settings.escExitFullscreen && window.history.back();
+ }, [settings.escExitFullscreen]);
+
+ React.useLayoutEffect(() => {
const onKeyUp = (event) => {
if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') {
setSeeking(false);
@@ -707,39 +729,14 @@ const Player = ({ urlParams, queryParams }) => {
}
};
if (routeFocused) {
- window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
window.addEventListener('wheel', onWheel);
}
return () => {
- window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('wheel', onWheel);
};
- }, [
- player.metaItem,
- player.selected,
- streamingServer.statistics,
- settings.seekTimeDuration,
- settings.seekShortTimeDuration,
- settings.escExitFullscreen,
- routeFocused,
- menusOpen,
- nextVideoPopupOpen,
- video.state.paused,
- video.state.time,
- video.state.volume,
- video.state.audioTracks,
- video.state.subtitlesTracks,
- video.state.extraSubtitlesTracks,
- video.state.playbackSpeed,
- toggleSubtitlesMenu,
- toggleStatisticsMenu,
- toggleSideDrawer,
- onDecreaseSubtitlesDelay,
- onIncreaseSubtitlesDelay,
- onUpdateSubtitlesSize,
- ]);
+ }, [routeFocused, menusOpen, video.state.volume]);
React.useEffect(() => {
video.events.on('error', onError);
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 299c37b23..d5b13e11f 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,6 +1,6 @@
// Copyright (C) 2017-2024 Smart code 203358507
-import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
import classNames from 'classnames';
import Icon from '@stremio/stremio-icons/react';
import { useServices } from 'stremio/services';
@@ -21,7 +21,8 @@ type Props = {
const SideDrawer = memo(forwardRef
(({ seriesInfo, className, closeSideDrawer, selected, ...props }: Props, ref) => {
const { core } = useServices();
const [season, setSeason] = useState(seriesInfo?.season);
- const selectedVideoRef = useRef(null);
+ const [selectedVideoId, setSelectedVideoId] = useState(null);
+
const metaItem = useMemo(() => {
return seriesInfo ?
{
@@ -78,11 +79,9 @@ const SideDrawer = memo(forwardRef(({ seriesInfo, classNa
event.stopPropagation();
};
- const onTransitionEnd = () => {
- selectedVideoRef.current?.scrollIntoView({
- behavior: 'smooth',
- });
- };
+ const onTransitionEnd = useCallback(() => {
+ setSelectedVideoId(selected);
+ }, [selected]);
return (
@@ -114,7 +113,6 @@ const SideDrawer = memo(forwardRef(({ seriesInfo, classNa
{videos.map((video, index) => (
- { disabled ? '--' : `${value}${unit}` }
+ { valueLabel }
diff --git a/src/routes/Settings/Shortcuts/Shortcuts.less b/src/routes/Settings/Shortcuts/Shortcuts.less
index 40d97987d..186cfa837 100644
--- a/src/routes/Settings/Shortcuts/Shortcuts.less
+++ b/src/routes/Settings/Shortcuts/Shortcuts.less
@@ -1,27 +1,4 @@
-.shortcut-container {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
- overflow: visible;
-
- kbd {
- flex: 0 1 auto;
- height: 2.5rem;
- min-width: 2.5rem;
- line-height: 2.5rem;
- padding: 0 1rem;
- font-weight: 500;
- color: var(--primary-foreground-color);
- border-radius: 0.25em;
- box-shadow: 0 4px 0 1px var(--modal-background-color);
- background-color: var(--overlay-color);
- }
-
- .label {
- flex: none;
- margin: 0 1rem;
- white-space: nowrap;
- color: var(--primary-foreground-color);
- }
+.shortcuts-group {
+ width: 100%;
+ margin-bottom: 3rem;
}
\ No newline at end of file
diff --git a/src/routes/Settings/Shortcuts/Shortcuts.tsx b/src/routes/Settings/Shortcuts/Shortcuts.tsx
index d852280a6..a0599a503 100644
--- a/src/routes/Settings/Shortcuts/Shortcuts.tsx
+++ b/src/routes/Settings/Shortcuts/Shortcuts.tsx
@@ -1,97 +1,24 @@
import React, { forwardRef } from 'react';
-import { Section, Option } from '../components';
+import { Section } from '../components';
+import { ShortcutsGroup } from 'stremio/components';
+import { useShortcuts } from 'stremio/common';
import styles from './Shortcuts.less';
-import { useTranslation } from 'react-i18next';
const Shortcuts = forwardRef((_, ref) => {
- const { t } = useTranslation();
+ const { grouped } = useShortcuts();
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {
+ grouped.map(({ name, label, shortcuts }) => (
+
+ ))
+ }
);
});
diff --git a/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less
index e8de1ecf6..1ced5f14d 100644
--- a/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less
+++ b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less
@@ -69,7 +69,7 @@
.cancel {
&:hover {
.icon {
- color: var(--color-trakt);
+ color: var(--danger-accent-color);
}
}
}
diff --git a/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.tsx b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.tsx
index a73cf95e0..d0a2e0c41 100644
--- a/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.tsx
+++ b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.tsx
@@ -17,7 +17,7 @@ const AddItem = ({ onCancel, handleAddUrl }: Props) => {
setInputValue(target.value);
}, []);
- const onSumbit = useCallback(() => {
+ const onSubmit = useCallback(() => {
handleAddUrl(inputValue);
}, [inputValue]);
@@ -27,11 +27,11 @@ const AddItem = ({ onCancel, handleAddUrl }: Props) => {
className={styles['input']}
value={inputValue}
onChange={handleValueChange}
- onSubmit={onSumbit}
+ onSubmit={onSubmit}
placeholder={'Enter URL'}
/>
-