Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: update icons

Browse source
This commit is contained in:
Tim 2023-06-09 22:16:15 +02:00
parent bdf4a7e173
commit 50b16590a6
76 changed files with 207 additions and 207 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
View file

@ -3,13 +3,13 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Image = require('stremio/common/Image');
const styles = require('./styles');
const AddonDetails = ({ className, id, name, version, logo, description, types, transportUrl, official }) => {
const renderLogoFallback = React.useCallback(() => (
<Icon className={styles['icon']} icon={'ic_addons'} />
<Icon className={styles['icon']} name={'addons'} />
), []);
return (
<div className={classnames(className, styles['addon-details-container'])}>

2
src/common/AddonDetailsModal/AddonDetails/styles.less
View file

@ -23,7 +23,7 @@
}
.icon {
fill: @color-secondaryvariant1-light3;
color: @color-secondaryvariant1-light3;
}
.name-container {

10
src/common/CONSTANTS.js
View file

@ -27,17 +27,17 @@ const TYPE_PRIORITIES = {
other: -Infinity
};
const ICON_FOR_TYPE = new Map([
['movie', 'ic_movies'],
['series', 'ic_series'],
['channel', 'ic_channels'],
['tv', 'ic_tv'],
['movie', 'movies'],
['series', 'series'],
['channel', 'channels'],
['tv', 'tv'],
['book', 'ic_book'],
['game', 'ic_games'],
['music', 'ic_music'],
['adult', 'ic_adult'],
['radio', 'ic_radio'],
['podcast', 'ic_podcast'],
['other', 'ic_movies'],
['other', 'movies'],
]);
module.exports = {

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

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
@ -13,10 +13,10 @@ const Checkbox = React.forwardRef(({ className, checked, children, ...props }, r
{
checked ?
<svg className={styles['icon']} viewBox={'0 0 100 100'}>
<Icon x={'10'} y={'10'} width={'80'} height={'80'} icon={'ic_check'} />
<Icon x={'10'} y={'10'} width={'80'} height={'80'} name={'checkmark'} />
</svg>
:
<Icon className={styles['icon']} icon={'ic_box_empty'} />
<Icon className={styles['icon']} name={'ic_box_empty'} />
}
{children}
</Button>

4
src/common/Checkbox/styles.less
View file

@ -5,7 +5,7 @@
.checkbox-container {
&:global(.checked) {
.icon {
fill: @color-surface-light5;
color: @color-surface-light5;
background-color: @color-primaryvariant1;
}
}
@ -14,6 +14,6 @@
display: block;
width: 1rem;
height: 1rem;
fill: @color-surface-light5;
color: @color-surface-light5;
}
}

10
src/common/MainNavBars/MainNavBars.js
View file

@ -7,11 +7,11 @@ const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
const styles = require('./styles');
const TABS = [
{ id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
{ id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' },
{ id: 'settings', label: 'SETTINGS', icon: 'ic_settings', href: '#/settings' },
{ id: 'addons', label: 'ADDONS', icon: 'ic_addons', href: '#/addons' }
{ id: 'board', label: 'Board', icon: 'home', href: '#/' },
{ id: 'discover', label: 'Discover', icon: 'discover', href: '#/discover' },
{ id: 'library', label: 'Library', icon: 'library', href: '#/library' },
{ id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
{ id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' }
];
const MainNavBars = React.memo(({ className, route, query, children }) => {

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

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const filterInvalidDOMProps = require('filter-invalid-dom-props').default;
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const Multiselect = require('stremio/common/Multiselect');
@ -56,11 +56,11 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
const renderPosterFallback = React.useCallback(() => (
<Icon
className={styles['placeholder-icon']}
icon={ICON_FOR_TYPE.has(type) ? ICON_FOR_TYPE.get(type) : ICON_FOR_TYPE.get('other')}
name={ICON_FOR_TYPE.has(type) ? ICON_FOR_TYPE.get(type) : ICON_FOR_TYPE.get('other')}
/>
), [type]);
const renderMenuLabelContent = React.useCallback(() => (
<Icon className={styles['icon']} icon={'ic_more'} />
<Icon className={styles['icon']} name={'more-vertical'} />
), []);
return (
<Button title={name} href={href} {...filterInvalidDOMProps(props)} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} onClick={metaItemOnClick}>

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

@ -76,7 +76,7 @@
flex: none;
width: 80%;
height: 50%;
fill: @color-background-light3-90;
color: @color-background-light3-90;
}
}
@ -96,11 +96,11 @@
filter: drop-shadow(0 0 0.5rem @color-background);
.play-icon-circle-centered-background {
fill: @color-accent4-90;
color: @color-accent4-90;
}
.play-icon-circle-centered-icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}
}
@ -149,7 +149,7 @@
display: block;
width: 100%;
height: 100%;
fill: @color-surface-light1-90;
color: @color-surface-light1-90;
}
.popup-menu-container {

4
src/common/MetaPreview/ActionButton/ActionButton.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
@ -13,7 +13,7 @@ const ActionButton = ({ className, icon, label, ...props }) => {
{
typeof icon === 'string' && icon.length > 0 ?
<div className={styles['icon-container']}>
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
</div>
:
null

2
src/common/MetaPreview/ActionButton/styles.less
View file

@ -26,7 +26,7 @@
display: block;
width: 100%;
height: 100%;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}

12
src/common/MetaPreview/MetaPreview.js
View file

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const UrlUtils = require('url');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const ModalDialog = require('stremio/common/ModalDialog');
@ -147,7 +147,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
target={'_blank'}
{...(compact ? { tabIndex: -1 } : null)}
>
<Icon className={styles['icon']} icon={'ic_imdbnoframe'} />
<Icon className={styles['icon']} name={'imdb'} />
<div className={styles['label']}>{linksGroups.get(CONSTANTS.IMDB_LINK_CATEGORY).label}</div>
</Button>
:
@ -193,7 +193,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
typeof toggleInLibrary === 'function' ?
<ActionButton
className={styles['action-button']}
icon={inLibrary ? 'ic_removelib' : 'ic_addlib'}
icon={inLibrary ? 'remove-from-library' : 'add-to-library'}
label={inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
tabIndex={compact ? -1 : 0}
onClick={toggleInLibrary}
@ -205,7 +205,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
typeof trailerHref === 'string' ?
<ActionButton
className={styles['action-button']}
icon={'ic_movies'}
icon={'trailer'}
label={t('TRAILER')}
tabIndex={compact ? -1 : 0}
href={trailerHref}
@ -217,7 +217,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
typeof showHref === 'string' && compact ?
<ActionButton
className={styles['action-button']}
icon={'ic_play'}
icon={'play'}
label={t('SHOW')}
tabIndex={compact ? -1 : 0}
href={showHref}
@ -230,7 +230,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
<React.Fragment>
<ActionButton
className={styles['action-button']}
icon={'ic_share'}
icon={'share'}
label={t('CTX_SHARE')}
tabIndex={compact ? -1 : 0}
onClick={openShareModal}

2
src/common/MetaPreview/styles.less
View file

@ -141,7 +141,7 @@
width: 3rem;
height: 1.1rem;
margin-right: 1rem;
fill: @color-surface-90;
color: @color-surface-90;
}
.label {

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

@ -5,7 +5,7 @@ const ReactIs = require('react-is');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
@ -28,7 +28,7 @@ const MetaRow = ({ className, title, message, items, itemComponent, deepLinks })
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']} icon={'ic_arrow_thin_right'} />
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null

4
src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const styles = require('./styles');
@ -21,7 +21,7 @@ const MetaRowPlaceholder = ({ className, title, deepLinks }) => {
deepLinks && typeof deepLinks.discover === 'string' ?
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null

2
src/common/MetaRow/MetaRowPlaceholder/styles.less
View file

@ -49,7 +49,7 @@
flex: none;
height: 1.3rem;
margin-left: 0.5rem;
fill: var(--color-placeholder-text);
color: var(--color-placeholder-text);
}
}
}

4
src/common/MetaRow/styles.less
View file

@ -40,7 +40,7 @@
}
.icon {
fill: @color-secondaryvariant2-light2-90;
color: @color-secondaryvariant2-light2-90;
}
}
@ -57,7 +57,7 @@
flex: none;
height: 1.3rem;
margin-left: 0.5rem;
fill: @color-secondaryvariant2-light1-90;
color: @color-secondaryvariant2-light1-90;
}
}
}

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

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useRouteFocused, useModalsContainer } = require('stremio-router');
const Button = require('stremio/common/Button');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Modal } = require('stremio-router');
const styles = require('./styles');
@ -60,7 +60,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
<Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_x'} />
<Icon className={styles['icon']} name={'close'} />
</Button>
{
typeof title === 'string' && title.length > 0 ?
@ -78,7 +78,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
:
null
}

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

@ -29,12 +29,12 @@
display: block;
width: 100%;
height: 100%;
fill: @color-surface-dark1-90;
color: @color-surface-dark1-90;
}
&:hover, &:focus {
.icon {
fill: @color-surface-light1-90;
color: @color-surface-light1-90;
}
}
@ -105,7 +105,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: .5rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {

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

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Popup = require('stremio/common/Popup');
const ModalDialog = require('stremio/common/ModalDialog');
@ -104,7 +104,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
title
}
</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_down'} />
<Icon className={styles['icon']} name={'caret-down'} />
</React.Fragment>
}
{children}

4
src/common/Multiselect/styles.less
View file

@ -20,7 +20,7 @@
}
.icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}
@ -36,7 +36,7 @@
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
.popup-menu-container {

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

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const useFullscreen = require('stremio/common/useFullscreen');
@ -19,7 +19,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
<Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
<Icon className={styles['icon']} icon={'ic_more'} />
<Icon className={styles['icon']} name={'more-vertical'} />
{children}
</Button>
), []);
@ -28,7 +28,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
{
backButton ?
<Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_back_ios'} />
<Icon className={styles['icon']} name={'chevron-back'} />
</Button>
:
<div className={styles['logo-container']}>
@ -56,7 +56,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
{
addonsButton ?
<Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_addons'} />
<Icon className={styles['icon']} name={'addons'} />
</Button>
:
null
@ -64,7 +64,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
{
fullscreenButton ?
<Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
<Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
</Button>
:
null

12
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services');
const Button = require('stremio/common/Button');
const useFullscreen = require('stremio/common/useFullscreen');
@ -59,25 +59,25 @@ const NavMenuContent = ({ onClick }) => {
</div>
<div className={styles['nav-menu-section']}>
<Button className={styles['nav-menu-option-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
<Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
<div className={styles['nav-menu-option-label']}>{fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')}</div>
</Button>
</div>
<div className={styles['nav-menu-section']}>
<Button className={styles['nav-menu-option-container']} title={ t('SETTINGS') } href={'#/settings'}>
<Icon className={styles['icon']} icon={'ic_settings'} />
<Icon className={styles['icon']} name={'settings'} />
<div className={styles['nav-menu-option-label']}>{ t('SETTINGS') }</div>
</Button>
<Button className={styles['nav-menu-option-container']} title={ t('ADDONS') } href={'#/addons'}>
<Icon className={styles['icon']} icon={'ic_addons'} />
<Icon className={styles['icon']} name={'addons'} />
<div className={styles['nav-menu-option-label']}>{ t('ADDONS') }</div>
</Button>
<Button className={styles['nav-menu-option-container']} title={ t('PLAY_URL_MAGNET_LINK') } onClick={onPlayMagnetLinkClick}>
<Icon className={styles['icon']} icon={'ic_magnet'} />
<Icon className={styles['icon']} name={'magnet-link'} />
<div className={styles['nav-menu-option-label']}>{ t('PLAY_URL_MAGNET_LINK') }</div>
</Button>
<Button className={styles['nav-menu-option-container']} title={ t('HELP_FEEDBACK') } href={'https://stremio.zendesk.com/'} target={'_blank'}>
<Icon className={styles['icon']} icon={'ic_help'} />
<Icon className={styles['icon']} name={'help'} />
<div className={styles['nav-menu-option-label']}>{ t('HELP_FEEDBACK') }</div>
</Button>
</div>

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

@ -86,7 +86,7 @@
width: 1.4rem;
height: 1.4rem;
margin: 1.3rem;
fill: @color-secondaryvariant2-light1-90;
color: @color-secondaryvariant2-light1-90;
}
.nav-menu-option-label {

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

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
const Button = require('stremio/common/Button');
const TextInput = require('stremio/common/TextInput');
@ -60,7 +60,7 @@ const SearchBar = ({ className, query, active }) => {
</div>
}
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
<Icon className={styles['icon']} icon={'ic_search_link'} />
<Icon className={styles['icon']} name={'ic_search_link'} />
</Button>
</label>
);
@ -80,7 +80,7 @@ const SearchBarFallback = ({ className }) => {
<div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
</div>
<Button className={styles['submit-button-container']} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_search_link'} />
<Icon className={styles['icon']} name={'ic_search_link'} />
</Button>
</label>
);

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

@ -43,7 +43,7 @@
&:hover {
.icon {
fill: @color-secondaryvariant2-light1-90;
color: @color-secondaryvariant2-light1-90;
}
}
@ -51,7 +51,7 @@
flex: none;
width: 1.7rem;
height: 1.7rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
}
}

4
src/common/NavBar/HorizontalNavBar/styles.less
View file

@ -80,7 +80,7 @@
background-color: @color-background-light3;
.icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}
@ -88,7 +88,7 @@
flex: none;
width: 1.7rem;
height: 1.7rem;
fill: @color-secondaryvariant2-light1-90;
color: @color-secondaryvariant2-light1-90;
}
}
}

6
src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const styles = require('./styles');
@ -11,7 +11,7 @@ const styles = require('./styles');
const NavTabButton = ({ className, logo, icon, label, href, selected, onClick }) => {
const renderLogoFallback = React.useCallback(() => (
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
:
null
), [icon]);
@ -27,7 +27,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
/>
:
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
:
null
}

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

@ -21,7 +21,7 @@
}
.icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {
@ -34,7 +34,7 @@
width: 1.7rem;
height: 1.7rem;
margin-bottom: 0.5rem;
fill: @color-secondary-light5-90;
color: @color-secondary-light5-90;
}
.label {

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

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
@ -22,13 +22,13 @@ const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
return (
<div {...props} className={classnames(className, styles['pagination-input-container'])} >
<Button className={styles['prev-button-container']} title={'Previous page'} data-value={'prev'} onClick={prevNextButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_arrow_left'} />
<Icon className={styles['icon']} name={'chevron-back'} />
</Button>
<div className={styles['label-container']} title={label}>
<div className={styles['label']}>{label}</div>
</div>
<Button className={styles['next-button-container']} title={'Next page'} data-value={'next'} onClick={prevNextButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_arrow_right'} />
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
</div>
);

2
src/common/PaginationInput/styles.less
View file

@ -15,7 +15,7 @@
.icon {
display: block;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
}

4
src/common/SearchBar/SearchBar.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const TextInput = require('stremio/common/TextInput');
const SearchBarPlaceholder = require('./SearchBarPlaceholder');
const styles = require('./styles');
@ -18,7 +18,7 @@ const SearchBar = ({ className, title, value, onChange }) => {
value={value}
onChange={onChange}
/>
<Icon className={styles['icon']} icon={'ic_search'} />
<Icon className={styles['icon']} name={'search'} />
</label>
);
};

4
src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js
View file

@ -3,14 +3,14 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const styles = require('./styles');
const SearchBarPlaceholder = ({ className, title }) => {
return (
<div className={classnames(className, styles['search-bar-container'])}>
<div className={styles['search-input']}>{title}</div>
<Icon className={styles['icon']} icon={'ic_search'} />
<Icon className={styles['icon']} name={'search'} />
</div>
);
};

2
src/common/SearchBar/SearchBarPlaceholder/styles.less
View file

@ -22,6 +22,6 @@
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: var(--color-placeholder-background);
color: var(--color-placeholder-background);
}
}

2
src/common/SearchBar/styles.less
View file

@ -38,6 +38,6 @@
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
}

8
src/common/SharePrompt/SharePrompt.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const Button = require('stremio/common/Button');
@ -44,11 +44,11 @@ const SharePrompt = ({ className, url }) => {
<div className={classnames(className, styles['share-prompt-container'])}>
<div className={styles['buttons-container']}>
<Button className={classnames(styles['button-container'], styles['facebook-button'])} title={'Facebook'} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
<Icon className={styles['icon']} name={'facebook'} />
<div className={styles['label']}>Facebook</div>
</Button>
<Button className={classnames(styles['button-container'], styles['twitter-button'])} title={'Twitter'} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
<Icon className={styles['icon']} icon={'ic_twitter'} />
<Icon className={styles['icon']} name={'ic_twitter'} />
<div className={styles['label']}>Twitter</div>
</Button>
</div>
@ -63,7 +63,7 @@ const SharePrompt = ({ className, url }) => {
tabIndex={-1}
/>
<Button className={styles['copy-button']} title={'Copy to clipboard'} onClick={copyToClipboard}>
<Icon className={styles['icon']} icon={'ic_link'} />
<Icon className={styles['icon']} name={'link'} />
<div className={styles['label']}>{ t('COPY') }</div>
</Button>
</div>

4
src/common/SharePrompt/styles.less
View file

@ -23,7 +23,7 @@
flex: none;
height: 1.2rem;
margin-right: 1rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {
@ -92,7 +92,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {

10
src/common/Toast/ToastItem/ToastItem.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
@ -16,8 +16,8 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
}, [props.type]);
const icon = React.useMemo(() => {
return typeof props.icon === 'string' ? props.icon :
type === 'success' ? 'ic_check' :
type === 'error' ? 'ic_warning' :
type === 'success' ? 'checkmark' :
type === 'error' ? 'warning' :
null;
}, [type, props.icon]);
const toastOnClick = React.useCallback((event) => {
@ -54,7 +54,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
{
typeof icon === 'string' && icon.length > 0 ?
<div className={styles['icon-container']}>
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
</div>
:
null
@ -74,7 +74,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
}
</div>
<Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_x'} />
<Icon className={styles['icon']} name={'close'} />
</Button>
</Button>
);

6
src/common/Toast/ToastItem/styles.less
View file

@ -18,7 +18,7 @@
background-color: @color-accent3;
.icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}
}
@ -28,7 +28,7 @@
background-color: @color-accent2;
.icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}
}
@ -43,7 +43,7 @@
display: block;
width: 100%;
height: 100%;
fill: @color-background-dark5-90;
color: @color-background-dark5-90;
}
}

8
src/routes/Addons/Addon/Addon.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image } = require('stremio/common');
const styles = require('./styles');
@ -51,7 +51,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
}
}, [onToggle, dataset]);
const renderLogoFallback = React.useCallback(() => (
<Icon className={styles['icon']} icon={'ic_addons'} />
<Icon className={styles['icon']} name={'addons'} />
), []);
return (
<Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
@ -98,7 +98,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
{
!behaviorHints.configurationRequired && behaviorHints.configurable ?
<Button className={styles['configure-button-container']} title={t('ADDON_CONFIGURE')} tabIndex={-1} onClick={configureButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_settings'} />
<Icon className={styles['icon']} name={'settings'} />
</Button>
:
null
@ -113,7 +113,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
</Button>
</div>
<Button className={styles['share-button-container']} title={t('SHARE_ADDON')} tabIndex={-1} onClick={shareButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_share'} />
<Icon className={styles['icon']} name={'share'} />
<div className={styles['label']}>{ t('SHARE_ADDON') }</div>
</Button>
</div>

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

@ -31,7 +31,7 @@
width: 100%;
height: 100%;
padding: 1rem;
fill: @color-secondaryvariant1-light3;
color: @color-secondaryvariant1-light3;
}
}
@ -150,7 +150,7 @@
}
.icon {
fill: @color-surface-light5;
color: @color-surface-light5;
}
}
@ -170,7 +170,7 @@
.share-button-container {
&:hover {
.icon {
fill: @color-secondaryvariant1-light1;
color: @color-secondaryvariant1-light1;
}
.label {
@ -180,7 +180,7 @@
}
.icon {
fill: @color-secondaryvariant1-dark1-60;
color: @color-secondaryvariant1-dark1-60;
}
.label {

8
src/routes/Addons/Addons.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState, withCoreSuspender } = require('stremio/common');
const Addon = require('./Addon');
const useInstalledAddons = require('./useInstalledAddons');
@ -72,7 +72,7 @@ const Addons = ({ urlParams, queryParams }) => {
);
}, [search]);
const renderLogoFallback = React.useCallback(() => (
<Icon className={styles['icon']} icon={'ic_addons'} />
<Icon className={styles['icon']} name={'addons'} />
), []);
React.useLayoutEffect(() => {
closeAddAddonModal();
@ -84,7 +84,7 @@ const Addons = ({ urlParams, queryParams }) => {
<div className={styles['addons-content']}>
<div className={styles['selectable-inputs-container']}>
<Button className={styles['add-button-container']} title={t('ADD_ADDON')} onClick={openAddAddonModal}>
<Icon className={styles['icon']} icon={'ic_plus'} />
<Icon className={styles['icon']} name={'add'} />
<div className={styles['add-button-label']}>{ t('ADD_ADDON') }</div>
</Button>
{selectInputs.map((selectInput, index) => (
@ -102,7 +102,7 @@ const Addons = ({ urlParams, queryParams }) => {
onChange={searchInputOnChange}
/>
<Button className={styles['filter-button']} title={'All filters'} onClick={openFiltersModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
<Icon className={styles['filter-icon']} name={'filters'} />
</Button>
</div>
{

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

@ -67,7 +67,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
fill: @color-surface-light5;
color: @color-surface-light5;
}
.add-button-label {
@ -116,7 +116,7 @@
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
}
}
@ -229,7 +229,7 @@
}
.icon {
fill: @color-secondaryvariant1-light3;
color: @color-secondaryvariant1-light3;
}
.name-container {

6
src/routes/Discover/Discover.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services');
const { AddonDetailsModal, DelayedRenderer, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const useDiscover = require('./useDiscover');
@ -92,7 +92,7 @@ const Discover = ({ urlParams, queryParams }) => {
/>
))}
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
<Icon className={styles['filter-icon']} name={'filters'} />
</Button>
</div>
{
@ -142,7 +142,7 @@ const Discover = ({ urlParams, queryParams }) => {
name={metaItem.name}
poster={metaItem.poster}
posterShape={metaItem.posterShape}
playIcon={selectedMetaItemIndex === index}
playname={selectedMetaItemIndex === index}
deepLinks={metaItem.deepLinks}
data-index={index}
onClick={metaItemOnClick}

4
src/routes/Discover/styles.less
View file

@ -84,7 +84,7 @@
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
}
}
@ -260,7 +260,7 @@
}
.multiselect-icon {
fill: @color-background-dark2-90;
color: @color-background-dark2-90;
}
}
}

2
src/routes/Intro/ConsentCheckbox/styles.less
View file

@ -21,7 +21,7 @@
flex: none;
width: 1.2rem;
height: 1.2rem;
fill: @color-surface-dark5;
color: @color-surface-dark5;
}
.label {

8
src/routes/Intro/Intro.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Modal, useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Button, Image, useBinaryState } = require('stremio/common');
@ -283,10 +283,10 @@ const Intro = ({ queryParams }) => {
<div className={styles['form-container']}>
<div className={styles['logo-container']}>
<Image className={styles['logo']} src={require('/images/stremio_symbol.png')} alt={' '} />
<Icon className={styles['name']} icon={'ic_stremio'} />
<Icon className={styles['name']} name={'ic_stremio'} />
</div>
<Button className={classnames(styles['form-button'], styles['facebook-button'])} onClick={loginWithFacebook}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
<Icon className={styles['icon']} name={'facebook'} />
<div className={styles['label']}>Continue with Facebook</div>
</Button>
{
@ -396,7 +396,7 @@ const Intro = ({ queryParams }) => {
loaderModalOpen ?
<Modal className={styles['loading-modal-container']}>
<div className={styles['loader-container']}>
<Icon className={styles['icon']} icon={'ic_user'} />
<Icon className={styles['icon']} name={'person'} />
<div className={styles['label']}>Authenticating...</div>
</div>
</Modal>

6
src/routes/Intro/styles.less
View file

@ -43,7 +43,7 @@
flex: none;
width: 8rem;
height: 4rem;
fill: @color-surface-dark4-90;
color: @color-surface-dark4-90;
}
}
@ -59,7 +59,7 @@
width: 1rem;
height: 2rem;
margin-right: 1rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {
@ -226,7 +226,7 @@
width: 5rem;
height: 5rem;
margin-bottom: 1rem;
fill: @color-background-dark5-90;
color: @color-background-dark5-90;
animation: 1s linear infinite alternate flash;
}

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

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const NotFound = require('stremio/routes/NotFound');
const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common');
const useLibrary = require('./useLibrary');
@ -64,7 +64,7 @@ const Library = ({ model, urlParams, queryParams }) => {
<PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
}
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
<Icon className={styles['filter-icon']} name={'filters'} />
</Button>
</div>
:

4
src/routes/Library/styles.less
View file

@ -67,7 +67,7 @@
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
}
@ -85,7 +85,7 @@
.pagination-prev-button-container, .pagination-next-button-container {
.pagination-button-icon {
fill: @color-surface-dark5-90;
color: @color-surface-dark5-90;
}
}

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

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image, PlayIconCircleCentered, useProfile, platform, useStreamingServer, useToast } = require('stremio/common');
const { useServices } = require('stremio/services');
const StreamPlaceholder = require('./StreamPlaceholder');
@ -58,7 +58,7 @@ const Stream = ({ className, addonName, name, description, thumbnail, progress,
return href === deepLinks.externalPlayer.href ? deepLinks.externalPlayer.fileName : false;
}, [href]);
const renderThumbnailFallback = React.useCallback(() => (
<Icon className={styles['placeholder-icon']} icon={'ic_broken_link'} />
<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}>

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

@ -48,7 +48,7 @@
width: 5rem;
height: 5rem;
padding: 0.5rem;
fill: @color-secondaryvariant1-light3-90;
color: @color-secondaryvariant1-light3-90;
}
.addon-name {

4
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image, Multiselect } = require('stremio/common');
const { useServices } = require('stremio/services');
const Stream = require('./Stream');
@ -118,7 +118,7 @@ const StreamsList = ({ className, ...props }) => {
</React.Fragment>
}
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
<Icon className={styles['icon']} icon={'ic_addons'} />
<Icon className={styles['icon']} name={'addons'} />
<div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
</Button>
</div>

4
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -56,7 +56,7 @@
}
& >.multiselect-icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.multiselect-menu-container {
@ -92,7 +92,7 @@
width: 2rem;
height: 2rem;
margin-right: 1rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {

6
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { t } = require('i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Multiselect } = require('stremio/common');
const SeasonsBarPlaceholder = require('./SeasonsBarPlaceholder');
const styles = require('./styles');
@ -49,7 +49,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
return (
<div className={classnames(className, styles['seasons-bar-container'])}>
<Button className={styles['prev-season-button']} title={'Previous season'} data-action={'prev'} onClick={prevNextButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_arrow_thin_left'} />
<Icon className={styles['icon']} name={'chevron-back'} />
<div className={styles['label']}>Prev</div>
</Button>
<Multiselect
@ -62,7 +62,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
/>
<Button className={styles['next-season-button']} title={'Next season'} data-action={'next'} onClick={prevNextButtonOnClick}>
<div className={styles['label']}>Next</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
</div>
);

8
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
View file

@ -3,23 +3,23 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const styles = require('./styles');
const SeasonsBarPlaceholder = ({ className }) => {
return (
<div className={classnames(className, styles['seasons-bar-placeholder-container'])}>
<div className={styles['prev-season-button']}>
<Icon className={styles['icon']} icon={'ic_arrow_thin_left'} />
<Icon className={styles['icon']} name={'chevron-back'} />
<div className={styles['label']}>Prev</div>
</div>
<div className={styles['seasons-popup-label-container']}>
<div className={styles['seasons-popup-label']}>Season 1</div>
<Icon className={styles['seasons-popup-icon']} icon={'ic_arrow_thin_down'} />
<Icon className={styles['seasons-popup-icon']} name={'caret-down'} />
</div>
<div className={styles['next-season-button']}>
<div className={styles['label']}>Next</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
<Icon className={styles['icon']} name={'chevron-forward'} />
</div>
</div>
);

4
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
View file

@ -24,7 +24,7 @@
display: block;
width: 1.5rem;
height: 1.5rem;
fill: var(--color-placeholder-background);
color: var(--color-placeholder-background);
}
.label {
@ -54,7 +54,7 @@
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: var(--color-placeholder-background);
color: var(--color-placeholder-background);
}
}
}

6
src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
View file

@ -31,7 +31,7 @@
}
.icon {
fill: @color-surface-light2-90;
color: @color-surface-light2-90;
}
}
@ -55,7 +55,7 @@
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-surface-90;
color: @color-surface-90;
}
}
@ -73,7 +73,7 @@
}
&>.multiselect-icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.multiselect-menu-container {

4
src/routes/MetaDetails/VideosList/Video/Video.js
View file

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useServices } = require('stremio/services');
const { useRouteFocused } = require('stremio-router');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image, Popup, useBinaryState } = require('stremio/common');
const VideoPlaceholder = require('./VideoPlaceholder');
const styles = require('./styles');
@ -71,7 +71,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
renderFallback={() => (
<Icon
className={styles['placeholder-icon']}
icon={'ic_stremio_tray'}
name={'symbol'}
/>
)}
/>

2
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -40,7 +40,7 @@
width: 7.5rem;
height: 5rem;
padding: 1rem;
fill: @color-surface-light5;
color: @color-surface-light5;
background-color: @color-surface-light5-40;
opacity: 0.25;
}

2
src/routes/MetaDetails/useMetaExtensionTabs.js
View file

@ -9,7 +9,7 @@ const useMetaExtensionTabs = (metaExtensions) => {
id: extension.url,
label: extension.addon.manifest.name,
logo: extension.addon.manifest.logo,
icon: 'ic_addons',
icon: 'addons',
onClick: () => setSelected(extension)
}));
}, [metaExtensions]);

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

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button } = require('stremio/common');
const { useServices } = require('stremio/services');
const SeekBar = require('./SeekBar');
@ -146,12 +146,12 @@ const ControlBar = ({
/>
<div className={styles['control-bar-buttons-container']}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof paused !== 'boolean' })} title={paused ? t('PLAYER_PLAY') : t('PLAYER_PAUSE')} tabIndex={-1} onClick={onPlayPauseButtonClick}>
<Icon className={styles['icon']} icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'} />
<Icon className={styles['icon']} name={typeof paused !== 'boolean' || paused ? 'play' : 'pause'} />
</Button>
{
nextVideo !== null ?
<Button className={classnames(styles['control-bar-button'])} title={t('PLAYER_NEXT_VIDEO')} tabIndex={-1} onClick={onNextVideoButtonClick}>
<Icon className={styles['icon']} icon={'ic_play_next'} />
<Icon className={styles['icon']} name={'next'} />
</Button>
:
null
@ -159,12 +159,12 @@ const ControlBar = ({
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof muted !== 'boolean' })} title={muted ? t('PLAYER_UNMUTE') : t('PLAYER_MUTE')} tabIndex={-1} onClick={onMuteButtonClick}>
<Icon
className={styles['icon']}
icon={
(typeof muted === 'boolean' && muted) ? 'ic_volume0' :
(volume === null || isNaN(volume)) ? 'ic_volume3' :
volume < 30 ? 'ic_volume1' :
volume < 70 ? 'ic_volume2' :
'ic_volume3'
name={
(typeof muted === 'boolean' && muted) ? 'volume-mute' :
(volume === null || isNaN(volume)) ? 'volume-off' :
volume < 30 ? 'volume-low' :
volume < 70 ? 'volume-medium' :
'volume-high'
}
/>
</Button>
@ -175,34 +175,34 @@ const ControlBar = ({
/>
<div className={styles['spacing']} />
<Button className={styles['control-bar-buttons-menu-button']} onClick={toogleButtonsMenu}>
<Icon className={styles['icon']} icon={'ic_more'} />
<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}>
<Icon className={styles['icon']} icon={'ic_network'} />
<Icon className={styles['icon']} name={'network'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onSpeedButtonClick}>
<Icon className={styles['icon']} icon={'ic_speedometer'} />
<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}>
<Icon className={styles['icon']} icon={'ic_info'} />
<Icon className={styles['icon']} name={'about'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
<Icon className={styles['icon']} icon={'ic_cast'} />
<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}>
<Icon className={styles['icon']} icon={'ic_sub'} />
<Icon className={styles['icon']} name={'subtitles'} />
</Button>
{
metaItem?.content?.videos?.length > 0 ?
<Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onVideosButtonClick}>
<Icon className={styles['icon']} icon={'ic_videos'} />
<Icon className={styles['icon']} name={'episodes'} />
</Button>
:
null
}
<Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onOptionsButtonMouseDown} onClick={onOptionsButtonClick}>
<Icon className={styles['icon']} icon={'ic_more'} />
<Icon className={styles['icon']} name={'more-horizontal'} />
</Button>
</div>
</div>

4
src/routes/Player/ControlBar/SeekBar/styles.less
View file

@ -15,7 +15,7 @@
&:hover, &:global(.active) {
.slider:not(:global(.disabled)) {
.slider-thumb {
fill: @color-surface-light5;
color: @color-surface-light5;
}
}
}
@ -48,7 +48,7 @@
margin: 0 var(--thumb-size);
.slider-thumb {
fill: transparent;
color: transparent;
}
}
}

6
src/routes/Player/ControlBar/styles.less
View file

@ -28,7 +28,7 @@
&:global(.disabled) {
.icon {
fill: @color-surface;
color: @color-surface;
}
}
@ -36,7 +36,7 @@
flex: none;
width: 3rem;
height: 2rem;
fill: @color-surface-light5;
color: @color-surface-light5;
}
}
@ -66,7 +66,7 @@
flex: none;
width: 3rem;
height: 2rem;
fill: @color-surface-light5;
color: @color-surface-light5;
}
}

8
src/routes/Player/NextVideoPopup/NextVideoPopup.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Image, Button, CONSTANTS } = require('stremio/common');
const styles = require('./styles');
@ -26,7 +26,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onPlayNextV
return metaItem !== null && typeof metaItem.type === 'string' ?
<Icon
className={styles['placeholder-icon']}
icon={CONSTANTS.ICON_FOR_TYPE.has(metaItem.type) ? CONSTANTS.ICON_FOR_TYPE.get(metaItem.type) : CONSTANTS.ICON_FOR_TYPE.get('other')}
name={CONSTANTS.ICON_FOR_TYPE.has(metaItem.type) ? CONSTANTS.ICON_FOR_TYPE.get(metaItem.type) : CONSTANTS.ICON_FOR_TYPE.get('other')}
/>
:
null;
@ -78,11 +78,11 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onPlayNextV
</div>
<div className={styles['buttons-container']}>
<Button className={styles['button-container']} onClick={onDismissButtonClick}>
<Icon className={styles['icon']} icon={'ic_x'} />
<Icon className={styles['icon']} name={'close'} />
<div className={styles['label']}>Dismiss</div>
</Button>
<Button ref={watchNowButtonRef} className={classnames(styles['button-container'], styles['play-button'])} onClick={onWatchNowButtonClick}>
<Icon className={styles['icon']} icon={'ic_play'} />
<Icon className={styles['icon']} name={'play'} />
<div className={styles['label']}>Watch Now</div>
</Button>
</div>

6
src/routes/Player/NextVideoPopup/styles.less
View file

@ -40,7 +40,7 @@
flex: none;
width: 80%;
height: 50%;
fill: @color-background-light3-90;
color: @color-background-light3-90;
}
}
@ -87,7 +87,7 @@
background-color: @color-accent3;
.icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {
@ -104,7 +104,7 @@
width: 1.4rem;
height: 1.4rem;
margin-right: 1rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}
.label {

4
src/routes/Player/OptionsMenu/Option/Option.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button } = require('stremio/common');
const styles = require('./styles');
@ -15,7 +15,7 @@ const Option = ({ icon, label, deviceId, disabled, onClick }) => {
}, [onClick, deviceId]);
return (
<Button className={classnames(styles['option-container'], { 'disabled': disabled })} disabled={disabled} onClick={onButtonClick}>
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
<div className={styles['label']}>{ label }</div>
</Button>
);

2
src/routes/Player/OptionsMenu/Option/styles.less
View file

@ -13,7 +13,7 @@
width: 1.4rem;
height: 1.4rem;
margin: 1.3rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {

4
src/routes/Player/OptionsMenu/OptionsMenu.js
View file

@ -73,7 +73,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
{
streamingUrl || downloadUrl ?
<Option
icon={'ic_link'}
icon={'link'}
label={t('CTX_COPY_STREAM_LINK')}
disabled={stream === null}
onClick={onCopyStreamButtonClick}
@ -96,7 +96,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
streamingUrl && externalDevices.map(({ id, name }) => (
<Option
key={id}
icon={'ic_vlc'}
icon={'vlc'}
label={t('PLAYER_PLAY_IN', { device: name })}
deviceId={id}
disabled={stream === null}

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

@ -9,7 +9,7 @@ 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 Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const BufferingLoader = require('./BufferingLoader');
const ControlBar = require('./ControlBar');
const NextVideoPopup = require('./NextVideoPopup');
@ -640,7 +640,7 @@ const Player = ({ urlParams, queryParams }) => {
{
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']} icon={'ic_downloads'} />
<Icon className={styles['icon']} name={'ic_downloads'} />
<div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
</Button>
:

6
src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button } = require('stremio/common');
const styles = require('./styles');
@ -24,11 +24,11 @@ const DiscreteSelectInput = ({ className, value, label, disabled, dataset, onCha
<div className={styles['header']}>{label}</div>
<div className={styles['input-container']} title={disabled ? `${label} is not configurable` : null}>
<Button className={classnames(styles['button-container'], { 'disabled': disabled })} data-type={'decrement'} onClick={buttonOnClick}>
<Icon className={styles['icon']} icon={'ic_minus'} />
<Icon className={styles['icon']} name={'remove'} />
</Button>
<div className={styles['option-label']} title={value}>{value}</div>
<Button className={classnames(styles['button-container'], { 'disabled': disabled })} data-type={'increment'} onClick={buttonOnClick}>
<Icon className={styles['icon']} icon={'ic_plus'} />
<Icon className={styles['icon']} name={'add'} />
</Button>
</div>
</div>

2
src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
View file

@ -36,7 +36,7 @@
display: block;
width: 100%;
height: 100%;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}

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

@ -84,7 +84,7 @@ html:not(.active-slider-within) {
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {
@ -119,7 +119,7 @@ html:not(.active-slider-within) {
}
.nav-bar-icon {
fill: @color-surface-light5;
color: @color-surface-light5;
}
}

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

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Image, MainNavBars, MetaRow, MetaItem, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const useSearch = require('./useSearch');
const styles = require('./styles');
@ -51,11 +51,11 @@ const Search = ({ queryParams }) => {
query === null ?
<div className={classnames(styles['search-hints-container'], 'animation-fade-in')}>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} icon={'ic_movies'} />
<Icon className={styles['icon']} name={'movies'} />
<div className={styles['label']}>{ t('SEARCH_EXPLANATION_CONTENT') }</div>
</div>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} icon={'ic_actor'} />
<Icon className={styles['icon']} name={'actor'} />
<div className={styles['label']}>{ t('SEARCH_EXPLANATION_PEOPLE') }</div>
</div>
</div>

2
src/routes/Search/styles.less
View file

@ -48,7 +48,7 @@
width: 6rem;
height: 6rem;
margin-bottom: 2rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {

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

@ -4,7 +4,7 @@ const React = require('react');
const classnames = require('classnames');
const throttle = require('lodash.throttle');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, useStreamingServer, useBinaryState, withCoreSuspender, useToast } = require('stremio/common');
@ -259,7 +259,7 @@ const Settings = () => {
<div className={styles['label']}>Trakt Scrobbling</div>
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Authenticate'} disabled={profile.auth === null} tabIndex={-1} onClick={toggleTraktOnClick}>
<Icon className={styles['icon']} icon={'ic_trakt'} />
<Icon className={styles['icon']} name={'trakt'} />
<div className={styles['label']}>
{ profile.auth !== null && profile.auth.user !== null && profile.auth.user.trakt !== null ? t('LOG_OUT') : t('SETTINGS_TRAKT_AUTHENTICATE') }
</div>
@ -270,7 +270,7 @@ const Settings = () => {
<div className={styles['label']}>{ t('Calendar') }</div>
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Subscribe'} disabled={!(profile.auth && profile.auth.user && profile.auth.user._id)} tabIndex={-1} onClick={subscribeCalendarOnClick}>
<Icon className={styles['icon']} icon={'ic_calendar'} />
<Icon className={styles['icon']} name={'calendar'} />
<div className={styles['label']}>{ t('SETTINGS_CALENDAR_SUBSCRIBE') }</div>
</Button>
</div>
@ -451,7 +451,7 @@ const Settings = () => {
<div className={classnames(styles['option-input-container'], styles['configure-input-container'])}>
<div className={styles['label']} title={streamingServerUrlInput.value}>{streamingServerUrlInput.value}</div>
<Button className={styles['configure-button-container']} title={'Configure server url'} onClick={openConfigureServerUrlModal}>
<Icon className={styles['icon']} icon={'ic_settings'} />
<Icon className={styles['icon']} name={'settings'} />
</Button>
</div>
</div>

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

@ -200,7 +200,7 @@
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
.label {
@ -311,7 +311,7 @@
width: 1rem;
height: 1rem;
margin: 0;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}
}