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

Merge branch 'development' into feat/player-move-subtitles-up-when-control-bar-is-shown

Browse source
This commit is contained in:
kKaskak 2024-01-09 15:38:39 +02:00
commit d91a143884
61 changed files with 3166 additions and 15497 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.dockerignore
View file

@ -1,2 +0,0 @@
screenshots/*
screenshots*

2
.github/workflows/build.yml vendored
View file

@ -3,7 +3,7 @@ name: Build
on:
push:
branches:
- '*'
- '**'
jobs:
build:

2
Dockerfile
View file

@ -1,6 +1,6 @@
# Stremio Node 14.x
# the node version for running Stremio Web
ARG NODE_VERSION=15-alpine
ARG NODE_VERSION=20-alpine
FROM node:$NODE_VERSION AS base
# Meta

16268
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

8
package.json
View file

@ -1,7 +1,7 @@
{
"name": "stremio",
"displayName": "Stremio",
"version": "5.0.0-beta.0",
"version": "5.0.0-beta.4",
"author": "Smart Code OOD",
"private": true,
"license": "gpl-2.0",
@ -15,7 +15,7 @@
"@babel/runtime": "7.16.0",
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.45.0",
"@stremio/stremio-core-web": "0.46.0",
"@stremio/stremio-icons": "5.0.0-beta.3",
"@stremio/stremio-video": "0.0.26",
"a-color-picker": "1.2.1",
@ -38,8 +38,8 @@
"react-focus-lock": "2.9.1",
"react-i18next": "^12.1.1",
"react-is": "18.2.0",
"spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
"stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#8e30d9961402a7389f1a6209d9dab5592f32c9d7",
"spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
"stremio-translations": "github:Stremio/stremio-translations#12b1307f95249496960d2a257b371db5700721e6",
"url": "0.11.0",
"use-long-press": "^3.1.5"
},

6
src/App/App.js
View file

@ -146,8 +146,10 @@ const App = () => {
.catch((e) => console.error(e));
}
return () => {
window.removeEventListener('focus', onWindowFocus);
services.core.transport.off('CoreEvent', onCoreEvent);
if (services.core.active) {
window.removeEventListener('focus', onWindowFocus);
services.core.transport.off('CoreEvent', onCoreEvent);
}
};
}, [initialized]);
return (

19
src/App/ErrorDialog/ErrorDialog.js
View file

@ -1,12 +1,15 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { Button, Image } = require('stremio/common');
const styles = require('./styles');
const ErrorDialog = ({ className }) => {
const { t } = useTranslation();
const [dataCleared, setDataCleared] = React.useState(false);
const reload = React.useCallback(() => {
window.location.reload();
@ -22,13 +25,19 @@ const ErrorDialog = ({ className }) => {
src={require('/images/empty.png')}
alt={' '}
/>
<div className={styles['error-message']}>Something went wrong!</div>
<div className={styles['error-message']}>
{ t('GENERIC_ERROR_MESSAGE') }
</div>
<div className={styles['buttons-container']}>
<Button className={styles['button-container']} title={'Try again'} onClick={reload}>
<div className={styles['label']}>Try again</div>
<Button className={styles['button-container']} title={t('TRY_AGAIN')} onClick={reload}>
<div className={styles['label']}>
{ t('TRY_AGAIN') }
</div>
</Button>
<Button className={styles['button-container']} disabled={dataCleared} title={'Clear data'} onClick={clearData}>
<div className={styles['label']}>Clear data</div>
<Button className={styles['button-container']} disabled={dataCleared} title={t('CLEAR_DATA')} onClick={clearData}>
<div className={styles['label']}>
{ t('CLEAR_DATA') }
</div>
</Button>
</div>
</div>

25
src/App/ErrorDialog/styles.less
View file

@ -7,12 +7,12 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
.error-image {
flex: none;
width: 12rem;
height: 12rem;
margin-bottom: 1rem;
object-fit: contain;
object-position: center;
opacity: 0.9;
@ -24,7 +24,7 @@
font-size: 2rem;
max-height: 3.6em;
text-align: center;
color: @color-surface-light5-90;
color: var(--primary-foreground-color);
}
.buttons-container {
@ -36,6 +36,8 @@
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 1rem;
.button-container {
flex-grow: 0;
@ -45,18 +47,23 @@
flex-direction: row;
align-items: center;
justify-content: center;
margin: 2rem 1rem 0;
padding: 0 1rem;
padding: 0 2.5rem;
min-width: 8rem;
height: 3rem;
background-color: @color-accent3;
height: 3.5rem;
border-radius: 3.5rem;
background-color: var(--overlay-color);
&:hover {
background-color: @color-accent3-light1;
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
background-color: transparent;
}
&:active {
outline: none;
}
&:global(.disabled) {
background-color: @color-surface-dark5;
opacity: 0.3;
}
.label {
@ -67,7 +74,7 @@
font-size: 1.1rem;
font-weight: 500;
text-align: center;
color: @color-surface-light5-90;
color: var(--primary-foreground-color);
}
}
}

1
src/App/styles.less
View file

@ -144,7 +144,6 @@ html {
.loader-container, .error-container {
width: 100%;
height: 100%;
background-color: @color-background-dark2;
}
}
}

46
src/common/CONSTANTS.js
View file

@ -40,6 +40,49 @@ const ICON_FOR_TYPE = new Map([
['other', 'movies'],
]);
const EXTERNAL_PLAYERS = [
{
label: 'EXTERNAL_PLAYER_DISABLED',
value: null,
platforms: ['ios', 'android', 'windows', 'linux', 'macos'],
},
{
label: 'EXTERNAL_PLAYER_ALLOW_CHOOSING',
value: 'choose',
platforms: ['android'],
},
{
label: 'VLC',
value: 'vlc',
platforms: ['ios', 'android'],
},
{
label: 'MPV',
value: 'mpv',
platforms: ['macos'],
},
{
label: 'IINA',
value: 'iina',
platforms: ['macos'],
},
{
label: 'MX Player',
value: 'mxplayer',
platforms: ['android'],
},
{
label: 'Just Player',
value: 'justplayer',
platforms: ['android'],
},
{
label: 'Outplayer',
value: 'outplayer',
platforms: ['ios'],
},
];
module.exports = {
CHROMECAST_RECEIVER_APP_ID,
SUBTITLES_SIZES,
@ -55,5 +98,6 @@ module.exports = {
SHARE_LINK_CATEGORY,
WRITERS_LINK_CATEGORY,
TYPE_PRIORITIES,
ICON_FOR_TYPE
ICON_FOR_TYPE,
EXTERNAL_PLAYERS,
};

90
src/common/EventModal/EventModal.js Normal file
View file

@ -0,0 +1,90 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const Button = require('stremio/common/Button');
const ModalDialog = require('stremio/common/ModalDialog');
const useEvents = require('./useEvents');
const styles = require('./styles');
const { default: Icon } = require('@stremio/stremio-icons/react');
const EventModal = () => {
const { t } = useTranslation();
const { events, pullEvents, dismissEvent } = useEvents();
const modal = React.useMemo(() => {
return events?.modal?.type === 'Ready' ?
events.modal.content
:
null;
}, [events]);
const onClose = React.useCallback(() => {
modal?.id && dismissEvent(modal.id);
}, [modal]);
React.useEffect(() => {
pullEvents();
}, []);
return (
modal !== null ?
<ModalDialog className={styles['event-modal']} onCloseRequest={onClose}>
{
modal.imageUrl ?
<img className={styles['image']} src={modal.imageUrl} />
:
null
}
<div className={styles['info-container']}>
<div className={styles['title-container']}>
{
modal.title ?
<div className={styles['title']}>{modal.title}</div>
:
null
}
{
modal.message ?
<div className={styles['label']}>{modal.message}</div>
:
null
}
</div>
{
modal?.addon?.name ?
<div className={styles['addon-container']}>
<Icon className={styles['icon']} name={'addons'} />
<div className={styles['name']}>
{ modal.addon.name }
</div>
</div>
:
null
}
{
modal?.addon?.manifestUrl ?
<Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(modal.addon.manifestUrl)}`} onClick={onClose}>
<div className={styles['button-label']}>
{ t('INSTALL_ADDON') }
</div>
</Button>
:
modal.externalUrl ?
<Button className={styles['action-button']} href={modal.externalUrl} target={'_blank'}>
<div className={styles['button-label']}>
{ t('LEARN_MORE') }
</div>
</Button>
:
null
}
</div>
</ModalDialog>
:
null
);
};
module.exports = EventModal;

5
src/common/EventModal/index.js Normal file
View file

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

119
src/common/EventModal/styles.less Normal file
View file

@ -0,0 +1,119 @@
// Copyright (C) 2017-2023 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/ModalDialog/styles.less') {
modal-dialog-content: modal-dialog-content;
modal-dialog-container: modal-dialog-container;
}
.event-modal {
backdrop-filter: blur(10px);
.modal-dialog-container {
overflow: visible;
max-width: 45rem;
.modal-dialog-content {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
.image {
width: 100%;
height: 100%;
margin-top: -10rem;
}
.info-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
padding: 1rem 4rem;
margin-top: -7rem;
.title-container {
display: flex;
flex-direction: column;
gap: 1rem;
.title {
color: var(--primary-foreground-color);
font-size: 1.325rem;
text-align: center;
padding: 0 6rem;
}
.label {
color: var(--primary-foreground-color);
font-size: 1rem;
text-align: center;
opacity: 0.5;
}
}
.addon-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.5rem;
.icon {
height: 2rem;
width: 2rem;
color: var(--primary-accent-color);
}
.name {
color: var(--primary-foreground-color);
}
}
.action-button {
background-color: var(--primary-foreground-color);
border: 2px solid var(--primary-foreground-color);
padding: 0.8rem 2rem;
border-radius: 2rem;
.button-label {
color: var(--primary-accent-color);
font-size: 1rem;
font-weight: 700;
}
&:hover {
background-color: transparent;
}
}
}
}
}
@media only screen and (max-width: @minimum) {
.modal-dialog-container {
.modal-dialog-content {
.image {
height: 125%;
width: 125%;
}
.info-container {
.title-container {
.title {
padding: 0rem;
font-size: 1rem;
}
.label {
font-size: 0.875rem;
}
}
}
}
}
}
}

36
src/common/EventModal/useEvents.js Normal file
View file

@ -0,0 +1,36 @@
// Copyright (C) 2017-2023 Smart code 203358507
const useModelState = require('stremio/common/useModelState');
const { useServices } = require('stremio/services');
const map = (ctx) => ({
...ctx.events,
});
const useEvents = () => {
const { core } = useServices();
const pullEvents = () => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'GetEvents',
},
});
};
const dismissEvent = (id) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'DismissEvent',
args: id,
},
});
};
const events = useModelState({ model: 'ctx', map });
return { events, pullEvents, dismissEvent };
};
module.exports = useEvents;

11
src/common/MetaItem/MetaItem.js
View file

@ -13,7 +13,7 @@ const useBinaryState = require('stremio/common/useBinaryState');
const { ICON_FOR_TYPE } = require('stremio/common/CONSTANTS');
const styles = require('./styles');
const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, ...props }) => {
const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, watched, ...props }) => {
const { t } = useTranslation();
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const href = React.useMemo(() => {
@ -75,6 +75,14 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
:
null
}
{
watched ?
<div className={styles['watched-icon-layer']}>
<Icon className={styles['watched-icon']} name={'checkmark'} />
</div>
:
null
}
<div className={styles['poster-image-layer']}>
<Image
className={styles['poster-image']}
@ -169,6 +177,7 @@ MetaItem.propTypes = {
onDismissClick: PropTypes.func,
onPlayClick: PropTypes.func,
onClick: PropTypes.func,
watched: PropTypes.bool
};
module.exports = MetaItem;

20
src/common/MetaItem/styles.less
View file

@ -125,6 +125,26 @@
}
}
.watched-icon-layer {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
background-color: var(--primary-accent-color);
border-radius: 50%;
margin: 0.5rem;
.watched-icon {
width: 0.75rem;
height: 0.75rem;
color: var(--primary-foreground-color);
}
}
.poster-image-layer {
position: absolute;
top: 0;

91
src/common/MetaRow/MetaRow.js
View file

@ -4,39 +4,47 @@ const React = require('react');
const ReactIs = require('react-is');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const useTranslate = require('stremio/common/useTranslate');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
const styles = require('./styles');
const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => {
const { t } = useTranslation();
const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
const t = useTranslate();
const catalogTitle = React.useMemo(() => {
return title ?? t.catalogTitle(catalog);
}, [title, catalog, t.catalogTitle]);
const items = React.useMemo(() => {
return catalog?.items ?? catalog?.content?.content;
}, [catalog]);
const href = React.useMemo(() => {
return catalog?.deepLinks?.discover ?? catalog?.deepLinks?.library;
}, [catalog]);
return (
<div className={classnames(className, styles['meta-row-container'])}>
{
(typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
<div className={styles['header-container']}>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
{
deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
}
</div>
:
null
}
<div className={styles['header-container']}>
{
typeof catalogTitle === 'string' && catalogTitle.length > 0 ?
<div className={styles['title-container']} title={catalogTitle}>{catalogTitle}</div>
:
null
}
{
href ?
<Button className={styles['see-all-container']} title={t.string('BUTTON_SEE_ALL')} href={href} tabIndex={-1}>
<div className={styles['label']}>{ t.string('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
}
</div>
{
typeof message === 'string' && message.length > 0 ?
<div className={styles['message-container']} title={message}>{message}</div>
@ -69,14 +77,33 @@ MetaRow.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
message: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
posterShape: PropTypes.string
})),
catalog: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
type: PropTypes.string,
addon: PropTypes.shape({
manifest: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
}),
}),
content: PropTypes.shape({
content: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.shape({
posterShape: PropTypes.string,
})),
]),
}),
items: PropTypes.arrayOf(PropTypes.shape({
posterShape: PropTypes.string,
})),
deepLinks: PropTypes.shape({
discover: PropTypes.string,
library: PropTypes.string,
}),
}),
itemComponent: PropTypes.elementType,
deepLinks: PropTypes.shape({
discover: PropTypes.string,
library: PropTypes.string
})
};
module.exports = MetaRow;

16
src/common/ModalDialog/styles.less
View file

@ -84,6 +84,7 @@
}
}
}
.action-button {
flex: 1;
display: flex;
@ -126,7 +127,6 @@
text-align: center;
color: var(--primary-foreground-color);
}
}
@media only screen and (max-width: @minimum) {
@ -137,6 +137,20 @@
max-width: initial;
z-index: 0;
padding: 0 1.5rem;
.buttons-container {
flex-direction: column;
gap: 1rem;
}
}
.action-button {
width: 100%;
.label {
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}

6
src/common/Multiselect/Multiselect.js
View file

@ -15,7 +15,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
const options = React.useMemo(() => {
return Array.isArray(props.options) ?
props.options.filter((option) => {
return option && typeof option.value === 'string';
return option && (typeof option.value === 'string' || option.value === null);
})
:
[];
@ -23,7 +23,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
const selected = React.useMemo(() => {
return Array.isArray(props.selected) ?
props.selected.filter((value) => {
return typeof value === 'string';
return typeof value === 'string' || value === null;
})
:
[];
@ -161,7 +161,7 @@ Multiselect.propTypes = {
direction: PropTypes.any,
title: PropTypes.string,
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string.isRequired,
value: PropTypes.string,
title: PropTypes.string,
label: PropTypes.string
})),

2
src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -48,7 +48,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
null
}
{
searchBar ?
searchBar && route !== 'addons' ?
<SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
:
null

2
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
View file

@ -7,6 +7,7 @@ const { useRouteFocused } = require('stremio-router');
const Popup = require('stremio/common/Popup');
const useBinaryState = require('stremio/common/useBinaryState');
const NavMenuContent = require('./NavMenuContent');
const styles = require('./styles.less');
const NavMenu = (props) => {
const routeFocused = useRouteFocused();
@ -42,6 +43,7 @@ const NavMenu = (props) => {
onCloseRequest={closeMenu}
renderLabel={renderLabel}
renderMenu={renderMenu}
className={styles['nav-menu-popup-label']}
/>
);
};

9
src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
View file

@ -3,6 +3,15 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Popup/styles.less') {
popup-menu-container: menu-container;
}
.nav-menu-popup-label {
.popup-menu-container {
margin-top: 1rem;
}
}
.nav-menu-container {
width: 22rem;
max-height: calc(100vh - var(--horizontal-nav-bar-size));

142
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -3,6 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
@ -10,37 +11,92 @@ const Button = require('stremio/common/Button');
const TextInput = require('stremio/common/TextInput');
const useTorrent = require('stremio/common/useTorrent');
const { withCoreSuspender } = require('stremio/common/CoreSuspender');
const useSearchHistory = require('./useSearchHistory');
const useLocalSearch = require('./useLocalSearch');
const styles = require('./styles');
const useBinaryState = require('stremio/common/useBinaryState');
const SearchBar = ({ className, query, active }) => {
const SearchBar = React.memo(({ className, query, active }) => {
const { t } = useTranslation();
const routeFocused = useRouteFocused();
const searchHistory = useSearchHistory();
const localSearch = useLocalSearch();
const { createTorrentFromMagnet } = useTorrent();
const [historyOpen, openHistory, closeHistory, ] = useBinaryState(false);
const [currentQuery, setCurrentQuery] = React.useState(query || '');
const searchInputRef = React.useRef(null);
const containerRef = React.useRef(null);
const searchBarOnClick = React.useCallback(() => {
if (!active) {
window.location = '#/search';
}
}, [active]);
const searchHistoryOnClose = React.useCallback((event) => {
if (historyOpen && containerRef.current && !containerRef.current.contains(event.target)) {
closeHistory();
}
}, [historyOpen]);
React.useEffect(() => {
document.addEventListener('mousedown', searchHistoryOnClose);
return () => {
document.removeEventListener('mousedown', searchHistoryOnClose);
};
}, [searchHistoryOnClose]);
const queryInputOnChange = React.useCallback(() => {
const value = searchInputRef.current.value;
setCurrentQuery(value);
openHistory();
try {
createTorrentFromMagnet(searchInputRef.current.value);
// eslint-disable-next-line no-empty
} catch { }
}, []);
const queryInputOnSubmit = React.useCallback(() => {
if (searchInputRef.current !== null) {
const queryParams = new URLSearchParams([['search', searchInputRef.current.value]]);
window.location = `#/search?${queryParams.toString()}`;
createTorrentFromMagnet(value);
} catch (error) {
console.error('Failed to create torrent from magnet:', error);
}
}, [createTorrentFromMagnet]);
const queryInputOnSubmit = React.useCallback((event) => {
event.preventDefault();
const searchValue = `/search?search=${event.target.value}`;
setCurrentQuery(searchValue);
if (searchInputRef.current && searchValue) {
window.location.hash = searchValue;
closeHistory();
}
}, []);
const queryInputClear = React.useCallback(() => {
searchInputRef.current.value = '';
setCurrentQuery('');
window.location.hash = '/search';
}, []);
const updateLocalSearchDebounced = React.useCallback(debounce((query) => {
localSearch.search(query);
}, 250), []);
React.useEffect(() => {
updateLocalSearchDebounced(currentQuery);
}, [currentQuery]);
React.useEffect(() => {
if (routeFocused && active) {
searchInputRef.current.focus();
}
}, [routeFocused, active, query]);
}, [routeFocused, active]);
React.useEffect(() => {
return () => {
updateLocalSearchDebounced.cancel();
};
}, []);
return (
<label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
<div className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick} ref={containerRef}>
{
active ?
<TextInput
@ -53,18 +109,72 @@ const SearchBar = ({ className, query, active }) => {
tabIndex={-1}
onChange={queryInputOnChange}
onSubmit={queryInputOnSubmit}
onClick={openHistory}
/>
:
<div className={styles['search-input']}>
<div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
</div>
}
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
<Icon className={styles['icon']} name={'search'} />
</Button>
</label>
{
currentQuery.length > 0 ?
<Button className={styles['submit-button-container']} onClick={queryInputClear}>
<Icon className={styles['icon']} name={'close'} />
</Button>
:
<Button className={styles['submit-button-container']}>
<Icon className={styles['icon']} name={'search'} />
</Button>
}
{
historyOpen && (searchHistory?.items?.length || localSearch?.items?.length) ?
<div className={styles['menu-container']}>
{
searchHistory?.items?.length > 0 ?
<div className={styles['items']}>
<div className={styles['title']}>
<div className={styles['label']}>{ t('STREMIO_TV_SEARCH_HISTORY_TITLE') }</div>
<button className={styles['search-history-clear']} onClick={searchHistory.clear}>
{ t('CLEAR_HISTORY') }
</button>
</div>
{
searchHistory.items.slice(0, 8).map(({ query, deepLinks }, index) => (
<Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{query}
</Button>
))
}
</div>
:
null
}
{
localSearch?.items?.length ?
<div className={styles['items']}>
<div className={styles['title']}>
<div className={styles['label']}>{ t('Recommendations') }</div>
</div>
{
localSearch.items.map(({ query, deepLinks }, index) => (
<Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{query}
</Button>
))
}
</div>
:
null
}
</div>
:
null
}
</div>
);
};
});
SearchBar.displayName = 'SearchBar';
SearchBar.propTypes = {
className: PropTypes.string,

68
src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
View file

@ -9,6 +9,8 @@
height: var(--search-bar-size);
border-radius: var(--search-bar-size);
background-color: var(--overlay-color);
position: relative;
overflow: visible;
.search-input {
flex: 1;
@ -46,4 +48,70 @@
opacity: 0.6;
}
}
.menu-container {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: auto;
z-index: 10;
padding: 1rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
background-color: var(--modal-background-color);
border-radius: var(--border-radius);
.label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
.title {
display: flex;
justify-content: space-between;
width: 100%;
opacity: 0.8;
padding-bottom: 1rem;
.search-history-clear {
cursor: pointer;
color: var(--primary-foreground-color);
font-size: 0.9rem;
&:hover {
opacity: 0.6;
}
}
}
.items {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
.item {
width: 90%;
color: var(--primary-foreground-color);
text-align: left;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
width: 100%;
cursor: pointer;
z-index: 10;
&:hover {
background-color: var(--secondary-background-color);
}
}
}
}
}

2
src/common/NavBar/HorizontalNavBar/SearchBar/useLocalSearch.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
declare const useLocalSearch: () => { items: LocalSearchItem[], search: (query: string) => void };
export = useLocalSearch;

38
src/common/NavBar/HorizontalNavBar/SearchBar/useLocalSearch.js Normal file
View file

@ -0,0 +1,38 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useServices } = require('stremio/services');
const useModelState = require('stremio/common/useModelState');
const useLocalSearch = () => {
const { core } = useServices();
const action = React.useMemo(() => ({
action: 'Load',
args: {
model: 'LocalSearch',
}
}), []);
const { items } = useModelState({ model: 'local_search', action });
const search = React.useCallback((query) => {
core.transport.dispatch({
action: 'Search',
args: {
action: 'Search',
args: {
searchQuery: query,
maxResults: 5
}
},
});
}, []);
return {
items,
search,
};
};
module.exports = useLocalSearch;

2
src/common/NavBar/HorizontalNavBar/SearchBar/useSearchHistory.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
declare const useSearchHistory: () => { items: SearchHistory, clear: () => void };
export = useSearchHistory;

26
src/common/NavBar/HorizontalNavBar/SearchBar/useSearchHistory.js Normal file
View file

@ -0,0 +1,26 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const useModelState = require('stremio/common/useModelState');
const { useServices } = require('stremio/services');
const useSearchHistory = () => {
const { core } = useServices();
const { searchHistory: items } = useModelState({ model: 'ctx' });
const clear = React.useCallback(() => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'ClearSearchHistory',
},
});
}, []);
return {
items,
clear,
};
};
module.exports = useSearchHistory;

7
src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
View file

@ -40,14 +40,19 @@
.label {
flex: none;
position: relative;
max-width: 100%;
max-height: 2.4em;
padding: 0 0.2rem;
padding: 0 0.5rem;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01rem;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--primary-foreground-color);
opacity: 0;
overflow: hidden;
}
}

3
src/common/Popup/styles.less
View file

@ -17,8 +17,7 @@
visibility: hidden;
border-radius: var(--border-radius);
background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
box-shadow: var(--outer-glow);
cursor: auto;
&.menu-direction-top-left {

29
src/common/externalPlayerOptions.js
View file

@ -1,29 +0,0 @@
// Copyright (C) 2017-2023 Smart code 203358507
const platform = require('./platform');
let options = [{ label: 'EXTERNAL_PLAYER_DISABLED', value: 'internal' }];
if (platform.name === 'ios') {
options = options.concat([
{ label: 'VLC', value: 'vlc' },
{ label: 'Outplayer', value: 'outplayer' }
]);
} else if (platform.name === 'android') {
options = options.concat([
{ label: 'EXTERNAL_PLAYER_ALLOW_CHOOSING', value: 'choose' },
{ label: 'VLC', value: 'vlc' },
{ label: 'Just Player', value: 'justplayer' },
{ label: 'MX Player', value: 'mxplayer' }
]);
} else if (['windows', 'macos', 'linux'].includes(platform.name)) {
options = options.concat([
{ label: 'VLC', value: 'vlc' }
]);
} else {
options = options.concat([
{ label: 'M3U Playlist', value: 'm3u' }
]);
}
module.exports = options;

8
src/common/index.js
View file

@ -32,7 +32,6 @@ const getVisibleChildrenRange = require('./getVisibleChildrenRange');
const interfaceLanguages = require('./interfaceLanguages.json');
const languageNames = require('./languageNames.json');
const routesRegexp = require('./routesRegexp');
const translateOption = require('./translateOption');
const useAnimationFrame = require('./useAnimationFrame');
const useBinaryState = require('./useBinaryState');
const useFullscreen = require('./useFullscreen');
@ -43,8 +42,9 @@ const useOnScrollToBottom = require('./useOnScrollToBottom');
const useProfile = require('./useProfile');
const useStreamingServer = require('./useStreamingServer');
const useTorrent = require('./useTorrent');
const useTranslate = require('./useTranslate');
const platform = require('./platform');
const externalPlayerOptions = require('./externalPlayerOptions');
const EventModal = require('./EventModal');
module.exports = {
AddonDetailsModal,
@ -83,7 +83,6 @@ module.exports = {
interfaceLanguages,
languageNames,
routesRegexp,
translateOption,
useAnimationFrame,
useBinaryState,
useFullscreen,
@ -94,6 +93,7 @@ module.exports = {
useProfile,
useStreamingServer,
useTorrent,
useTranslate,
platform,
externalPlayerOptions,
EventModal,
};

15
src/common/translateOption.js
View file

@ -1,15 +0,0 @@
// Copyright (C) 2017-2023 Smart code 203358507
const { t } = require('i18next');
const translateOption = (option, translateKeyPrefix = '') => {
const translateKey = `${translateKeyPrefix}${option}`;
const translateValue = t(translateKey, {
defaultValue: t(translateKey.toUpperCase(), {
defaultValue: null
})
});
return translateValue ?? option.charAt(0).toUpperCase() + option.slice(1);
};
module.exports = translateOption;

43
src/common/useTranslate.js Normal file
View file

@ -0,0 +1,43 @@
// Copyright (C) 2017-2023 Smart code 203358507
const { useCallback } = require('react');
const { useTranslation } = require('react-i18next');
const useTranslate = () => {
const { t } = useTranslation();
const string = useCallback((key) => t(key), [t]);
const stringWithPrefix = useCallback((value, prefix, fallback = null) => {
const key = `${prefix}${value}`;
const defaultValue = fallback ?? value.charAt(0).toUpperCase() + value.slice(1);
return t(key, {
defaultValue,
});
}, [t]);
const catalogTitle = useCallback(({ addon, id, name, type } = {}, withType = true) => {
if (addon && id && name) {
const partialKey = `${addon.manifest.id}/${id}`;
const translatedName = stringWithPrefix(partialKey, 'CATALOG_', name);
if (type && withType) {
const translatedType = stringWithPrefix(type, 'TYPE_');
return `${translatedName} - ${translatedType}`;
}
return translatedName;
}
return null;
}, [stringWithPrefix]);
return {
string,
stringWithPrefix,
catalogTitle,
};
};
module.exports = useTranslate;

6
src/routes/Addons/Addon/styles.less
View file

@ -84,7 +84,6 @@
flex-basis: 100%;
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 4.8em;
color: var(--primary-foreground-color);
}
}
@ -202,6 +201,11 @@
.info-container {
margin-left: 0.5rem;
padding: 0;
.name-container {
max-height: none;
font-size: 1.3rem;
}
}
.buttons-container {

28
src/routes/Addons/useSelectableInputs.js
View file

@ -1,18 +1,17 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { t } = require('i18next');
const { translateOption } = require('stremio/common');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (installedAddons, remoteAddons) => {
const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
const catalogSelect = {
title: t('SELECT_CATALOG'),
title: t.string('SELECT_CATALOG'),
options: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
.map(({ name, deepLinks }) => ({
value: deepLinks.addons,
label: translateOption(name, 'ADDON_'),
title: translateOption(name, 'ADDON_'),
label: t.stringWithPrefix(name, 'ADDON_'),
title: t.stringWithPrefix(name, 'ADDON_'),
})),
selected: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
@ -22,7 +21,7 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
() => {
const selectableCatalog = remoteAddons.selectable.catalogs
.find(({ id }) => id === remoteAddons.selected.request.path.id);
return selectableCatalog ? translateOption(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
}
:
null,
@ -31,16 +30,16 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
}
};
const typeSelect = {
title: t('SELECT_TYPE'),
title: t.string('SELECT_TYPE'),
options: installedAddons.selected !== null ?
installedAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
label: type !== null ? translateOption(type, 'TYPE_') : t('TYPE_ALL')
label: type !== null ? t.stringWithPrefix(type, 'TYPE_') : t.string('TYPE_ALL')
}))
:
remoteAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
label: translateOption(type, 'TYPE_')
label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: installedAddons.selected !== null ?
installedAddons.selectable.types
@ -53,12 +52,12 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
renderLabelText: () => {
return installedAddons.selected !== null ?
installedAddons.selected.request.type === null ?
t('TYPE_ALL')
t.string('TYPE_ALL')
:
translateOption(installedAddons.selected.request.type, 'TYPE_')
t.stringWithPrefix(installedAddons.selected.request.type, 'TYPE_')
:
remoteAddons.selected !== null ?
translateOption(remoteAddons.selected.request.path.type, 'TYPE_')
t.stringWithPrefix(remoteAddons.selected.request.path.type, 'TYPE_')
:
typeSelect.title;
},
@ -70,8 +69,9 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
};
const useSelectableInputs = (installedAddons, remoteAddons) => {
const t = useTranslate();
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(installedAddons, remoteAddons);
return mapSelectableInputs(installedAddons, remoteAddons, t);
}, [installedAddons, remoteAddons]);
return selectableInputs;
};

16
src/routes/Board/Board.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
const styles = require('./styles');
@ -38,6 +38,7 @@ const Board = () => {
}, [board.catalogs, onVisibleRangeChange]);
return (
<div className={styles['board-container']}>
<EventModal />
<MainNavBars className={styles['board-content-container']} route={'board'}>
<div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
{
@ -45,9 +46,8 @@ const Board = () => {
<MetaRow
className={classnames(styles['board-row'], styles['continue-watching-row'], 'animation-fade-in')}
title={t('BOARD_CONTINUE_WATCHING')}
items={continueWatchingPreview.items}
catalog={continueWatchingPreview}
itemComponent={ContinueWatchingItem}
deepLinks={continueWatchingPreview.deepLinks}
/>
:
null
@ -59,10 +59,8 @@ const Board = () => {
<MetaRow
key={index}
className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
title={catalog.title}
items={catalog.content.content}
catalog={catalog}
itemComponent={MetaItem}
deepLinks={catalog.deepLinks}
/>
);
}
@ -71,9 +69,8 @@ const Board = () => {
<MetaRow
key={index}
className={classnames(styles['board-row'], 'animation-fade-in')}
title={catalog.title}
catalog={catalog}
message={catalog.content.content}
deepLinks={catalog.deepLinks}
/>
);
}
@ -82,8 +79,7 @@ const Board = () => {
<MetaRow.Placeholder
key={index}
className={classnames(styles['board-row'], styles['board-row-poster'], 'animation-fade-in')}
title={catalog.title}
deepLinks={catalog.deepLinks}
catalog={catalog}
/>
);
}

25
src/routes/Discover/useSelectableInputs.js
View file

@ -1,22 +1,21 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const { translateOption } = require('stremio/common');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (discover, t) => {
const typeSelect = {
title: t('SELECT_TYPE'),
title: t.string('SELECT_TYPE'),
options: discover.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.discover,
label: translateOption(type, 'TYPE_')
label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: discover.selectable.types
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.discover),
renderLabelText: discover.selected !== null ?
() => translateOption(discover.selected.request.path.type, 'TYPE_')
() => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
:
null,
onSelect: (event) => {
@ -24,11 +23,11 @@ const mapSelectableInputs = (discover, t) => {
}
};
const catalogSelect = {
title: t('SELECT_CATALOG'),
title: t.string('SELECT_CATALOG'),
options: discover.selectable.catalogs
.map(({ name, addon, deepLinks }) => ({
.map(({ id, name, addon, deepLinks }) => ({
value: deepLinks.discover,
label: name,
label: t.catalogTitle({ addon, id, name }),
title: `${name} (${addon.manifest.name})`
})),
selected: discover.selectable.catalogs
@ -38,7 +37,7 @@ const mapSelectableInputs = (discover, t) => {
() => {
const selectableCatalog = discover.selectable.catalogs
.find(({ id }) => id === discover.selected.request.path.id);
return selectableCatalog ? selectableCatalog.name : discover.selected.request.path.id;
return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
}
:
null,
@ -47,10 +46,10 @@ const mapSelectableInputs = (discover, t) => {
}
};
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
title: translateOption(name, 'SELECT_'),
title: t.stringWithPrefix(name, 'SELECT_'),
isRequired: isRequired,
options: options.map(({ value, deepLinks }) => ({
label: typeof value === 'string' ? translateOption(value) : t('NONE'),
label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
value: JSON.stringify({
href: deepLinks.discover,
value
@ -63,7 +62,7 @@ const mapSelectableInputs = (discover, t) => {
value
})),
renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
() => translateOption(name, 'SELECT_')
() => t.stringWithPrefix(name, 'SELECT_')
:
null,
onSelect: (event) => {
@ -75,7 +74,7 @@ const mapSelectableInputs = (discover, t) => {
};
const useSelectableInputs = (discover) => {
const { t } = useTranslation();
const t = useTranslate();
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(discover, t);
}, [discover.selected, discover.selectable]);

13
src/routes/Library/useSelectableInputs.js
View file

@ -1,16 +1,15 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const { translateOption } = require('stremio/common');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (library, t) => {
const typeSelect = {
title: t('SELECT_TYPE'),
title: t.string('SELECT_TYPE'),
options: library.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.library,
label: type === null ? t('TYPE_ALL') : translateOption(type, 'TYPE_')
label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
})),
selected: library.selectable.types
.filter(({ selected }) => selected)
@ -20,11 +19,11 @@ const mapSelectableInputs = (library, t) => {
}
};
const sortSelect = {
title: t('SELECT_SORT'),
title: t.string('SELECT_SORT'),
options: library.selectable.sorts
.map(({ sort, deepLinks }) => ({
value: deepLinks.library,
label: translateOption(sort, 'SORT_')
label: t.stringWithPrefix(sort, 'SORT_')
})),
selected: library.selectable.sorts
.filter(({ selected }) => selected)
@ -51,7 +50,7 @@ const mapSelectableInputs = (library, t) => {
};
const useSelectableInputs = (library) => {
const { t } = useTranslation();
const t = useTranslate();
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(library, t);
}, [library]);

126
src/routes/MetaDetails/StreamsList/Stream/Stream.js
View file

@ -4,31 +4,49 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image, useProfile, platform, useStreamingServer, useToast } = require('stremio/common');
const { Button, Image, useProfile, platform, useToast } = require('stremio/common');
const { useServices } = require('stremio/services');
const StreamPlaceholder = require('./StreamPlaceholder');
const styles = require('./styles');
const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
const profile = useProfile();
const streamingServer = useStreamingServer();
const { core } = useServices();
const toast = useToast();
const { core } = useServices();
const href = React.useMemo(() => {
const haveStreamingServer = streamingServer.settings !== null && streamingServer.settings.type === 'Ready';
return deepLinks ?
profile.settings.playerType && profile.settings.playerType !== 'internal' ?
platform.isMobile() || !haveStreamingServer ?
(deepLinks.externalPlayer.openPlayer || {})[platform.name] || deepLinks.externalPlayer.href
: null
:
typeof deepLinks.player === 'string' ?
deepLinks.player
deepLinks.externalPlayer ?
deepLinks.externalPlayer.web ?
deepLinks.externalPlayer.web
:
null
deepLinks.externalPlayer.openPlayer ?
deepLinks.externalPlayer.openPlayer[platform.name] ?
deepLinks.externalPlayer.openPlayer[platform.name]
:
deepLinks.externalPlayer.playlist
:
deepLinks.player
:
deepLinks.player
:
null;
}, [deepLinks, profile, streamingServer]);
}, [deepLinks]);
const download = React.useMemo(() => {
return href === deepLinks?.externalPlayer?.playlist ?
deepLinks.externalPlayer.fileName
:
null;
}, [href, deepLinks]);
const target = React.useMemo(() => {
return href === deepLinks?.externalPlayer?.web ?
'_blank'
:
null;
}, [href, deepLinks]);
const markVideoAsWatched = React.useCallback(() => {
if (typeof videoId === 'string') {
core.transport.dispatch({
@ -40,22 +58,9 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
});
}
}, [videoId, videoReleased]);
const onClick = React.useCallback((event) => {
if (href === null) {
// link does not lead to the player, it is expected to
// open with local video player through the streaming server
markVideoAsWatched();
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'PlayOnDevice',
args: {
device: 'vlc',
source: deepLinks.externalPlayer.streaming
}
}
});
} else if (profile.settings.playerType && profile.settings.playerType !== 'internal') {
if (profile.settings.playerType !== null) {
markVideoAsWatched();
toast.show({
type: 'success',
@ -63,20 +68,18 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
timeout: 4000
});
}
if (typeof props.onClick === 'function') {
props.onClick(event);
}
}, [href, deepLinks, props.onClick, profile, toast, markVideoAsWatched]);
const forceDownload = React.useMemo(() => {
// we only do this in one case to force the download
// of a M3U playlist generated in the browser
return href === deepLinks.externalPlayer.href ? deepLinks.externalPlayer.fileName : false;
}, [href]);
}, [props.onClick, profile.settings, markVideoAsWatched]);
const renderThumbnailFallback = React.useCallback(() => (
<Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
), []);
return (
<Button href={href} download={forceDownload} {...props} onClick={onClick} className={classnames(className, styles['stream-container'])} title={addonName}>
<Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick}>
<div className={styles['info-container']}>
{
typeof thumbnail === 'string' && thumbnail.length > 0 ?
@ -123,52 +126,17 @@ Stream.propTypes = {
deepLinks: PropTypes.shape({
player: PropTypes.string,
externalPlayer: PropTypes.shape({
href: PropTypes.string,
fileName: PropTypes.string,
download: PropTypes.string,
streaming: PropTypes.string,
playlist: PropTypes.string,
fileName: PropTypes.string,
web: PropTypes.string,
openPlayer: PropTypes.shape({
choose: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
vlc: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
outplayer: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
infuse: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
justplayer: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
mxplayer: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string,
})
})
}),

6
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -110,6 +110,12 @@
.description-container {
font-size: 0.9rem;
}
.info-container {
.addon-name {
font-size: 0.9rem;
}
}
}
}

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

@ -90,36 +90,6 @@ const ControlBar = React.forwardRef(({
}
}
}, [muted, onMuteRequested, onUnmuteRequested]);
const onSubtitlesButtonClick = React.useCallback(() => {
if (typeof onToggleSubtitlesMenu === 'function') {
onToggleSubtitlesMenu();
}
}, [onToggleSubtitlesMenu]);
const onInfoButtonClick = React.useCallback(() => {
if (typeof onToggleInfoMenu === 'function') {
onToggleInfoMenu();
}
}, [onToggleInfoMenu]);
const onSpeedButtonClick = React.useCallback(() => {
if (typeof onToggleSpeedMenu === 'function') {
onToggleSpeedMenu();
}
}, [onToggleSpeedMenu]);
const onVideosButtonClick = React.useCallback(() => {
if (typeof onToggleVideosMenu === 'function') {
onToggleVideosMenu();
}
}, [onToggleVideosMenu]);
const onOptionsButtonClick = React.useCallback(() => {
if (typeof onToggleOptionsMenu === 'function') {
onToggleOptionsMenu();
}
}, [onToggleOptionsMenu]);
const onStatisticsButtonClick = React.useCallback(() => {
if (typeof onToggleStatisticsMenu === 'function') {
onToggleStatisticsMenu();
}
}, [onToggleStatisticsMenu]);
const onChromecastButtonClick = React.useCallback(() => {
chromecast.transport.requestSession();
}, []);
@ -175,30 +145,30 @@ const ControlBar = React.forwardRef(({
<Icon className={styles['icon']} name={'more-vertical'} />
</Button>
<div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': statistics === null || statistics.type === 'Err' || stream === null || typeof stream.infoHash !== 'string' || typeof stream.fileIdx !== 'number' })} tabIndex={-1} onMouseDown={onStatisticsButtonMouseDown} onClick={onStatisticsButtonClick}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': statistics === null || statistics.type === 'Err' || stream === null || typeof stream.infoHash !== 'string' || typeof stream.fileIdx !== 'number' })} tabIndex={-1} onMouseDown={onStatisticsButtonMouseDown} onClick={onToggleStatisticsMenu}>
<Icon className={styles['icon']} name={'network'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onSpeedButtonClick}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onToggleSpeedMenu}>
<Icon className={styles['icon']} name={'speed'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onToggleInfoMenu}>
<Icon className={styles['icon']} name={'about'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
<Icon className={styles['icon']} name={'cast'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onToggleSubtitlesMenu}>
<Icon className={styles['icon']} name={'subtitles'} />
</Button>
{
metaItem?.content?.videos?.length > 0 ?
<Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onVideosButtonClick}>
<Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onToggleVideosMenu}>
<Icon className={styles['icon']} name={'episodes'} />
</Button>
:
null
}
<Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onOptionsButtonMouseDown} onClick={onOptionsButtonClick}>
<Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onOptionsButtonMouseDown} onClick={onToggleOptionsMenu}>
<Icon className={styles['icon']} name={'more-horizontal'} />
</Button>
</div>

56
src/routes/Player/Error/Error.js Normal file
View file

@ -0,0 +1,56 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types');
const classNames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const Error = ({ className, code, message, stream }) => {
const { t } = useTranslation();
const [playlist, fileName] = React.useMemo(() => {
return [
stream?.deepLinks?.externalPlayer?.playlist,
stream?.deepLinks?.externalPlayer?.fileName,
];
}, [stream]);
return (
<div className={classNames(className, styles['error'])}>
<div className={styles['error-label']} title={message}>{message}</div>
{
code === 2 ?
<div className={styles['error-sub']} title={t('EXTERNAL_PLAYER_HINT')}>{t('EXTERNAL_PLAYER_HINT')}</div>
:
null
}
{
playlist && fileName ?
<Button
className={styles['playlist-button']}
title={t('PLAYER_OPEN_IN_EXTERNAL')}
href={playlist}
download={fileName}
target={'_blank'}
>
<Icon className={styles['icon']} name={'ic_downloads'} />
<div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
</Button>
:
null
}
</div>
);
};
Error.propTypes = {
className: PropTypes.string,
code: PropTypes.number,
message: PropTypes.string,
stream: PropTypes.object,
};
module.exports = Error;

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

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

64
src/routes/Player/Error/styles.less Normal file
View file

@ -0,0 +1,64 @@
// Copyright (C) 2017-2023 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 1);
.error-label {
flex: 0 1 auto;
padding: 0 8rem;
max-height: 4.8em;
font-size: 2rem;
color: var(--primary-foreground-color);
text-align: center;
}
.error-sub {
flex: 0 1 auto;
padding: 0 2rem;
max-height: 4.8em;
font-size: 1.3rem;
margin-top: 0.8rem;
color: var(--primary-foreground-color);
text-align: center;
}
.playlist-button {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
height: 3.5rem;
border-radius: 3.5rem;
margin-top: 1.5rem;
padding: 0 2rem;
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
background-color: transparent;
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
}
.label {
flex: 1;
max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500;
color: var(--primary-foreground-color);
text-align: center;
}
}
}

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

@ -8,9 +8,9 @@ const langs = require('langs');
const { useTranslation } = require('react-i18next');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { HorizontalNavBar, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
const BufferingLoader = require('./BufferingLoader');
const Error = require('./Error');
const ControlBar = require('./ControlBar');
const NextVideoPopup = require('./NextVideoPopup');
const StatisticsMenu = require('./StatisticsMenu');
@ -19,10 +19,12 @@ const OptionsMenu = require('./OptionsMenu');
const VideosMenu = require('./VideosMenu');
const SubtitlesMenu = require('./SubtitlesMenu');
const SpeedMenu = require('./SpeedMenu');
const Video = require('./Video');
const usePlayer = require('./usePlayer');
const useSettings = require('./useSettings');
const useStatistics = require('./useStatistics');
const useVideo = require('./useVideo');
const styles = require('./styles');
const Video = require('./Video');
const Player = ({ urlParams, queryParams }) => {
const { t } = useTranslation();
@ -30,24 +32,48 @@ const Player = ({ urlParams, queryParams }) => {
const forceTranscoding = React.useMemo(() => {
return queryParams.has('forceTranscoding');
}, [queryParams]);
const [player, videoParamsChanged, timeChanged, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
const [settings, updateSettings] = useSettings();
const streamingServer = useStreamingServer();
const statistics = useStatistics(player, streamingServer);
const video = useVideo();
const routeFocused = useRouteFocused();
const toast = useToast();
const [, , , toggleFullscreen] = useFullscreen();
const [casting, setCasting] = React.useState(() => {
return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED;
});
const [immersed, setImmersed] = React.useState(true);
const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
const [, , , toggleFullscreen] = useFullscreen();
const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
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 [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
const menusOpen = React.useMemo(() => {
return optionsMenuOpen || subtitlesMenuOpen || infoMenuOpen || speedMenuOpen || videosMenuOpen || statisticsMenuOpen;
}, [optionsMenuOpen, subtitlesMenuOpen, infoMenuOpen, speedMenuOpen, videosMenuOpen, statisticsMenuOpen]);
const closeMenus = React.useCallback(() => {
closeOptionsMenu();
closeSubtitlesMenu();
closeInfoMenu();
closeSpeedMenu();
closeVideosMenu();
closeStatisticsMenu();
}, []);
const overlayHidden = React.useMemo(() => {
return immersed && !casting && video.state.paused !== null && !video.state.paused && !menusOpen && !nextVideoPopupOpen;
}, [immersed, casting, video.state.paused, menusOpen, nextVideoPopupOpen]);
const nextVideoPopupDismissed = React.useRef(false);
const defaultSubtitlesSelected = React.useRef(false);
const defaultAudioTrackSelected = React.useRef(false);
@ -55,64 +81,20 @@ const Player = ({ urlParams, queryParams }) => {
const [controlBarHeight, setControlBarHeight] = React.useState(0);
const [error, setError] = React.useState(null);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
{
manifest: null,
stream: null,
paused: null,
time: null,
duration: null,
buffering: null,
buffered: null,
volume: null,
muted: null,
playbackSpeed: null,
videoParams: null,
audioTracks: [],
selectedAudioTrackId: null,
subtitlesTracks: [],
selectedSubtitlesTrackId: null,
subtitlesOffset: null,
subtitlesSize: null,
subtitlesTextColor: null,
subtitlesBackgroundColor: null,
subtitlesOutlineColor: null,
extraSubtitlesTracks: [],
selectedExtraSubtitlesTrackId: null,
extraSubtitlesSize: null,
extraSubtitlesDelay: null,
extraSubtitlesOffset: null,
extraSubtitlesTextColor: null,
extraSubtitlesBackgroundColor: null,
extraSubtitlesOutlineColor: null
}
);
const videoRef = React.useRef(null);
const dispatch = React.useCallback((action, options) => {
if (videoRef.current !== null) {
videoRef.current.dispatch(action, options);
}
}, []);
const onImplementationChanged = React.useCallback((manifest) => {
setVideoState({ manifest });
manifest.props.forEach((propName) => {
dispatch({ type: 'observeProp', propName });
});
dispatch({ type: 'setProp', propName: 'subtitlesSize', propValue: settings.subtitlesSize });
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'subtitlesTextColor', propValue: settings.subtitlesTextColor });
dispatch({ type: 'setProp', propName: 'subtitlesBackgroundColor', propValue: settings.subtitlesBackgroundColor });
dispatch({ type: 'setProp', propName: 'subtitlesOutlineColor', propValue: settings.subtitlesOutlineColor });
dispatch({ type: 'setProp', propName: 'extraSubtitlesSize', propValue: settings.subtitlesSize });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'extraSubtitlesTextColor', propValue: settings.subtitlesTextColor });
dispatch({ type: 'setProp', propName: 'extraSubtitlesBackgroundColor', propValue: settings.subtitlesBackgroundColor });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOutlineColor', propValue: settings.subtitlesOutlineColor });
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]);
const onPropChanged = React.useCallback((propName, propValue) => {
setVideoState({ [propName]: propValue });
}, []);
const onEnded = React.useCallback(() => {
ended();
if (player.nextVideo !== null) {
@ -121,6 +103,7 @@ const Player = ({ urlParams, queryParams }) => {
window.history.back();
}
}, [player.nextVideo, onNextVideoRequested]);
const onError = React.useCallback((error) => {
console.error('Player', error);
if (error.critical) {
@ -134,6 +117,7 @@ const Player = ({ urlParams, queryParams }) => {
});
}
}, []);
const onSubtitlesTrackLoaded = React.useCallback(() => {
toast.show({
type: 'success',
@ -142,6 +126,7 @@ const Player = ({ urlParams, queryParams }) => {
timeout: 3000
});
}, []);
const onExtraSubtitlesTrackLoaded = React.useCallback((track) => {
toast.show({
type: 'success',
@ -150,53 +135,69 @@ const Player = ({ urlParams, queryParams }) => {
timeout: 3000
});
}, []);
const onPlayRequested = React.useCallback(() => {
dispatch({ type: 'setProp', propName: 'paused', propValue: false });
video.setProp('paused', false);
}, []);
const onPlayRequestedDebounced = React.useCallback(debounce(onPlayRequested, 200), []);
const onPauseRequested = React.useCallback(() => {
dispatch({ type: 'setProp', propName: 'paused', propValue: true });
video.setProp('paused', true);
}, []);
const onPauseRequestedDebounced = React.useCallback(debounce(onPauseRequested, 200), []);
const onMuteRequested = React.useCallback(() => {
dispatch({ type: 'setProp', propName: 'muted', propValue: true });
video.setProp('muted', true);
}, []);
const onUnmuteRequested = React.useCallback(() => {
dispatch({ type: 'setProp', propName: 'muted', propValue: false });
video.setProp('muted', false);
}, []);
const onVolumeChangeRequested = React.useCallback((volume) => {
dispatch({ type: 'setProp', propName: 'volume', propValue: volume });
video.setProp('volume', volume);
}, []);
const onSeekRequested = React.useCallback((time) => {
dispatch({ type: 'setProp', propName: 'time', propValue: time });
video.setProp('time', time);
}, []);
const onPlaybackSpeedChanged = React.useCallback((rate) => {
dispatch({ type: 'setProp', propName: 'playbackSpeed', propValue: rate });
video.setProp('playbackSpeed', rate);
}, []);
const onSubtitlesTrackSelected = React.useCallback((id) => {
dispatch({ type: 'setProp', propName: 'selectedSubtitlesTrackId', propValue: id });
dispatch({ type: 'setProp', propName: 'selectedExtraSubtitlesTrackId', propValue: null });
video.setProp('selectedSubtitlesTrackId', id);
video.setProp('selectedExtraSubtitlesTrackId', null);
}, []);
const onExtraSubtitlesTrackSelected = React.useCallback((id) => {
dispatch({ type: 'setProp', propName: 'selectedSubtitlesTrackId', propValue: null });
dispatch({ type: 'setProp', propName: 'selectedExtraSubtitlesTrackId', propValue: id });
video.setProp('selectedSubtitlesTrackId', null);
video.setProp('selectedExtraSubtitlesTrackId', id);
}, []);
const onAudioTrackSelected = React.useCallback((id) => {
dispatch({ type: 'setProp', propName: 'selectedAudioTrackId', propValue: id });
video.setProp('selectedAudioTrackId', id);
}, []);
const onExtraSubtitlesDelayChanged = React.useCallback((delay) => {
dispatch({ type: 'setProp', propName: 'extraSubtitlesDelay', propValue: delay });
video.setProp('extraSubtitlesDelay', delay);
}, []);
const onSubtitlesSizeChanged = React.useCallback((size) => {
updateSettings({ subtitlesSize: size });
}, [updateSettings]);
const onSubtitlesOffsetChanged = React.useCallback((offset) => {
updateSettings({ subtitlesOffset: offset });
}, [updateSettings]);
const onDismissNextVideoPopup = React.useCallback(() => {
closeNextVideoPopup();
nextVideoPopupDismissed.current = true;
}, []);
const onNextVideoRequested = React.useCallback(() => {
if (player.nextVideo !== null) {
nextVideo();
@ -210,20 +211,23 @@ const Player = ({ urlParams, queryParams }) => {
}
}
}, [player.nextVideo]);
const onVideoClick = React.useCallback(() => {
if (videoState.paused !== null) {
if (videoState.paused) {
if (video.state.paused !== null) {
if (video.state.paused) {
onPlayRequestedDebounced();
} else {
onPauseRequestedDebounced();
}
}
}, [videoState.paused]);
}, [video.state.paused]);
const onVideoDoubleClick = React.useCallback(() => {
onPlayRequestedDebounced.cancel();
onPauseRequestedDebounced.cancel();
toggleFullscreen();
}, [toggleFullscreen]);
const onContainerMouseDown = React.useCallback((event) => {
if (!event.nativeEvent.optionsMenuClosePrevented) {
closeOptionsMenu();
@ -244,6 +248,7 @@ const Player = ({ urlParams, queryParams }) => {
closeStatisticsMenu();
}
}, []);
const onContainerMouseMove = React.useCallback((event) => {
setImmersed(false);
if (!event.nativeEvent.immersePrevented) {
@ -252,6 +257,7 @@ const Player = ({ urlParams, queryParams }) => {
setImmersedDebounced.cancel();
}
}, []);
const onContainerMouseLeave = React.useCallback(() => {
setImmersedDebounced.cancel();
// TODO: Move subtitles position down
@ -259,6 +265,7 @@ const Player = ({ urlParams, queryParams }) => {
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset + controlBarHeight });
setImmersed(true);
}, []);
const onBarMouseMove = React.useCallback((event) => {
// TODO: move subtitles up
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
@ -266,6 +273,7 @@ const Player = ({ urlParams, queryParams }) => {
event.nativeEvent.immersePrevented = true;
}, []);
React.useEffect(() => {
if(controlBarRef.current.clientHeight) {
const height = controlBarRef.current.clientHeight;
@ -275,41 +283,37 @@ const Player = ({ urlParams, queryParams }) => {
React.useEffect(() => {
setError(null);
if (player.selected === null) {
dispatch({ type: 'command', commandName: 'unload' });
} else if (streamingServer.baseUrl !== null && (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
dispatch({
type: 'command',
commandName: 'load',
commandArgs: {
stream: {
...player.selected.stream,
subtitles: Array.isArray(player.selected.stream.subtitles) ?
player.selected.stream.subtitles.map((subtitles) => ({
...subtitles,
label: subtitles.url
}))
:
[]
},
autoplay: true,
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
video.unload();
} else if (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading')) {
video.load({
stream: {
...player.selected.stream,
subtitles: Array.isArray(player.selected.stream.subtitles) ?
player.selected.stream.subtitles.map((subtitles) => ({
...subtitles,
label: subtitles.url
}))
:
0,
forceTranscoding: forceTranscoding || casting,
maxAudioChannels: settings.surroundSound ? 32 : 2,
streamingServerURL: streamingServer.baseUrl ?
casting ?
streamingServer.baseUrl
:
streamingServer.selected.transportUrl
[]
},
autoplay: true,
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,
forceTranscoding: forceTranscoding || casting,
maxAudioChannels: settings.surroundSound ? 32 : 2,
streamingServerURL: streamingServer.baseUrl ?
casting ?
streamingServer.baseUrl
:
null,
seriesInfo: player.seriesInfo
}
streamingServer.selected.transportUrl
:
null,
seriesInfo: player.seriesInfo
}, {
chromecastTransport: chromecast.active ? chromecast.transport : null,
shellTransport: shell.active ? shell.transport : null,
@ -317,89 +321,74 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [streamingServer.baseUrl, player.selected, player.metaItem, forceTranscoding, casting]);
React.useEffect(() => {
if (videoState.stream !== null) {
dispatch({
type: 'command',
commandName: 'addExtraSubtitlesTracks',
commandArgs: {
tracks: player.subtitles.map((subtitles) => ({
...subtitles,
label: subtitles.url
}))
}
});
if (video.state.stream !== null) {
const tracks = player.subtitles.map((subtitles) => ({
...subtitles,
label: subtitles.url
}));
video.addExtraSubtitlesTracks(tracks);
}
}, [player.subtitles, videoState.stream]);
}, [player.subtitles, video.state.stream]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'subtitlesSize', propValue: settings.subtitlesSize });
dispatch({ type: 'setProp', propName: 'extraSubtitlesSize', propValue: settings.subtitlesSize });
video.setProp('subtitlesSize', settings.subtitlesSize);
video.setProp('extraSubtitlesSize', settings.subtitlesSize);
}, [settings.subtitlesSize]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset });
video.setProp('subtitlesOffset', settings.subtitlesOffset);
video.setProp('extraSubtitlesOffset', settings.subtitlesOffset);
}, [settings.subtitlesOffset]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'subtitlesTextColor', propValue: settings.subtitlesTextColor });
dispatch({ type: 'setProp', propName: 'extraSubtitlesTextColor', propValue: settings.subtitlesTextColor });
video.setProp('subtitlesTextColor', settings.subtitlesTextColor);
video.setProp('extraSubtitlesTextColor', settings.subtitlesTextColor);
}, [settings.subtitlesTextColor]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'subtitlesBackgroundColor', propValue: settings.subtitlesBackgroundColor });
dispatch({ type: 'setProp', propName: 'extraSubtitlesBackgroundColor', propValue: settings.subtitlesBackgroundColor });
video.setProp('subtitlesBackgroundColor', settings.subtitlesBackgroundColor);
video.setProp('extraSubtitlesBackgroundColor', settings.subtitlesBackgroundColor);
}, [settings.subtitlesBackgroundColor]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'subtitlesOutlineColor', propValue: settings.subtitlesOutlineColor });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOutlineColor', propValue: settings.subtitlesOutlineColor });
video.setProp('subtitlesOutlineColor', settings.subtitlesOutlineColor);
video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
}, [settings.subtitlesOutlineColor]);
React.useEffect(() => {
if (videoState.time !== null && !isNaN(videoState.time) &&
videoState.duration !== null && !isNaN(videoState.duration) &&
videoState.manifest !== null && typeof videoState.manifest.name === 'string') {
timeChanged(videoState.time, videoState.duration, videoState.manifest.name);
if (video.state.time !== null && !isNaN(video.state.time) &&
video.state.duration !== null && !isNaN(video.state.duration) &&
video.state.manifest !== null && typeof video.state.manifest.name === 'string') {
timeChanged(video.state.time, video.state.duration, video.state.manifest.name);
}
}, [videoState.time, videoState.duration, videoState.manifest]);
}, [video.state.time, video.state.duration, video.state.manifest]);
React.useEffect(() => {
if (videoState.paused !== null) {
pausedChanged(videoState.paused);
if (video.state.paused !== null) {
pausedChanged(video.state.paused);
}
}, [videoState.paused]);
}, [video.state.paused]);
React.useEffect(() => {
videoParamsChanged(videoState.videoParams);
}, [videoState.videoParams]);
videoParamsChanged(video.state.videoParams);
}, [video.state.videoParams]);
React.useEffect(() => {
if (!!settings.bingeWatching && player.nextVideo !== null && !nextVideoPopupDismissed.current) {
if (videoState.time !== null && videoState.duration !== null && videoState.time < videoState.duration && (videoState.duration - videoState.time) <= settings.nextVideoNotificationDuration) {
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 {
closeNextVideoPopup();
}
}
}, [player.nextVideo, videoState.time, videoState.duration]);
React.useEffect(() => {
if (player.selected && player.selected.stream && typeof player.selected.stream.infoHash === 'string' && typeof player.selected.stream.fileIdx === 'number') {
const { infoHash, fileIdx } = player.selected.stream;
const getStatistics = () => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'GetStatistics',
args: {
infoHash,
fileIdx,
}
}
});
};
getStatistics();
const statisticsInterval = setInterval(getStatistics, 5000);
return () => clearInterval(statisticsInterval);
}
}, [player.selected]);
}, [player.nextVideo, video.state.time, video.state.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);
const subtitlesTrack = findTrackByLang(video.state.subtitlesTracks, settings.subtitlesLanguage);
const extraSubtitlesTrack = findTrackByLang(video.state.extraSubtitlesTracks, settings.subtitlesLanguage);
if (subtitlesTrack && subtitlesTrack.id) {
onSubtitlesTrackSelected(subtitlesTrack.id);
@ -409,41 +398,47 @@ const Player = ({ urlParams, queryParams }) => {
defaultSubtitlesSelected.current = true;
}
}
}, [videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
}, [video.state.subtitlesTracks, video.state.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);
const audioTrack = findTrackByLang(video.state.audioTracks, settings.audioLanguage);
if (audioTrack && audioTrack.id) {
onAudioTrackSelected(audioTrack.id);
defaultAudioTrackSelected.current = true;
}
}
}, [videoState.audioTracks]);
}, [video.state.audioTracks]);
React.useEffect(() => {
defaultSubtitlesSelected.current = false;
defaultAudioTrackSelected.current = false;
nextVideoPopupDismissed.current = false;
}, [videoState.stream]);
}, [video.state.stream]);
React.useEffect(() => {
if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
(!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&
(!Array.isArray(videoState.audioTracks) || videoState.audioTracks.length === 0)) {
if ((!Array.isArray(video.state.subtitlesTracks) || video.state.subtitlesTracks.length === 0) &&
(!Array.isArray(video.state.extraSubtitlesTracks) || video.state.extraSubtitlesTracks.length === 0) &&
(!Array.isArray(video.state.audioTracks) || video.state.audioTracks.length === 0)) {
closeSubtitlesMenu();
}
}, [videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
}, [video.state.audioTracks, video.state.subtitlesTracks, video.state.extraSubtitlesTracks]);
React.useEffect(() => {
if (player.metaItem === null || player.metaItem.type !== 'Ready') {
closeInfoMenu();
closeVideosMenu();
}
}, [player.metaItem]);
React.useEffect(() => {
if (videoState.playbackSpeed === null) {
if (video.state.playbackSpeed === null) {
closeSpeedMenu();
}
}, [videoState.playbackSpeed]);
}, [video.state.playbackSpeed]);
React.useEffect(() => {
const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
toast.addFilter(toastFilter);
@ -479,13 +474,12 @@ const Player = ({ urlParams, queryParams }) => {
}
};
}, []);
console.log(controlBarHeight)
React.useLayoutEffect(() => {
const onKeyDown = (event) => {
switch (event.code) {
case 'Space': {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && !optionsMenuOpen && !statisticsMenuOpen && videoState.paused !== null) {
if (videoState.paused) {
if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
if (video.state.paused) {
onPlayRequested();
} else {
onPauseRequested();
@ -495,55 +489,47 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'ArrowRight': {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && !optionsMenuOpen && !statisticsMenuOpen && videoState.time !== null) {
if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
onSeekRequested(videoState.time + seekDuration);
onSeekRequested(video.state.time + seekDuration);
}
break;
}
case 'ArrowLeft': {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && !optionsMenuOpen && !statisticsMenuOpen && videoState.time !== null) {
if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
onSeekRequested(videoState.time - seekDuration);
onSeekRequested(video.state.time - seekDuration);
}
break;
}
case 'ArrowUp': {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && !optionsMenuOpen && !statisticsMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume + 5);
if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume + 5);
}
break;
}
case 'ArrowDown': {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && !optionsMenuOpen && !statisticsMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume - 5);
if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume - 5);
}
break;
}
case 'KeyS': {
closeOptionsMenu();
closeInfoMenu();
closeSpeedMenu();
closeVideosMenu();
closeStatisticsMenu();
if ((Array.isArray(videoState.subtitlesTracks) && videoState.subtitlesTracks.length > 0) ||
(Array.isArray(videoState.extraSubtitlesTracks) && videoState.extraSubtitlesTracks.length > 0) ||
(Array.isArray(videoState.audioTracks) && videoState.audioTracks.length > 0)) {
closeMenus();
if ((Array.isArray(video.state.subtitlesTracks) && video.state.subtitlesTracks.length > 0) ||
(Array.isArray(video.state.extraSubtitlesTracks) && video.state.extraSubtitlesTracks.length > 0) ||
(Array.isArray(video.state.audioTracks) && video.state.audioTracks.length > 0)) {
toggleSubtitlesMenu();
}
break;
}
case 'KeyI': {
closeOptionsMenu();
closeSubtitlesMenu();
closeSpeedMenu();
closeVideosMenu();
closeStatisticsMenu();
closeMenus();
if (player.metaItem !== null && player.metaItem.type === 'Ready') {
toggleInfoMenu();
}
@ -551,23 +537,15 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'KeyR': {
closeOptionsMenu();
closeInfoMenu();
closeSubtitlesMenu();
closeVideosMenu();
closeStatisticsMenu();
if (videoState.playbackSpeed !== null) {
closeMenus();
if (video.state.playbackSpeed !== null) {
toggleSpeedMenu();
}
break;
}
case 'KeyV': {
closeOptionsMenu();
closeInfoMenu();
closeSubtitlesMenu();
closeSpeedMenu();
closeStatisticsMenu();
closeMenus();
if (player.metaItem !== null && player.metaItem.type === 'Ready') {
toggleVideosMenu();
}
@ -575,11 +553,7 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'KeyD': {
closeOptionsMenu();
closeInfoMenu();
closeSubtitlesMenu();
closeSpeedMenu();
closeVideosMenu();
closeMenus();
if (streamingServer.statistics !== null && streamingServer.statistics.type !== 'Err' && player.selected && typeof player.selected.stream.infoHash === 'string' && typeof player.selected.stream.fileIdx === 'number') {
toggleStatisticsMenu();
}
@ -587,25 +561,19 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'Escape': {
closeOptionsMenu();
closeSubtitlesMenu();
closeInfoMenu();
closeSpeedMenu();
closeVideosMenu();
closeStatisticsMenu();
onDismissNextVideoPopup();
closeMenus();
break;
}
}
};
const onWheel = ({ deltaY }) => {
if (deltaY > 0) {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && !optionsMenuOpen && !statisticsMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume - 5);
if (!menusOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume - 5);
}
} else {
if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && !optionsMenuOpen && !statisticsMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume + 5);
if (!menusOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume + 5);
}
}
};
@ -617,7 +585,24 @@ const Player = ({ urlParams, queryParams }) => {
window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('wheel', onWheel);
};
}, [player.metaItem, player.selected, streamingServer.statistics, settings.seekTimeDuration, settings.seekShortTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videosMenuOpen, speedMenuOpen, optionsMenuOpen, statisticsMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, videoState.playbackSpeed, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu, toggleStatisticsMenu]);
}, [player.metaItem, player.selected, streamingServer.statistics, settings.seekTimeDuration, settings.seekShortTimeDuration, 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, toggleInfoMenu, toggleVideosMenu, toggleStatisticsMenu]);
React.useEffect(() => {
video.events.on('error', onError);
video.events.on('ended', onEnded);
video.events.on('subtitlesTrackLoaded', onSubtitlesTrackLoaded);
video.events.on('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded);
video.events.on('implementationChanged', onImplementationChanged);
return () => {
video.events.off('error', onError);
video.events.off('ended', onEnded);
video.events.off('subtitlesTrackLoaded', onSubtitlesTrackLoaded);
video.events.off('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded);
video.events.off('implementationChanged', onImplementationChanged);
};
}, []);
React.useLayoutEffect(() => {
return () => {
setImmersedDebounced.cancel();
@ -625,59 +610,37 @@ const Player = ({ urlParams, queryParams }) => {
onPauseRequestedDebounced.cancel();
};
}, []);
return (
<div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && !casting && videoState.paused !== null && !videoState.paused && !subtitlesMenuOpen && !infoMenuOpen && !speedMenuOpen && !videosMenuOpen && !nextVideoPopupOpen && !optionsMenuOpen && !statisticsMenuOpen })}
<div className={classnames(styles['player-container'], { [styles['overlayHidden']]: overlayHidden })}
onMouseDown={onContainerMouseDown}
onMouseMove={onContainerMouseMove}
onMouseOver={onContainerMouseMove}
onMouseLeave={onContainerMouseLeave}>
<Video
ref={videoRef}
className={styles['layer']}
onEnded={onEnded}
onError={onError}
onPropValue={onPropChanged}
onPropChanged={onPropChanged}
onSubtitlesTrackLoaded={onSubtitlesTrackLoaded}
onExtraSubtitlesTrackLoaded={onExtraSubtitlesTrackLoaded}
onImplementationChanged={onImplementationChanged}
/>
{
videoState.buffering ?
<BufferingLoader className={styles['layer']} logo={player?.metaItem?.content?.logo} />
:
null
}
<div
ref={video.containerElement}
className={styles['layer']}
onClick={onVideoClick}
onDoubleClick={onVideoDoubleClick}
/>
{
error !== null ?
<div className={classnames(styles['layer'], styles['error-layer'])}>
<div className={styles['error-label']} title={error.message}>{error.message}</div>
{
error.code === 2 ?
<div className={styles['error-sub']} title={t('EXTERNAL_PLAYER_HINT')}>{t('EXTERNAL_PLAYER_HINT')}</div>
:
null
}
{
player.selected !== null ?
<Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={player.selected.stream.deepLinks.externalPlayer.href} download={player.selected.stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
<Icon className={styles['icon']} name={'ic_downloads'} />
<div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
</Button>
:
null
}
</div>
video.state.buffering ?
<BufferingLoader className={styles['layer']} logo={player?.metaItem?.content?.logo} />
:
null
}
{
subtitlesMenuOpen || infoMenuOpen || videosMenuOpen || speedMenuOpen || optionsMenuOpen || statisticsMenuOpen ?
error !== null ?
<Error
className={styles['layer']}
stream={video.state.stream}
{...error}
/>
:
null
}
{
menusOpen ?
<div className={styles['layer']} />
:
null
@ -692,19 +655,19 @@ const Player = ({ urlParams, queryParams }) => {
/>
<ControlBar
className={classnames(styles['layer'], styles['control-bar-layer'])}
paused={videoState.paused}
time={videoState.time}
duration={videoState.duration}
buffered={videoState.buffered}
volume={videoState.volume}
muted={videoState.muted}
playbackSpeed={videoState.playbackSpeed}
subtitlesTracks={videoState.subtitlesTracks.concat(videoState.extraSubtitlesTracks)}
audioTracks={videoState.audioTracks}
paused={video.state.paused}
time={video.state.time}
duration={video.state.duration}
buffered={video.state.buffered}
volume={video.state.volume}
muted={video.state.muted}
playbackSpeed={video.state.playbackSpeed}
subtitlesTracks={video.state.subtitlesTracks.concat(video.state.extraSubtitlesTracks)}
audioTracks={video.state.audioTracks}
metaItem={player.metaItem}
nextVideo={player.nextVideo}
stream={player.selected !== null ? player.selected.stream : null}
statistics={streamingServer.statistics}
statistics={statistics}
onPlayRequested={onPlayRequested}
onPauseRequested={onPauseRequested}
onNextVideoRequested={onNextVideoRequested}
@ -738,8 +701,7 @@ const Player = ({ urlParams, queryParams }) => {
statisticsMenuOpen ?
<StatisticsMenu
className={classnames(styles['layer'], styles['menu-layer'])}
stream={player.selected !== null ? player.selected.stream : null}
statistics={streamingServer.statistics}
{...statistics}
/>
:
null
@ -748,17 +710,17 @@ const Player = ({ urlParams, queryParams }) => {
subtitlesMenuOpen ?
<SubtitlesMenu
className={classnames(styles['layer'], styles['menu-layer'])}
audioTracks={videoState.audioTracks}
selectedAudioTrackId={videoState.selectedAudioTrackId}
subtitlesTracks={videoState.subtitlesTracks}
selectedSubtitlesTrackId={videoState.selectedSubtitlesTrackId}
subtitlesOffset={videoState.subtitlesOffset}
subtitlesSize={videoState.subtitlesSize}
extraSubtitlesTracks={videoState.extraSubtitlesTracks}
selectedExtraSubtitlesTrackId={videoState.selectedExtraSubtitlesTrackId}
extraSubtitlesOffset={videoState.extraSubtitlesOffset}
extraSubtitlesDelay={videoState.extraSubtitlesDelay}
extraSubtitlesSize={videoState.extraSubtitlesSize}
audioTracks={video.state.audioTracks}
selectedAudioTrackId={video.state.selectedAudioTrackId}
subtitlesTracks={video.state.subtitlesTracks}
selectedSubtitlesTrackId={video.state.selectedSubtitlesTrackId}
subtitlesOffset={video.state.subtitlesOffset}
subtitlesSize={video.state.subtitlesSize}
extraSubtitlesTracks={video.state.extraSubtitlesTracks}
selectedExtraSubtitlesTrackId={video.state.selectedExtraSubtitlesTrackId}
extraSubtitlesOffset={video.state.extraSubtitlesOffset}
extraSubtitlesDelay={video.state.extraSubtitlesDelay}
extraSubtitlesSize={video.state.extraSubtitlesSize}
onSubtitlesTrackSelected={onSubtitlesTrackSelected}
onExtraSubtitlesTrackSelected={onExtraSubtitlesTrackSelected}
onAudioTrackSelected={onAudioTrackSelected}
@ -786,7 +748,7 @@ const Player = ({ urlParams, queryParams }) => {
speedMenuOpen ?
<SpeedMenu
className={classnames(styles['layer'], styles['menu-layer'])}
playbackSpeed={videoState.playbackSpeed}
playbackSpeed={video.state.playbackSpeed}
onPlaybackSpeedChanged={onPlaybackSpeedChanged}
/>
:

31
src/routes/Player/StatisticsMenu/StatisticsMenu.js
View file

@ -5,28 +5,7 @@ const classNames = require('classnames');
const PropTypes = require('prop-types');
const styles = require('./styles.less');
const StatisticsMenu = ({ className, stream, statistics }) => {
const peers = React.useMemo(() => {
return statistics.type === 'Ready' && statistics.content?.peers ?
statistics.content.peers
:
0;
}, [statistics]);
const speed = React.useMemo(() => {
return statistics.type === 'Ready' && statistics.content?.downloadSpeed ?
(statistics.content.downloadSpeed / 1000 / 1000).toFixed(2)
:
0;
}, [statistics]);
const completed = React.useMemo(() => {
return statistics.type === 'Ready' && statistics.content?.streamProgress ?
(statistics.content.streamProgress * 100).toFixed(2)
:
0;
}, [statistics]);
const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
return (
<div className={classNames(className, styles['statistics-menu-container'])}>
<div className={styles['title']}>
@ -63,7 +42,7 @@ const StatisticsMenu = ({ className, stream, statistics }) => {
Info Hash
</div>
<div className={styles['value']}>
{ stream.infoHash }
{ infoHash }
</div>
</div>
</div>
@ -72,8 +51,10 @@ const StatisticsMenu = ({ className, stream, statistics }) => {
StatisticsMenu.propTypes = {
className: PropTypes.string,
stream: PropTypes.object,
statistics: PropTypes.object,
peers: PropTypes.number,
speed: PropTypes.number,
completed: PropTypes.number,
infoHash: PropTypes.string,
};
module.exports = StatisticsMenu;

82
src/routes/Player/Video/Video.js
View file

@ -3,79 +3,12 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const StremioVideo = require('@stremio/stremio-video');
const { useLiveRef } = require('stremio/common');
const styles = require('./styles');
const Video = React.forwardRef(({ className, ...props }, ref) => {
const onEndedRef = useLiveRef(props.onEnded);
const onErrorRef = useLiveRef(props.onError);
const onPropValueRef = useLiveRef(props.onPropValue);
const onPropChangedRef = useLiveRef(props.onPropChanged);
const onSubtitlesTrackLoadedRef = useLiveRef(props.onSubtitlesTrackLoaded);
const onExtraSubtitlesTrackLoadedRef = useLiveRef(props.onExtraSubtitlesTrackLoaded);
const onImplementationChangedRef = useLiveRef(props.onImplementationChanged);
const videoElementRef = React.useRef(null);
const videoRef = React.useRef(null);
const dispatch = React.useCallback((action, options = {}) => {
if (videoRef.current !== null) {
try {
videoRef.current.dispatch(action, {
...options,
containerElement: videoElementRef.current
});
} catch (error) {
console.error('Video', error);
}
}
}, []);
React.useImperativeHandle(ref, () => ({ dispatch }), []);
React.useEffect(() => {
if (videoElementRef.current !== null) {
videoRef.current = new StremioVideo();
videoRef.current.on('ended', () => {
if (typeof onEndedRef.current === 'function') {
onEndedRef.current();
}
});
videoRef.current.on('error', (args) => {
if (typeof onErrorRef.current === 'function') {
onErrorRef.current(args);
}
});
videoRef.current.on('propValue', (propName, propValue) => {
if (typeof onPropValueRef.current === 'function') {
onPropValueRef.current(propName, propValue);
}
});
videoRef.current.on('propChanged', (propName, propValue) => {
if (typeof onPropChangedRef.current === 'function') {
onPropChangedRef.current(propName, propValue);
}
});
videoRef.current.on('subtitlesTrackLoaded', (track) => {
if (typeof onSubtitlesTrackLoadedRef.current === 'function') {
onSubtitlesTrackLoadedRef.current(track);
}
});
videoRef.current.on('extraSubtitlesTrackLoaded', (track) => {
if (typeof onExtraSubtitlesTrackLoadedRef.current === 'function') {
onExtraSubtitlesTrackLoadedRef.current(track);
}
});
videoRef.current.on('implementationChanged', (manifest) => {
if (typeof onImplementationChangedRef.current === 'function') {
onImplementationChangedRef.current(manifest);
}
});
}
return () => {
videoRef.current.destroy();
};
}, []);
const Video = React.forwardRef(({ className, onClick, onDoubleClick }, ref) => {
return (
<div className={classnames(className, styles['video-container'])}>
<div ref={videoElementRef} className={styles['video']} />
<div className={classnames(className, styles['video-container'])} onClick={onClick} onDoubleClick={onDoubleClick}>
<div ref={ref} className={styles['video']} />
</div>
);
});
@ -84,13 +17,8 @@ Video.displayName = 'Video';
Video.propTypes = {
className: PropTypes.string,
onEnded: PropTypes.func,
onError: PropTypes.func,
onPropValue: PropTypes.func,
onPropChanged: PropTypes.func,
onSubtitlesTrackLoaded: PropTypes.func,
onExtraSubtitlesTrackLoaded: PropTypes.func,
onImplementationChanged: PropTypes.func
onClick: PropTypes.func,
onDoubleClick: PropTypes.func,
};
module.exports = Video;

63
src/routes/Player/styles.less
View file

@ -15,7 +15,7 @@
@background-color: rgba(0, 0, 0, 1);
html:not(.active-slider-within) {
.player-container.immersed {
.player-container.overlayHidden {
cursor: none;
.nav-bar-layer, .control-bar-layer, .menu-layer {
@ -40,67 +40,6 @@ html:not(.active-slider-within) {
bottom: 0;
z-index: 0;
&.error-layer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: @background-color;
.error-label {
flex: 0 1 auto;
padding: 0 8rem;
max-height: 4.8em;
font-size: 2rem;
color: var(--primary-foreground-color);
text-align: center;
}
.error-sub {
flex: 0 1 auto;
padding: 0 2rem;
max-height: 4.8em;
font-size: 1.3rem;
margin-top: 0.8rem;
color: var(--primary-foreground-color);
text-align: center;
}
.playlist-button {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
height: 3.5rem;
border-radius: 3.5rem;
margin-top: 1.5rem;
padding: 0 2rem;
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
background-color: transparent;
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
}
.label {
flex: 1;
max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500;
color: var(--primary-foreground-color);
text-align: center;
}
}
}
&.nav-bar-layer {
bottom: initial;
background: transparent;

83
src/routes/Player/useStatistics.js Normal file
View file

@ -0,0 +1,83 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useServices } = require('stremio/services');
const useStatistics = (player, streamingServer) => {
const { core } = useServices();
const stream = React.useMemo(() => {
return player.selected?.stream ?
player.selected.stream
:
null;
}, [player.selected]);
const infoHash = React.useMemo(() => {
return stream?.infoHash ?
stream?.infoHash
:
null;
}, [stream]);
const statistics = React.useMemo(() => {
return streamingServer.statistics?.type === 'Ready' ?
streamingServer.statistics.content
:
null;
}, [streamingServer.statistics]);
const peers = React.useMemo(() => {
return statistics?.peers ?
statistics.peers
:
0;
}, [statistics]);
const speed = React.useMemo(() => {
return statistics?.downloadSpeed ?
parseFloat((statistics.downloadSpeed / 1000 / 1000).toFixed(2))
:
0;
}, [statistics]);
const completed = React.useMemo(() => {
return statistics?.streamProgress ?
parseFloat((statistics.streamProgress * 100).toFixed(2))
:
0;
}, [statistics]);
const getStatistics = React.useCallback(() => {
if (stream) {
const { infoHash, fileIdx } = stream;
if (typeof infoHash === 'string' && typeof fileIdx === 'number') {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'GetStatistics',
args: {
infoHash,
fileIdx,
}
}
});
}
}
}, [stream]);
React.useEffect(() => {
getStatistics();
const interval = setInterval(getStatistics, 5000);
return () => clearInterval(interval);
}, [getStatistics]);
return {
infoHash,
peers,
speed,
completed,
};
};
module.exports = useStatistics;

143
src/routes/Player/useVideo.js Normal file
View file

@ -0,0 +1,143 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const Video = require('@stremio/stremio-video');
const EventEmitter = require('eventemitter3');
const events = new EventEmitter();
const useVideo = () => {
const video = React.useRef(null);
const containerElement = React.useRef(null);
const [state, setState] = React.useState({
manifest: null,
stream: null,
paused: null,
time: null,
duration: null,
buffering: null,
buffered: null,
volume: null,
muted: null,
playbackSpeed: null,
videoParams: null,
audioTracks: [],
selectedAudioTrackId: null,
subtitlesTracks: [],
selectedSubtitlesTrackId: null,
subtitlesOffset: null,
subtitlesSize: null,
subtitlesTextColor: null,
subtitlesBackgroundColor: null,
subtitlesOutlineColor: null,
extraSubtitlesTracks: [],
selectedExtraSubtitlesTrackId: null,
extraSubtitlesSize: null,
extraSubtitlesDelay: null,
extraSubtitlesOffset: null,
extraSubtitlesTextColor: null,
extraSubtitlesBackgroundColor: null,
extraSubtitlesOutlineColor: null,
});
const dispatch = (action, options) => {
if (video.current && containerElement.current) {
try {
video.current.dispatch(action, {
...options,
containerElement: containerElement.current,
});
} catch (error) {
console.error('Video:', error);
}
}
};
const load = (args, options) => {
dispatch({
type: 'command',
commandName: 'load',
commandArgs: args
}, options);
};
const unload = () => {
dispatch({
type: 'command',
commandName: 'unload',
});
};
const addExtraSubtitlesTracks = (tracks) => {
dispatch({
type: 'command',
commandName: 'addExtraSubtitlesTracks',
commandArgs: {
tracks,
},
});
};
const setProp = (name, value) => {
dispatch({ type: 'setProp', propName: name, propValue: value });
};
const onError = (error) => {
events.emit('error', error);
};
const onEnded = () => {
events.emit('ended');
};
const onSubtitlesTrackLoaded = (track) => {
events.emit('subtitlesTrackLoaded', track);
};
const onExtraSubtitlesTrackLoaded = (track) => {
events.emit('extraSubtitlesTrackLoaded', track);
};
const onPropChanged = (name, value) => {
setState((state) => ({
...state,
[name]: value
}));
};
const onImplementationChanged = (manifest) => {
manifest.props.forEach((propName) => dispatch(({ type: 'observeProp', propName })));
setState((state) => ({
...state,
manifest
}));
events.emit('implementationChanged', manifest);
};
React.useEffect(() => {
video.current = new Video();
video.current.on('error', onError);
video.current.on('ended', onEnded);
video.current.on('propChanged', onPropChanged);
video.current.on('propValue', onPropChanged);
video.current.on('implementationChanged', onImplementationChanged);
video.current.on('subtitlesTrackLoaded', onSubtitlesTrackLoaded);
video.current.on('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded);
return () => video.current.destroy();
}, []);
return {
events,
containerElement,
state,
load,
unload,
addExtraSubtitlesTracks,
setProp,
};
};
module.exports = useVideo;

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

@ -90,10 +90,8 @@ const Search = ({ queryParams }) => {
<MetaRow
key={index}
className={classnames(styles['search-row'], styles[`search-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
title={catalog.title}
items={catalog.content.content}
catalog={catalog}
itemComponent={MetaItem}
deepLinks={catalog.deepLinks}
/>
);
}
@ -102,9 +100,8 @@ const Search = ({ queryParams }) => {
<MetaRow
key={index}
className={classnames(styles['search-row'], 'animation-fade-in')}
title={catalog.title}
catalog={catalog}
message={catalog.content.content}
deepLinks={catalog.deepLinks}
/>
);
}
@ -113,8 +110,7 @@ const Search = ({ queryParams }) => {
<MetaRow.Placeholder
key={index}
className={classnames(styles['search-row'], styles['search-row-poster'], 'animation-fade-in')}
title={catalog.title}
deepLinks={catalog.deepLinks}
catalog={catalog}
/>
);
}
@ -131,7 +127,7 @@ Search.propTypes = {
};
const SearchFallback = ({ queryParams }) => (
<MainNavBars className={styles['search-container']} route={'search'} query={queryParams.get('search')} />
<MainNavBars className={styles['search-container']} route={'search'} query={queryParams.get('search') ?? queryParams.get('query')} />
);
SearchFallback.propTypes = Search.propTypes;

5
src/routes/Search/useSearch.js
View file

@ -32,14 +32,15 @@ const useSearch = (queryParams) => {
// };
// }, [queryParams.get('search')]);
const action = React.useMemo(() => {
if (queryParams.has('search') && queryParams.get('search').length > 0) {
const query = queryParams.get('search') ?? queryParams.get('query');
if (query?.length > 0) {
return {
action: 'Load',
args: {
model: 'CatalogsWithExtra',
args: {
extra: [
['search', queryParams.get('search')]
['search', query]
]
}
}

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

@ -46,6 +46,8 @@ const Settings = () => {
streamingServerUrlInput
} = useProfileSettingsInputs(profile);
const {
streamingServerRemoteUrlInput,
remoteEndpointSelect,
cacheSizeSelect,
torrentProfileSelect
} = useStreamingServerSettingsInputs(streamingServer);
@ -119,6 +121,16 @@ const Settings = () => {
}
});
}, []);
const onCopyRemoteUrlClick = React.useCallback(() => {
if (streamingServer.remoteUrl) {
navigator.clipboard.writeText(streamingServer.remoteUrl);
toast.show({
type: 'success',
title: t('SETTINGS_REMOTE_URL_COPIED'),
timeout: 2500,
});
}
}, [streamingServer.remoteUrl]);
const sectionsContainerRef = React.useRef(null);
const generalSectionRef = React.useRef(null);
const playerSectionRef = React.useRef(null);
@ -542,6 +554,36 @@ const Settings = () => {
</Button>
</div>
</div>
{
streamingServerRemoteUrlInput.value !== null ?
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{t('SETTINGS_REMOTE_URL')}</div>
</div>
<div className={classnames(styles['option-input-container'], styles['configure-input-container'])}>
<div className={styles['label']} title={streamingServerRemoteUrlInput.value}>{streamingServerRemoteUrlInput.value}</div>
<Button className={styles['configure-button-container']} title={t('SETTINGS_COPY_REMOTE_URL')} onClick={onCopyRemoteUrlClick}>
<Icon className={styles['icon']} name={'link'} />
</Button>
</div>
</div>
:
null
}
{
profile.auth !== null && profile.auth.user !== null && remoteEndpointSelect !== null ?
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_HTTPS_ENDPOINT') }</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...remoteEndpointSelect}
/>
</div>
:
null
}
{
cacheSizeSelect !== null ?
<div className={styles['option-container']}>

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

@ -3,7 +3,7 @@
const React = require('react');
const { useTranslation } = require('react-i18next');
const { useServices } = require('stremio/services');
const { CONSTANTS, interfaceLanguages, languageNames, externalPlayerOptions } = require('stremio/common');
const { CONSTANTS, interfaceLanguages, languageNames, platform } = require('stremio/common');
const useProfileSettingsInputs = (profile) => {
const { t } = useTranslation();
@ -211,11 +211,17 @@ const useProfileSettingsInputs = (profile) => {
}
}), [profile.settings]);
const playInExternalPlayerSelect = React.useMemo(() => ({
options: externalPlayerOptions.map((opt) => {
opt.label = t(opt.label);
return opt;
}),
selected: [`${profile.settings.playerType || 'internal'}`],
options: CONSTANTS.EXTERNAL_PLAYERS
.filter(({ platforms }) => platforms.includes(platform.name))
.map(({ label, value }) => ({
value,
label: t(label),
})),
selected: [profile.settings.playerType],
renderLabelText: () => {
const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
},
onSelect: (event) => {
core.transport.dispatch({
action: 'Ctx',

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

@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const isEqual = require('lodash.isequal');
const { useServices } = require('stremio/services');
@ -53,7 +54,45 @@ const TORRENT_PROFILES = {
const useStreamingServerSettingsInputs = (streamingServer) => {
const { core } = useServices();
const { t } = useTranslation();
// TODO combine those useMemo in one
const streamingServerRemoteUrlInput = React.useMemo(() => ({
value: streamingServer.remoteUrl,
}), [streamingServer.remoteUrl]);
const remoteEndpointSelect = React.useMemo(() => {
if (streamingServer.settings?.type !== 'Ready' || streamingServer.networkInfo?.type !== 'Ready') {
return null;
}
return {
options: [
{
label: t('SETTINGS_DISABLED'),
value: null,
},
...streamingServer.networkInfo.content.availableInterfaces.map((address) => ({
label: address,
value: address,
}))
],
selected: [streamingServer.settings.content.remoteHttps],
onSelect: (event) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
remoteHttps: event.value,
}
}
});
}
};
}, [streamingServer.settings, streamingServer.networkInfo]);
const cacheSizeSelect = React.useMemo(() => {
if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
return null;
@ -75,7 +114,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
cacheSize: JSON.parse(event.value)
cacheSize: JSON.parse(event.value),
}
}
});
@ -121,14 +160,14 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
...JSON.parse(event.value)
...JSON.parse(event.value),
}
}
});
}
};
}, [streamingServer.settings]);
return { cacheSizeSelect, torrentProfileSelect };
return { streamingServerRemoteUrlInput, remoteEndpointSelect, cacheSizeSelect, torrentProfileSelect };
};
module.exports = useStreamingServerSettingsInputs;

4
src/services/KeyboardShortcuts/KeyboardShortcuts.js
View file

@ -35,12 +35,12 @@ function KeyboardShortcuts() {
}
case 'Digit4': {
event.preventDefault();
window.location = '#/settings';
window.location = '#/addons';
break;
}
case 'Digit5': {
event.preventDefault();
window.location = '#/addons';
window.location = '#/settings';
break;
}
case 'Backspace': {

11
src/types/models/Ctx.d.ts vendored
View file

@ -28,6 +28,7 @@ type Settings = {
seekTimeDuration: number,
seekShortTimeDuration: number,
streamingServerUrl: string,
remoteHttps: string | null,
streamingServerWarningDismissed: Date | null,
subtitlesBackgroundColor: string,
subtitlesBold: boolean,
@ -57,7 +58,17 @@ type NotificationItem = {
videoReleased: string,
}
type SearchHistoryItem = {
query: string,
deepLinks: {
search: string,
},
};
type SearchHistory = SearchHistoryItem[];
type Ctx = {
profile: Profile,
notifications: Notifications,
searchHistory: SearchHistory,
};

10
src/types/models/LocalSearch.d.ts vendored Normal file
View file

@ -0,0 +1,10 @@
type LocalSearchItem = {
query: string,
deepLinks: {
search: string,
},
};
type LocalSearch = {
items: LocalSearchItem[],
};

10
src/types/models/StremingServer.d.ts vendored
View file

@ -93,6 +93,12 @@ type Statistics = {
swarmSize: number,
};
type PlaybackDevice = {
id: string,
name: string,
type: string,
};
type Selected = {
transportUrl: string,
statistics: {
@ -102,9 +108,11 @@ type Selected = {
};
type StreamingServer = {
baseUrl: Loadable<string> | null,
baseUrl: string | null,
remoteUrl: string | null,
selected: Selected | null,
settings: Loadable<StreamingServerSettings> | null,
torrent: [string, Loadable<Torrent>] | null,
statistics: Loadable<Statistics> | null,
playbackDevices: Loadable<PlaybackDevice[]> | null,
};

4
src/types/types.d.ts vendored
View file

@ -54,7 +54,9 @@ type BehaviorHints = {
type PosterShape = 'square' | 'landscape' | 'poster' | null;
type Catalog<T, D = any> = {
title?: string,
label?: string,
name?: string,
type?: string,
content: T,
installed?: boolean,
deepLinks?: D,