@@ -159,7 +152,7 @@ const Video = React.forwardRef(({ className, id, title, thumbnail, season, episo
{children}
);
- }, []);
+ }, [selected]);
const renderMenu = React.useMemo(() => function renderMenu() {
return (
@@ -203,7 +196,7 @@ const Video = React.forwardRef(({ className, id, title, thumbnail, season, episo
renderMenu={renderMenu}
/>
);
-});
+};
Video.Placeholder = VideoPlaceholder;
@@ -220,6 +213,7 @@ Video.propTypes = {
progress: PropTypes.number,
scheduled: PropTypes.bool,
seasonWatched: PropTypes.bool,
+ selected: PropTypes.bool,
deepLinks: PropTypes.shape({
metaDetailsStreams: PropTypes.string,
player: PropTypes.string
diff --git a/src/components/index.ts b/src/components/index.ts
index a5638007e..a47c2c709 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,6 +25,7 @@ import RadioButton from './RadioButton';
import SearchBar from './SearchBar';
import SharePrompt from './SharePrompt';
import Slider from './Slider';
+import ShortcutsGroup from './ShortcutsGroup';
import TextInput from './TextInput';
import Toggle from './Toggle';
import Transition from './Transition';
@@ -59,6 +60,7 @@ export {
SearchBar,
SharePrompt,
Slider,
+ ShortcutsGroup,
TextInput,
Toggle,
Transition,
diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index 9e6228490..afd2a3889 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -2,6 +2,25 @@
@import (reference) '~stremio/common/screen-sizes.less';
+.disable-cell-items() {
+ .cell {
+ .items {
+ .item {
+ pointer-events: none;
+ }
+ }
+ }
+}
+
+.compact-items() {
+ .cell {
+ .items {
+ padding: 1px;
+ gap: 0.15rem;
+ }
+ }
+}
+
.cell {
position: relative;
display: flex;
@@ -27,12 +46,9 @@
}
.heading {
- flex: none;
position: relative;
- height: 3rem;
display: flex;
- align-items: center;
- padding: 0 1rem;
+ align-items: flex-start;
.day {
flex: none;
@@ -50,12 +66,15 @@
}
.items {
- flex: 0 1 10rem;
position: relative;
display: flex;
flex-direction: row;
- gap: 1rem;
- padding: 0 0.5rem 0.5rem 0.5rem;
+ gap: 0.2rem;
+ padding: 0.1rem;
+ flex: 1 1 60%;
+ overflow-x: auto;
+ overflow-y: hidden;
+ min-width: 0;
.item {
flex: none;
@@ -64,7 +83,9 @@
justify-content: center;
height: 100%;
aspect-ratio: 2 / 3;
- border-radius: var(--border-radius);
+ border-radius: calc(var(--border-radius) / 2);
+ max-height: 100%;
+ max-width: 100%;
.icon {
flex: none;
@@ -80,13 +101,11 @@
}
.poster {
- flex: auto;
- z-index: 0;
- position: relative;
- height: 100%;
- width: 100%;
+ height: auto;
+ max-height: 100%;
+ aspect-ratio: 2 / 3;
object-fit: cover;
- opacity: 1;
+ border-radius: inherit
}
.icon, .poster {
@@ -117,8 +136,11 @@
&.today {
.heading {
+ padding: 0.3rem;
.day {
background-color: var(--primary-accent-color);
+ height: 1.5rem;
+ width: 1.5rem;
}
}
}
@@ -134,56 +156,55 @@
}
}
-@media only screen and (max-height: @minimum) and (orientation: portrait) {
- .cell {
- .heading {
- justify-content: center;
- }
-
- .items {
- display: none;
- }
-
- .more {
- display: flex;
- }
- }
+@media only screen and (max-width: @minimum) {
+ .disable-cell-items();
}
-@media only screen and (max-height: @xxsmall) and (orientation: landscape) {
+@media @phone-portrait {
+ .cell {
+ flex-direction: column;
+ display: grid;
+ }
+ .compact-items();
+ .disable-cell-items();
+}
+
+@media @phone-landscape {
.cell {
flex-direction: row;
- align-items: center;
-
- .items {
- display: none;
- }
-
- .more {
- display: flex;
- }
}
+ .compact-items();
+ .disable-cell-items();
}
-@media only screen and (max-height: @xsmall) and (max-width: @xsmall) {
+@media only screen and (max-height: @medium) and (max-width: @medium) and (orientation: landscape) {
.cell {
gap: 0;
.heading {
- height: 2rem;
-
.day {
+ padding: 0;
font-size: 0.875rem;
}
}
.items {
- padding: 0.25rem;
-
- .item {
- pointer-events: none;
- border-radius: calc(var(--border-radius) / 2);
- }
+ width: 100%;
+ padding-left: 0.5rem;
}
}
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: @minimum) and (orientation: portrait) and (pointer: fine) {
+ .cell {
+ display: flex;
+
+ .heading {
+ flex: 1 1 33%;
+ }
+ }
+}
+
+@media screen and (max-width: @small) and (orientation: portrait) {
+ .disable-cell-items();
+}
diff --git a/src/routes/Calendar/Table/Table.less b/src/routes/Calendar/Table/Table.less
index 65a9b01e9..14fc89f7c 100644
--- a/src/routes/Calendar/Table/Table.less
+++ b/src/routes/Calendar/Table/Table.less
@@ -45,6 +45,7 @@
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
+ grid-auto-rows: 1fr;
}
}
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 811c4859c..f04302fc7 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -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..31a09d54c 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -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/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index d806ffed5..fd27478b5 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -190,6 +190,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/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 88d53d427..8891947db 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]);
@@ -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/Player/Player.js b/src/routes/Player/Player.js
index 436f1a781..bcd973267 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, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell, usePlatform } = require('stremio/common');
const { HorizontalNavBar, Transition, ContextMenu } = require('stremio/components');
const BufferingLoader = require('./BufferingLoader');
const VolumeChangeIndicator = require('./VolumeChangeIndicator');
@@ -43,6 +43,7 @@ const Player = ({ urlParams, queryParams }) => {
const statistics = useStatistics(player, streamingServer);
const video = useVideo();
const routeFocused = useRouteFocused();
+ const platform = usePlatform();
const toast = useToast();
const [seeking, setSeeking] = React.useState(false);
@@ -345,6 +346,8 @@ const Player = ({ urlParams, queryParams }) => {
forceTranscoding: forceTranscoding || casting,
maxAudioChannels: settings.surroundSound ? 32 : 2,
hardwareDecoding: settings.hardwareDecoding,
+ videoMode: settings.videoMode,
+ platform: platform.name,
streamingServerURL: streamingServer.baseUrl ?
casting ?
streamingServer.baseUrl
@@ -532,6 +535,53 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
+ // Media Session PlaybackState
+ React.useEffect(() => {
+ if (!navigator.mediaSession) return;
+
+ const playbackState = !video.state.paused ? 'playing' : 'paused';
+ navigator.mediaSession.playbackState = playbackState;
+
+ return () => navigator.mediaSession.playbackState = 'none';
+ }, [video.state.paused]);
+
+ // Media Session Metadata
+ 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 video = metaItem ? metaItem.videos.find(({ id }) => id === videoId) : 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;
+
+ const title = videoTitle ?? metaTitle;
+ const artist = videoTitle ? metaTitle : undefined;
+ const artwork = imageUrl ? [{ src: imageUrl }] : undefined;
+
+ if (title) {
+ navigator.mediaSession.metadata = new MediaMetadata({
+ title,
+ artist,
+ artwork,
+ });
+ }
+ }, [player.metaItem, player.selected]);
+
+ // Media Session Actions
+ React.useEffect(() => {
+ if (!navigator.mediaSession) return;
+
+ navigator.mediaSession.setActionHandler('play', onPlayRequested);
+ navigator.mediaSession.setActionHandler('pause', onPauseRequested);
+
+ const nexVideoCallback = player.nextVideo ? onNextVideoRequested : null;
+ navigator.mediaSession.setActionHandler('nexttrack', nexVideoCallback);
+ }, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested]);
+
React.useLayoutEffect(() => {
const onKeyDown = (event) => {
switch (event.code) {
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) => (