Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'development' of https://github.com/Stremio/stremio-web into feat/player-next-video-popup

Browse source
This commit is contained in:
Tim 2022-11-28 11:24:24 +01:00
commit eeda6e9fd0
29 changed files with 2073 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
favicons/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
images/icon_x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/icon_x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
images/maskable_icon_x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

BIN
images/maskable_icon_x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

40
manifest.json Normal file
View file

@ -0,0 +1,40 @@
{
"short_name": "Stremio",
"name": "Stremio Web",
"description": "Freedom To Stream",
"icons": [
{
"src": "favicons/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "images/icon_x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "images/icon_x512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "images/maskable_icon_x192.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "maskable"
},
{
"src": "images/maskable_icon_x512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
}
],
"start_url": "https://web.stremio.com",
"scope": "https://web.stremio.com",
"display": "standalone",
"orientation": "natural",
"theme_color": "#2a2843",
"background_color": "#161523"
}

1692
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

12
package.json
View file

@ -14,16 +14,19 @@
"dependencies": {
"@babel/runtime": "7.16.0",
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "4.0.1",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.44.6",
"@stremio/stremio-icons": "3.0.5",
"@stremio/stremio-video": "0.0.23",
"@stremio/stremio-icons": "4.0.0",
"@stremio/stremio-video": "0.0.24",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",
"buffer": "6.0.3",
"classnames": "2.3.1",
"eventemitter3": "4.0.7",
"filter-invalid-dom-props": "2.1.0",
"langs": "^2.0.0",
"hat": "0.0.3",
"langs": "^2.0.0",
"lodash.debounce": "4.0.8",
"lodash.intersection": "4.4.0",
"lodash.isequal": "4.5.0",
@ -61,6 +64,7 @@
"terser-webpack-plugin": "5.2.4",
"webpack": "5.61.0",
"webpack-cli": "4.9.1",
"webpack-dev-server": "4.7.4"
"webpack-dev-server": "4.7.4",
"workbox-webpack-plugin": "^6.5.3"
}
}

2
src/common/index.js
View file

@ -31,7 +31,6 @@ const languageNames = require('./languageNames');
const routesRegexp = require('./routesRegexp');
const useAnimationFrame = require('./useAnimationFrame');
const useBinaryState = require('./useBinaryState');
const useDeepEqualMemo = require('./useDeepEqualMemo');
const useFullscreen = require('./useFullscreen');
const useLiveRef = require('./useLiveRef');
const useModelState = require('./useModelState');
@ -75,7 +74,6 @@ module.exports = {
routesRegexp,
useAnimationFrame,
useBinaryState,
useDeepEqualMemo,
useFullscreen,
useLiveRef,
useModelState,

20
src/common/useDeepEqualMemo.js
View file

@ -1,20 +0,0 @@
// Copyright (C) 2017-2022 Smart code 203358507
const React = require('react');
const isEqual = require('lodash.isequal');
const useDeepEqualMemo = (cb, deps) => {
const valueRef = React.useRef();
const mountedRef = React.useRef(false);
const prevDepsRef = React.useRef(deps);
if (!mountedRef.current || !isEqual(prevDepsRef.current, deps)) {
valueRef.current = cb();
prevDepsRef.current = deps;
}
React.useLayoutEffect(() => {
mountedRef.current = true;
}, []);
return valueRef.current;
};
module.exports = useDeepEqualMemo;

6
src/index.html
View file

@ -7,8 +7,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Stremio">
<link rel="icon" type="image/png" sizes="96x96" href="<%= htmlWebpackPlugin.options.faviconsPath %>/icon-96.png">
<link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/icon-96.png" />
<title>Stremio - All you can watch!</title>
<link rel="manifest" href="<%= htmlWebpackPlugin.options.manifestPath %>" />
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.themeColor %>">
<link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.imagesPath %>/icon_x192.png">
<title>Stremio - Freedom to Stream</title>
<%= htmlWebpackPlugin.tags.headTags %>
</head>

9
src/index.js
View file

@ -17,3 +17,12 @@ const App = require('./App');
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.catch((registrationError) => {
console.error('SW registration failed: ', registrationError);
});
});
}

15
src/routes/Player/ControlBar/ControlBar.js
View file

@ -18,6 +18,7 @@ const ControlBar = ({
duration,
volume,
muted,
playbackSpeed,
subtitlesTracks,
audioTracks,
metaItem,
@ -30,6 +31,7 @@ const ControlBar = ({
onSeekRequested,
onToggleSubtitlesMenu,
onToggleInfoMenu,
onToggleSpeedMenu,
onToggleVideosMenu,
...props
}) => {
@ -42,6 +44,9 @@ const ControlBar = ({
const onInfoButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.infoMenuClosePrevented = true;
}, []);
const onSpeedButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.speedMenuClosePrevented = true;
}, []);
const onVideosButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.videosMenuClosePrevented = true;
}, []);
@ -86,6 +91,11 @@ const ControlBar = ({
onToggleInfoMenu();
}
}, [onToggleInfoMenu]);
const onSpeedButtonClick = React.useCallback(() => {
if (typeof onToggleSpeedMenu === 'function') {
onToggleSpeedMenu();
}
}, [onToggleSpeedMenu]);
const onVideosButtonClick = React.useCallback(() => {
if (typeof onToggleVideosMenu === 'function') {
onToggleVideosMenu();
@ -145,6 +155,9 @@ const ControlBar = ({
<Icon className={styles['icon']} icon={'ic_more'} />
</Button>
<div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onSpeedButtonClick}>
<Icon className={styles['icon']} icon={'ic_speedometer'} />
</Button>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_network'} />
</Button>
@ -178,6 +191,7 @@ ControlBar.propTypes = {
duration: PropTypes.number,
volume: PropTypes.number,
muted: PropTypes.bool,
playbackSpeed: PropTypes.number,
subtitlesTracks: PropTypes.array,
audioTracks: PropTypes.array,
metaItem: PropTypes.object,
@ -190,6 +204,7 @@ ControlBar.propTypes = {
onSeekRequested: PropTypes.func,
onToggleSubtitlesMenu: PropTypes.func,
onToggleInfoMenu: PropTypes.func,
onToggleSpeedMenu: PropTypes.func,
onToggleVideosMenu: PropTypes.func
};

95
src/routes/Player/Player.js
View file

@ -4,6 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const langs = require('langs');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
@ -14,6 +15,7 @@ const NextVideoPopup = require('./NextVideoPopup');
const InfoMenu = require('./InfoMenu');
const VideosMenu = require('./VideosMenu');
const SubtitlesMenu = require('./SubtitlesMenu');
const SpeedMenu = require('./SpeedMenu');
const Video = require('./Video');
const usePlayer = require('./usePlayer');
const useSettings = require('./useSettings');
@ -40,9 +42,12 @@ const Player = ({ urlParams, queryParams }) => {
const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
const nextVideoPopupDismissed = React.useRef(false);
const defaultSubtitlesSelected = React.useRef(false);
const defaultAudioTrackSelected = React.useRef(false);
const [error, setError] = React.useState(null);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@ -55,6 +60,7 @@ const Player = ({ urlParams, queryParams }) => {
buffering: null,
volume: null,
muted: null,
playbackSpeed: null,
audioTracks: [],
selectedAudioTrackId: null,
subtitlesTracks: [],
@ -157,6 +163,9 @@ const Player = ({ urlParams, queryParams }) => {
const onSeekRequested = React.useCallback((time) => {
dispatch({ type: 'setProp', propName: 'time', propValue: time });
}, []);
const onPlaybackSpeedChanged = React.useCallback((rate) => {
dispatch({ type: 'setProp', propName: 'playbackSpeed', propValue: rate });
}, []);
const onSubtitlesTrackSelected = React.useCallback((id) => {
dispatch({ type: 'setProp', propName: 'selectedSubtitlesTrackId', propValue: id });
dispatch({ type: 'setProp', propName: 'selectedExtraSubtitlesTrackId', propValue: null });
@ -212,6 +221,9 @@ const Player = ({ urlParams, queryParams }) => {
if (!event.nativeEvent.infoMenuClosePrevented) {
closeInfoMenu();
}
if (!event.nativeEvent.speedMenuClosePrevented) {
closeSpeedMenu();
}
if (!event.nativeEvent.videosMenuClosePrevented) {
closeVideosMenu();
}
@ -252,7 +264,10 @@ const Player = ({ urlParams, queryParams }) => {
[]
},
autoplay: true,
time: player.libraryItem !== null && player.selected.streamRequest !== null && player.libraryItem.state.video_id === player.selected.streamRequest.id ?
time: player.libraryItem !== null &&
player.selected.streamRequest !== null &&
player.selected.streamRequest.path !== null &&
player.libraryItem.state.video_id === player.selected.streamRequest.path.id ?
player.libraryItem.state.timeOffset
:
0,
@ -336,6 +351,37 @@ const Player = ({ urlParams, queryParams }) => {
}
}
}, [videoState.time, videoState.duration]);
React.useEffect(() => {
if (!defaultSubtitlesSelected.current) {
const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
const subtitlesTrack = findTrackByLang(videoState.subtitlesTracks, settings.subtitlesLanguage);
const extraSubtitlesTrack = findTrackByLang(videoState.extraSubtitlesTracks, settings.subtitlesLanguage);
if (subtitlesTrack && subtitlesTrack.id) {
onSubtitlesTrackSelected(subtitlesTrack.id);
defaultSubtitlesSelected.current = true;
} else if (extraSubtitlesTrack && extraSubtitlesTrack.id) {
onExtraSubtitlesTrackSelected(extraSubtitlesTrack.id);
defaultSubtitlesSelected.current = true;
}
}
}, [videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
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(videoState.audioTracks, settings.audioLanguage);
if (audioTrack && audioTrack.id) {
onAudioTrackSelected(audioTrack.id);
defaultAudioTrackSelected.current = true;
}
}
}, [videoState.audioTracks]);
React.useEffect(() => {
defaultSubtitlesSelected.current = false;
defaultAudioTrackSelected.current = false;
}, [videoState.stream]);
React.useEffect(() => {
if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
(!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&
@ -349,6 +395,11 @@ const Player = ({ urlParams, queryParams }) => {
closeVideosMenu();
}
}, [player.metaItem]);
React.useEffect(() => {
if (videoState.playbackSpeed === null) {
closeSpeedMenu();
}
}, [videoState.playbackSpeed]);
React.useEffect(() => {
const intervalId = setInterval(() => {
pushToLibrary();
@ -389,7 +440,7 @@ const Player = ({ urlParams, queryParams }) => {
const onKeyDown = (event) => {
switch (event.code) {
case 'Space': {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.paused !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen&& videoState.paused !== null) {
if (videoState.paused) {
onPlayRequested();
} else {
@ -400,7 +451,7 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'ArrowRight': {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.time !== null) {
const seekTimeMultiplier = event.shiftKey ? 3 : 1;
onSeekRequested(videoState.time + (settings.seekTimeDuration * seekTimeMultiplier));
}
@ -408,7 +459,7 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'ArrowLeft': {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.time !== null) {
const seekTimeMultiplier = event.shiftKey ? 3 : 1;
onSeekRequested(videoState.time - (settings.seekTimeDuration * seekTimeMultiplier));
}
@ -416,14 +467,14 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'ArrowUp': {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume + 5);
}
break;
}
case 'ArrowDown': {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume - 5);
}
@ -431,6 +482,7 @@ const Player = ({ urlParams, queryParams }) => {
}
case 'KeyS': {
closeInfoMenu();
closeSpeedMenu();
closeVideosMenu();
if ((Array.isArray(videoState.subtitlesTracks) && videoState.subtitlesTracks.length > 0) ||
(Array.isArray(videoState.extraSubtitlesTracks) && videoState.extraSubtitlesTracks.length > 0) ||
@ -442,6 +494,7 @@ const Player = ({ urlParams, queryParams }) => {
}
case 'KeyI': {
closeSubtitlesMenu();
closeSpeedMenu();
closeVideosMenu();
if (player.metaItem !== null && player.metaItem.type === 'Ready') {
toggleInfoMenu();
@ -449,9 +502,20 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'KeyR': {
closeInfoMenu();
closeSubtitlesMenu();
closeVideosMenu();
if (videoState.playbackSpeed !== null) {
toggleSpeedMenu();
}
break;
}
case 'KeyV': {
closeInfoMenu();
closeSubtitlesMenu();
closeSpeedMenu();
if (player.metaItem !== null && player.metaItem.type === 'Ready') {
toggleVideosMenu();
}
@ -461,6 +525,7 @@ const Player = ({ urlParams, queryParams }) => {
case 'Escape': {
closeSubtitlesMenu();
closeInfoMenu();
closeSpeedMenu();
closeVideosMenu();
onDismissNextVideoPopup();
break;
@ -473,7 +538,7 @@ const Player = ({ urlParams, queryParams }) => {
return () => {
window.removeEventListener('keydown', onKeyDown);
};
}, [player.metaItem, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu]);
}, [player.metaItem, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videosMenuOpen, speedMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, videoState.playbackSpeed, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu]);
React.useLayoutEffect(() => {
return () => {
setImmersedDebounced.cancel();
@ -482,7 +547,7 @@ const Player = ({ urlParams, queryParams }) => {
};
}, []);
return (
<div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && !casting && videoState.paused !== null && !videoState.paused && !subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !nextVideoPopupOpen })}
<div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && !casting && videoState.paused !== null && !videoState.paused && !subtitlesMenuOpen && !infoMenuOpen && !speedMenuOpen && !videosMenuOpen && !nextVideoPopupOpen })}
onMouseDown={onContainerMouseDown}
onMouseMove={onContainerMouseMove}
onMouseOver={onContainerMouseMove}
@ -527,7 +592,7 @@ const Player = ({ urlParams, queryParams }) => {
null
}
{
subtitlesMenuOpen || infoMenuOpen ?
subtitlesMenuOpen || infoMenuOpen || videosMenuOpen || speedMenuOpen ?
<div className={styles['layer']} />
:
null
@ -547,6 +612,7 @@ const Player = ({ urlParams, queryParams }) => {
duration={videoState.duration}
volume={videoState.volume}
muted={videoState.muted}
playbackSpeed={videoState.playbackSpeed}
subtitlesTracks={videoState.subtitlesTracks.concat(videoState.extraSubtitlesTracks)}
audioTracks={videoState.audioTracks}
metaItem={player.metaItem}
@ -559,6 +625,7 @@ const Player = ({ urlParams, queryParams }) => {
onSeekRequested={onSeekRequested}
onToggleSubtitlesMenu={toggleSubtitlesMenu}
onToggleInfoMenu={toggleInfoMenu}
onToggleSpeedMenu={toggleSpeedMenu}
onToggleVideosMenu={toggleVideosMenu}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
@ -613,6 +680,16 @@ const Player = ({ urlParams, queryParams }) => {
:
null
}
{
speedMenuOpen ?
<SpeedMenu
className={classnames(styles['layer'], styles['menu-layer'])}
playbackSpeed={videoState.playbackSpeed}
onPlaybackSpeedChanged={onPlaybackSpeedChanged}
/>
:
null
}
{
videosMenuOpen ?
<VideosMenu

33
src/routes/Player/SpeedMenu/Option/Option.js Normal file
View file

@ -0,0 +1,33 @@
// Copyright (C) 2017-2022 Smart code 203358507
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { Button } = require('stremio/common');
const styles = require('./styles');
const OptionButton = ({ className, value, selected, onSelect }) => {
const onClick = React.useCallback(() => {
if (typeof onSelect === 'function') {
onSelect(value);
}
}, [onSelect, value]);
return (
<Button
className={classnames(className, styles['option'], { 'selected': selected })}
onClick={onClick}
>
<div className={styles['label']}>{ value }x</div>
<div className={styles['icon']} />
</Button>
);
};
OptionButton.propTypes = {
className: PropTypes.string,
value: PropTypes.number,
selected: PropTypes.bool,
onSelect: PropTypes.func,
};
module.exports = OptionButton;

5
src/routes/Player/SpeedMenu/Option/index.js Normal file
View file

@ -0,0 +1,5 @@
// Copyright (C) 2017-2022 Smart code 203358507
const Option = require('./Option');
module.exports = Option;

38
src/routes/Player/SpeedMenu/Option/styles.less Normal file
View file

@ -0,0 +1,38 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.option {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 1.5em;
&:global(.selected) {
background-color: @color-background;
.icon {
display: block;
}
}
&:hover, &:focus {
background-color: @color-background-light2;
}
.label {
flex: 1;
font-weight: 400;
color: @color-surface-light5-90;
}
.icon {
flex: none;
display: none;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
margin-left: 1rem;
background-color: @color-accent3-90;
}
}

48
src/routes/Player/SpeedMenu/SpeedMenu.js Normal file
View file

@ -0,0 +1,48 @@
// Copyright (C) 2017-2022 Smart code 203358507
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Option = require('./Option');
const styles = require('./styles');
const RATES = Array.from(Array(8).keys(), (n) => n * 0.25 + 0.25).reverse();
const SpeedMenu = ({ className, playbackSpeed, onPlaybackSpeedChanged }) => {
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.speedMenuClosePrevented = true;
}, []);
const onOptionSelect = React.useCallback((value) => {
if (typeof onPlaybackSpeedChanged === 'function') {
onPlaybackSpeedChanged(value);
}
}, [onPlaybackSpeedChanged]);
return (
<div className={classnames(className, styles['speed-menu-container'])} onMouseDown={onMouseDown}>
<div className={styles['title']}>
Playback Speed
</div>
<div className={styles['options-container']}>
{
RATES.map((rate) => (
<Option
className={styles['option']}
key={rate}
value={rate}
selected={rate === playbackSpeed}
onSelect={onOptionSelect}
/>
))
}
</div>
</div>
);
};
SpeedMenu.propTypes = {
className: PropTypes.string,
playbackSpeed: PropTypes.number,
onPlaybackSpeedChanged: PropTypes.func,
};
module.exports = SpeedMenu;

5
src/routes/Player/SpeedMenu/index.js Normal file
View file

@ -0,0 +1,5 @@
// Copyright (C) 2017-2022 Smart code 203358507
const SpeedMenu = require('./SpeedMenu');
module.exports = SpeedMenu;

27
src/routes/Player/SpeedMenu/styles.less Normal file
View file

@ -0,0 +1,27 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.speed-menu-container {
width: 12rem;
overflow: visible !important;
.title {
flex: none;
align-self: stretch;
max-height: 2.4em;
font-weight: 600;
color: @color-surface-light5-90;
margin: 1rem;
}
.options-container {
flex: 0 1 auto;
max-height: calc(3.2rem * 8);
overflow-y: auto;
.option {
height: 3.2rem;
}
}
}

4
src/routes/Search/Search.js
View file

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const Icon = require('@stremio/stremio-icons/dom');
const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const { Image, MainNavBars, MetaRow, MetaItem, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const useSearch = require('./useSearch');
const styles = require('./styles');
@ -13,7 +13,7 @@ const THRESHOLD = 100;
const Search = ({ queryParams }) => {
const [search, loadSearchRows] = useSearch(queryParams);
const query = useDeepEqualMemo(() => {
const query = React.useMemo(() => {
return search.selected !== null ?
search.selected.extra.reduceRight((query, [name, value]) => {
if (name === 'search') {

10
src/routes/Settings/Settings.js
View file

@ -28,6 +28,7 @@ const Settings = () => {
subtitlesTextColorInput,
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
audioLanguageSelect,
seekTimeDurationSelect,
bingeWatchingCheckbox,
playInBackgroundCheckbox,
@ -310,6 +311,15 @@ const Settings = () => {
{...subtitlesOutlineColorInput}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Audio Language</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...audioLanguageSelect}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Rewind & Fast-forward duration</div>

1
src/routes/Settings/styles.less
View file

@ -336,6 +336,7 @@
.label {
margin: 0 1rem;
white-space: nowrap;
color: @color-secondaryvariant1-90;
}
}

49
src/routes/Settings/useProfileSettingsInputs.js
View file

@ -1,12 +1,13 @@
// Copyright (C) 2017-2022 Smart code 203358507
const React = require('react');
const { useServices } = require('stremio/services');
const { CONSTANTS, languageNames, useDeepEqualMemo } = require('stremio/common');
const { CONSTANTS, languageNames } = require('stremio/common');
const useProfileSettingsInputs = (profile) => {
const { core } = useServices();
// TODO combine those useDeepEqualMemo in one
const interfaceLanguageSelect = useDeepEqualMemo(() => ({
// TODO combine those useMemo in one
const interfaceLanguageSelect = React.useMemo(() => ({
options: Object.keys(languageNames).map((code) => ({
value: code,
label: languageNames[code]
@ -25,7 +26,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const subtitlesLanguageSelect = useDeepEqualMemo(() => ({
const subtitlesLanguageSelect = React.useMemo(() => ({
options: Object.keys(languageNames).map((code) => ({
value: code,
label: languageNames[code]
@ -44,7 +45,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const subtitlesSizeSelect = useDeepEqualMemo(() => ({
const subtitlesSizeSelect = React.useMemo(() => ({
options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({
value: `${size}`,
label: `${size}%`
@ -66,7 +67,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const subtitlesTextColorInput = useDeepEqualMemo(() => ({
const subtitlesTextColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesTextColor,
onChange: (event) => {
core.transport.dispatch({
@ -81,7 +82,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const subtitlesBackgroundColorInput = useDeepEqualMemo(() => ({
const subtitlesBackgroundColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesBackgroundColor,
onChange: (event) => {
core.transport.dispatch({
@ -96,7 +97,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const subtitlesOutlineColorInput = useDeepEqualMemo(() => ({
const subtitlesOutlineColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesOutlineColor,
onChange: (event) => {
core.transport.dispatch({
@ -111,7 +112,26 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const seekTimeDurationSelect = useDeepEqualMemo(() => ({
const audioLanguageSelect = React.useMemo(() => ({
options: Object.keys(languageNames).map((code) => ({
value: code,
label: languageNames[code]
})),
selected: [profile.settings.audioLanguage],
onSelect: (event) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
audioLanguage: event.value
}
}
});
}
}), [profile.settings]);
const seekTimeDurationSelect = React.useMemo(() => ({
options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
value: `${size}`,
label: `${size / 1000} seconds`
@ -133,7 +153,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const bingeWatchingCheckbox = useDeepEqualMemo(() => ({
const bingeWatchingCheckbox = React.useMemo(() => ({
checked: profile.settings.bingeWatching,
onClick: () => {
core.transport.dispatch({
@ -148,7 +168,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const playInBackgroundCheckbox = useDeepEqualMemo(() => ({
const playInBackgroundCheckbox = React.useMemo(() => ({
checked: profile.settings.playInBackground,
onClick: () => {
core.transport.dispatch({
@ -163,7 +183,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const playInExternalPlayerCheckbox = useDeepEqualMemo(() => ({
const playInExternalPlayerCheckbox = React.useMemo(() => ({
checked: profile.settings.playInExternalPlayer,
onClick: () => {
core.transport.dispatch({
@ -178,7 +198,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const hardwareDecodingCheckbox = useDeepEqualMemo(() => ({
const hardwareDecodingCheckbox = React.useMemo(() => ({
checked: profile.settings.hardwareDecoding,
onClick: () => {
core.transport.dispatch({
@ -193,7 +213,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const streamingServerUrlInput = useDeepEqualMemo(() => ({
const streamingServerUrlInput = React.useMemo(() => ({
value: profile.settings.streamingServerUrl,
onChange: (value) => {
core.transport.dispatch({
@ -215,6 +235,7 @@ const useProfileSettingsInputs = (profile) => {
subtitlesTextColorInput,
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
audioLanguageSelect,
seekTimeDurationSelect,
bingeWatchingCheckbox,
playInBackgroundCheckbox,

8
src/routes/Settings/useStreamingServerSettingsInputs.js
View file

@ -1,8 +1,8 @@
// Copyright (C) 2017-2022 Smart code 203358507
const React = require('react');
const isEqual = require('lodash.isequal');
const { useServices } = require('stremio/services');
const { useDeepEqualMemo } = require('stremio/common');
const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null];
@ -53,8 +53,8 @@ const TORRENT_PROFILES = {
const useStreamingServerSettingsInputs = (streamingServer) => {
const { core } = useServices();
// TODO combine those useDeepEqualMemo in one
const cacheSizeSelect = useDeepEqualMemo(() => {
// TODO combine those useMemo in one
const cacheSizeSelect = React.useMemo(() => {
if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
return null;
}
@ -82,7 +82,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
}
};
}, [streamingServer.settings]);
const torrentProfileSelect = useDeepEqualMemo(() => {
const torrentProfileSelect = React.useMemo(() => {
if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
return null;
}

2
src/services/Chromecast/Chromecast.js
View file

@ -20,7 +20,7 @@ function Chromecast() {
function onTransportInitError(args) {
console.error(args);
active = false;
error = new Error('Google Cast API not available');
error = new Error('Google Cast API not available', { cause: args });
starting = false;
onStateChanged();
transport = null;

32
src/services/Chromecast/ChromecastTransport.js
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
const EventEmitter = require('eventemitter3');
const hat = require('hat');
const MESSAGE_NAMESPACE = 'urn:x-cast:com.stremio';
const CHUNK_SIZE = 20000;
@ -33,7 +34,7 @@ const initialize = () => {
function ChromecastTransport() {
const events = new EventEmitter();
const chunks = [];
const messages = {};
initialize()
.then(() => {
@ -59,26 +60,17 @@ function ChromecastTransport() {
function onMessage(_, message) {
try {
const { chunk, last } = JSON.parse(message);
chunks.push(chunk);
if (!last) {
return;
const { id, chunk, index, length } = JSON.parse(message);
messages[id] = messages[id] || [];
messages[id][index] = chunk;
if (Object.keys(messages[id]).length === length) {
const parsedMessage = JSON.parse(messages[id].join(''));
delete messages[id];
events.emit('message', parsedMessage);
}
} catch (error) {
chunks.splice(0, chunks.length);
events.emit('message-error', error);
return;
}
let parsedMessage;
try {
parsedMessage = JSON.parse(chunks.splice(0, chunks.length).join(''));
} catch (error) {
events.emit('message-error', error);
return;
}
events.emit('message', parsedMessage);
}
function onApplicationStatusChanged(event) {
events.emit(cast.framework.CastSession.APPLICATION_STATUS_CHANGED, event);
@ -165,11 +157,13 @@ function ChromecastTransport() {
const chunk = serializedMessage.slice(start, start + CHUNK_SIZE);
chunks.push(chunk);
}
const id = hat();
return Promise.all(chunks.map((chunk, index) => {
return castSession.sendMessage(MESSAGE_NAMESPACE, {
id,
chunk,
last: index === chunks.length - 1,
index,
length: chunks.length
});
}));
} else {

2
src/services/Core/Core.js
View file

@ -20,7 +20,7 @@ function Core(args) {
function onTransportError(args) {
console.error(args);
active = false;
error = new Error('Stremio Core Transport initialization failed');
error = new Error('Stremio Core Transport initialization failed', { cause: args });
starting = false;
onStateChanged();
transport = null;

21
webpack.config.js
View file

@ -6,8 +6,10 @@ const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const colors = require('@stremio/stremio-colors');
const pachageJson = require('./package.json');
const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
@ -187,8 +189,18 @@ module.exports = (env, argv) => ({
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['*']
}),
argv.mode === 'production' &&
new WorkboxPlugin.GenerateSW({
maximumFileSizeToCacheInBytes: 20000000,
clientsClaim: true,
skipWaiting: true
}),
new CopyWebpackPlugin({
patterns: [{ from: 'favicons', to: `${COMMIT_HASH}/favicons` }]
patterns: [
{ from: 'favicons', to: `${COMMIT_HASH}/favicons` },
{ from: 'images', to: `${COMMIT_HASH}/images` },
{ from: 'manifest.json', to: `${COMMIT_HASH}/manifest.json` },
]
}),
new MiniCssExtractPlugin({
filename: `${COMMIT_HASH}/styles/[name].css`
@ -197,7 +209,10 @@ module.exports = (env, argv) => ({
template: './src/index.html',
inject: false,
scriptLoading: 'blocking',
faviconsPath: `${COMMIT_HASH}/favicons`
themeColor: colors.background,
faviconsPath: `${COMMIT_HASH}/favicons`,
imagesPath: `${COMMIT_HASH}/images`,
manifestPath: `${COMMIT_HASH}/manifest.json`,
})
]
].filter(Boolean)
});