mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
rename properties, pass functions as parameters
This commit is contained in:
svetlagasheva
parent
900eec1307
commit
ef5bf029d3
9 changed files with 92 additions and 85 deletions
|
|
@ -65,18 +65,18 @@ const renderUrls = (urls) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderShareButton = (props) => {
|
||||
const renderShareButton = (shareAddon) => {
|
||||
return (
|
||||
<div onClick={props.shareAddon} className={styles['share-container']}>
|
||||
<div onClick={shareAddon} className={styles['share-container']}>
|
||||
<Icon className={styles['share-icon']} icon={'ic_share'} />
|
||||
<span className={styles['share-label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderState = (props, isInstalled) => {
|
||||
const renderState = (onToggleClicked, isInstalled) => {
|
||||
return (
|
||||
<div onClick={props.onToggleClicked} className={styles[isInstalled ? 'install-label' : 'uninstall-label']}>{isInstalled ? 'Install' : 'Uninstall'}</div>
|
||||
<div onClick={onToggleClicked} className={styles[isInstalled ? 'install-label' : 'uninstall-label']}>{isInstalled ? 'Install' : 'Uninstall'}</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -90,8 +90,8 @@ const Addon = (props) => {
|
|||
{renderDescription(props.description)}
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
{renderShareButton(props)}
|
||||
{renderState(props, props.isInstalled)}
|
||||
{renderShareButton(props.shareAddon)}
|
||||
{renderState(props.onToggleClicked, props.isInstalled)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
|
|||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const renderPoster = (props, poster) => {
|
||||
const renderPoster = (play, poster) => {
|
||||
if (poster.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['poster']} style={{ backgroundImage: 'url(' + poster + ')' }}>
|
||||
<div onClick={props.playButtonClicked} className={styles['play-container']}>
|
||||
<div onClick={play} className={styles['play-container']}>
|
||||
<Icon className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,23 +37,23 @@ const renderType = (type) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderYear = (year) => {
|
||||
if (year.length === 0) {
|
||||
const renderReleasedInfo = (releaseInfo) => {
|
||||
if (isNaN(releaseInfo.getTime())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['year']}>{year}</span>
|
||||
<span className={styles['year']}>{releaseInfo.getFullYear()}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const renderDateAdded = (dateAdded) => {
|
||||
if (isNaN(dateAdded.getTime())) {
|
||||
const renderReleasedDate = (released) => {
|
||||
if (isNaN(released.getTime())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['date-added']}>{dateAdded.getDate() + '.' + (dateAdded.getMonth() === 0 ? dateAdded.getMonth() + 12 : dateAdded.getMonth()) + '.' + dateAdded.getFullYear()}</span>
|
||||
<span className={styles['date-added']}>{released.getDate() + '.' + released.getMonth() + '.' + released.getFullYear()}</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -63,22 +63,22 @@ const renderLastViewed = (lastViewed) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<span className={styles['last-viewed']}>{lastViewed.getDate() + '.' + (lastViewed.getMonth() === 0 ? lastViewed.getMonth() + 12 : lastViewed.getMonth()) + '.' + lastViewed.getFullYear()}</span>
|
||||
<span className={styles['last-viewed']}>{lastViewed.getDate() + '.' + lastViewed.getMonth() + '.' + lastViewed.getFullYear()}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const renderTrailerIcon = (props) => {
|
||||
const renderTrailerButton = (watchTrailer) => {
|
||||
return (
|
||||
<div onClick={props.viewTrailer} className={styles['icon-container']}>
|
||||
<div onClick={watchTrailer} className={styles['icon-container']}>
|
||||
<Icon className={styles['trailer-icon']} icon={'ic_movies'} />
|
||||
<div className={styles['trailer']}>Trailer</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderAddlibIcon = (props) => {
|
||||
const renderAddToLibraryButton = (addToLibrary) => {
|
||||
return (
|
||||
<div onClick={props.addTolib} className={styles['icon-container']}>
|
||||
<div onClick={addToLibrary} className={styles['icon-container']}>
|
||||
<Icon className={styles['addlib-icon']} icon={'ic_addlib'} />
|
||||
<div className={styles['addlib']}>Add to Library</div>
|
||||
</div>
|
||||
|
|
@ -88,16 +88,16 @@ const renderAddlibIcon = (props) => {
|
|||
const LibraryItemList = (props) => {
|
||||
return (
|
||||
<div className={styles['library-item']}>
|
||||
{renderPoster(props, props.poster)}
|
||||
{renderPoster(props.play, props.poster)}
|
||||
{renderTitle(props.title)}
|
||||
{renderType(props.type)}
|
||||
{renderYear(props.year)}
|
||||
{renderDateAdded(props.dateAdded)}
|
||||
{renderReleasedInfo(props.releaseInfo)}
|
||||
{renderReleasedDate(props.released)}
|
||||
<span className={styles['views']}>{props.views}</span>
|
||||
<span className={styles['hours']}>{props.hours}</span>
|
||||
{renderLastViewed(props.lastViewed)}
|
||||
{renderTrailerIcon(props)}
|
||||
{renderAddlibIcon(props)}
|
||||
{renderTrailerButton(props.watchTrailer)}
|
||||
{renderAddToLibraryButton(props.addToLibrary)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -106,21 +106,21 @@ LibraryItemList.propTypes = {
|
|||
poster: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
year: PropTypes.string.isRequired,
|
||||
dateAdded: PropTypes.instanceOf(Date).isRequired,
|
||||
releaseInfo: PropTypes.instanceOf(Date).isRequired,
|
||||
released: PropTypes.instanceOf(Date).isRequired,
|
||||
views: PropTypes.number.isRequired,
|
||||
hours: PropTypes.number.isRequired,
|
||||
lastViewed: PropTypes.instanceOf(Date).isRequired,
|
||||
playButtonClicked: PropTypes.func,
|
||||
viewTrailer: PropTypes.func,
|
||||
addTolib: PropTypes.func
|
||||
play: PropTypes.func,
|
||||
watchTrailer: PropTypes.func,
|
||||
addToLibrary: PropTypes.func
|
||||
};
|
||||
LibraryItemList.defaultProps = {
|
||||
poster: '',
|
||||
title: '',
|
||||
type: '',
|
||||
year: '',
|
||||
dateAdded: new Date(''), //Invalid Date
|
||||
releaseInfo: new Date(''),
|
||||
released: new Date(''), //Invalid Date
|
||||
views: 0,
|
||||
hours: 0,
|
||||
lastViewed: new Date('')
|
||||
|
|
|
|||
|
|
@ -55,9 +55,9 @@ const getPlaceholderIcon = (type) => {
|
|||
}
|
||||
}
|
||||
|
||||
const renderPlay = (props, progress) => {
|
||||
const renderPlay = (play, progress) => {
|
||||
return (
|
||||
<div onClick={props.playButtonClicked} style={progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
|
||||
<div onClick={play} style={progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
|
||||
<Icon className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -95,20 +95,20 @@ const renderTitle = (title) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderYear = (year) => {
|
||||
if (year.length === 0) {
|
||||
const renderReleaseInfo = (releaseInfo) => {
|
||||
if (releaseInfo.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['year']}>{year}</div>
|
||||
<div className={styles['year']}>{releaseInfo}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderIcon = (props, progress) => {
|
||||
const renderIcon = (showInfo, progress) => {
|
||||
if (progress > 0) {
|
||||
return (
|
||||
<div onClick={props.showMore} className={styles['more-icon-container']}>
|
||||
<div onClick={showInfo} className={styles['more-icon-container']}>
|
||||
<Icon className={styles['more-icon']} icon={'ic_more'} />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -120,7 +120,7 @@ const MetaItem = (props) => {
|
|||
const posterSize = getShapeSize(props.posterShape, props.progress);
|
||||
const contentContainerStyle = {
|
||||
width: posterSize.width,
|
||||
height: props.episode.length === 0 && props.title.length === 0 && props.year.length === 0 && props.progress == 0? posterSize.height : posterSize.containerHeight
|
||||
height: props.episode.length === 0 && props.title.length === 0 && props.releaseInfo.length === 0 && props.progress == 0? posterSize.height : posterSize.containerHeight
|
||||
};
|
||||
const placeholderIcon = getPlaceholderIcon(props.type);
|
||||
const placeholderIconUrl = iconDataUrl({ icon: placeholderIcon, fill: colors.accent, width: Math.round(RELATIVE_POSTER_SIZE / 2.2), height: Math.round(RELATIVE_POSTER_SIZE / 2.2) });
|
||||
|
|
@ -132,16 +132,16 @@ const MetaItem = (props) => {
|
|||
return (
|
||||
<div style={contentContainerStyle} className={styles['meta-item']}>
|
||||
<div style={imageStyle} className={styles['poster']}>
|
||||
{renderPlay(props, props.progress)}
|
||||
{renderPlay(props.play, props.progress)}
|
||||
</div>
|
||||
{renderProgress(props.progress)}
|
||||
<div className={styles['info-container']}>
|
||||
<div className={styles['info']}>
|
||||
{renderEpisode(props.episode)}
|
||||
{renderTitle(props.title)}
|
||||
{renderYear(props.year)}
|
||||
{renderReleaseInfo(props.releaseInfo)}
|
||||
</div>
|
||||
{renderIcon(props, props.progress)}
|
||||
{renderIcon(props.showInfo, props.progress)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -154,9 +154,9 @@ MetaItem.propTypes = {
|
|||
progress: PropTypes.number.isRequired,
|
||||
episode: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
year: PropTypes.string.isRequired,
|
||||
playButtonClicked: PropTypes.func,
|
||||
showMore: PropTypes.func
|
||||
releaseInfo: PropTypes.string.isRequired,
|
||||
play: PropTypes.func,
|
||||
showInfo: PropTypes.func
|
||||
};
|
||||
MetaItem.defaultProps = {
|
||||
type: 'other',
|
||||
|
|
@ -165,7 +165,7 @@ MetaItem.defaultProps = {
|
|||
progress: 0,
|
||||
episode: '',
|
||||
title: '',
|
||||
year: ''
|
||||
releaseInfo: ''
|
||||
};
|
||||
|
||||
export default MetaItem;
|
||||
|
|
@ -1,33 +1,40 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
|
||||
import colors from 'stremio-colors';
|
||||
import styles from './styles';
|
||||
|
||||
const renderX = (props) => {
|
||||
const renderX = (closeModalDialog) => {
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
|
||||
const imageStyle = {
|
||||
width: 10,
|
||||
height: 10,
|
||||
backgroundImage: `url('${placeholderIconUrl}')`
|
||||
};
|
||||
return (
|
||||
<div onClick={props.closeModalDialog} className={styles['x-container']}>
|
||||
<Icon className={styles['x-icon']} icon={'ic_x'} />
|
||||
<div className={styles['x-container']}>
|
||||
<div onClick={closeModalDialog} style={imageStyle} className={styles['x-icon']} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderButtons = (props) => {
|
||||
const renderButtons = (shareInFacebook, shareInTwitter, shareInGplus) => {
|
||||
return (
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={props.shareInFacebook} className={styles['facebook-button']}>
|
||||
<div onClick={shareInFacebook} className={styles['facebook-button']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK
|
||||
</div>
|
||||
<div onClick={props.shareInTwitter} className={styles['twitter-button']}>
|
||||
<div onClick={shareInTwitter} className={styles['twitter-button']}>
|
||||
<Icon className={styles['twitter-icon']} icon={'ic_twitter'} />TWITTER
|
||||
</div>
|
||||
<div onClick={props.shareInGplus} className={styles['gplus-button']}>
|
||||
<div onClick={shareInGplus} className={styles['gplus-button']}>
|
||||
<Icon className={styles['gplus-icon']} icon={'ic_gplus'} />GOOGLE+
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderUrl = (props, url) => {
|
||||
const renderUrl = (copyToClipboard, url) => {
|
||||
if (url.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -35,7 +42,7 @@ const renderUrl = (props, url) => {
|
|||
return (
|
||||
<div className={styles['url-container']}>
|
||||
<input className={styles['url']} defaultValue={url} readOnly />
|
||||
<span onClick={props.copyUrl} className={styles['copy-label']}>Copy</span>
|
||||
<span onClick={copyToClipboard} className={styles['copy-label']}>Copy</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -43,11 +50,11 @@ const renderUrl = (props, url) => {
|
|||
const ShareAddon = (props) => {
|
||||
return (
|
||||
<div className={styles['share-addon']}>
|
||||
{renderX(props)}
|
||||
{renderX(props.closeModalDialog)}
|
||||
<div className={styles['info-container']}>
|
||||
<span className={styles['share-label']}>Share Add-on</span>
|
||||
{renderButtons(props)}
|
||||
{renderUrl(props, props.url)}
|
||||
{renderButtons(props.shareInFacebook, props.shareInTwitter, props.shareInGplus)}
|
||||
{renderUrl(props.copyToClipboard, props.url)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -59,7 +66,7 @@ ShareAddon.propTypes = {
|
|||
shareInFacebook: PropTypes.func,
|
||||
shareInTwitter: PropTypes.func,
|
||||
shareInGplus: PropTypes.func,
|
||||
copyUrl: PropTypes.func
|
||||
copyToClipboard: PropTypes.func
|
||||
};
|
||||
ShareAddon.defaultProps = {
|
||||
url: ''
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.x-icon {
|
||||
height: 10px;
|
||||
cursor: pointer;
|
||||
fill: @colorneutrallight;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.info-container {
|
||||
|
|
|
|||
|
|
@ -47,9 +47,9 @@ const renderSubtitle = (isFree, isSubscription, subtitle) => {
|
|||
return null;
|
||||
}
|
||||
|
||||
const renderPlay = (props, progress) => {
|
||||
const renderPlay = (progress) => {
|
||||
return (
|
||||
<div onClick={props.playButtonClicked} style={{ backgroundColor: progress ? colors.white : null }} className={styles['play-container']}>
|
||||
<div style={{ backgroundColor: progress ? colors.white : null }} className={styles['play-container']}>
|
||||
<Icon style={{ fill: progress ? colors.medium : null }} className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -69,7 +69,7 @@ const renderProgress = (progress) => {
|
|||
|
||||
const Stream = (props) => {
|
||||
return (
|
||||
<div style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['stream']}>
|
||||
<div onClick={props.play} style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['stream']}>
|
||||
<div className={styles['stream-info-container']}>
|
||||
<div className={styles['stream-info']}>
|
||||
{renderLogo(props.logo, props.sourceName)}
|
||||
|
|
@ -80,7 +80,7 @@ const Stream = (props) => {
|
|||
</div>
|
||||
{renderProgress(props.progress)}
|
||||
</div>
|
||||
{renderPlay(props, props.progress)}
|
||||
{renderPlay(props.progress)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@ Stream.propTypes = {
|
|||
isFree: PropTypes.bool.isRequired,
|
||||
isSubscription: PropTypes.bool.isRequired,
|
||||
progress: PropTypes.number.isRequired,
|
||||
playButtonClicked: PropTypes.func
|
||||
play: PropTypes.func
|
||||
};
|
||||
|
||||
Stream.defaultProps = {
|
||||
|
|
|
|||
|
|
@ -25,41 +25,41 @@ const renderEmail = (email) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderFullscreen = (props) => {
|
||||
const renderFullscreen = (onFullscreenMode) => {
|
||||
return (
|
||||
<div onClick={props.onFullscreenMode} className={styles['fullscreen-option']}>
|
||||
<div onClick={onFullscreenMode} className={styles['fullscreen-option']}>
|
||||
<Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'} />Fullscreen mode
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderOptions = (props) => {
|
||||
const renderOptions = (showSettings, showAddons, playMagnetLink, importFromFB, showHelpCenter) => {
|
||||
return (
|
||||
<ul className={styles['options']}>
|
||||
<li onClick={props.showSettings} className={styles['settings-option']}>
|
||||
<li onClick={showSettings} className={styles['settings-option']}>
|
||||
<Icon className={styles['settings-icon']} icon={'ic_settings'} />Settings
|
||||
</li>
|
||||
<li onClick={props.showAddons} className={styles['addons-option']}>
|
||||
<li onClick={showAddons} className={styles['addons-option']}>
|
||||
<Icon className={styles['addons-icon']} icon={'ic_addons'} />Add-ons
|
||||
</li>
|
||||
<li onClick={props.playMagnetLink} className={styles['magnet-option']}>
|
||||
<li onClick={playMagnetLink} className={styles['magnet-option']}>
|
||||
<Icon className={styles['magnet-icon']} icon={'ic_magnet'} />Play Magnet Link
|
||||
</li>
|
||||
<li onClick={props.importFromFB} className={styles['facebook-option']}>
|
||||
<li onClick={importFromFB} className={styles['facebook-option']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />Import from Facebook
|
||||
</li>
|
||||
<li onClick={props.showHelpCenter} className={styles['help-option']}>
|
||||
<li onClick={showHelpCenter} className={styles['help-option']}>
|
||||
<Icon className={styles['help-icon']} icon={'ic_help'} />Help & Feedback
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
const renderInfo = (props) => {
|
||||
const renderFooter = (showTermsOfService, showInfo) => {
|
||||
return (
|
||||
<ul className={styles['info']}>
|
||||
<li onClick={props.showTermsOfService} className={styles['terms-label']}>Terms of Service</li>
|
||||
<li onClick={props.showInfo} className={styles['about-label']}>About Stremio</li>
|
||||
<ul className={styles['footer']}>
|
||||
<li onClick={showTermsOfService} className={styles['terms-label']}>Terms of Service</li>
|
||||
<li onClick={showInfo} className={styles['about-label']}>About Stremio</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
@ -74,9 +74,9 @@ const UserPanel = (props) => {
|
|||
<span onClick={props.logout} className={styles['log-out']}>Log out</span>
|
||||
</div>
|
||||
</div>
|
||||
{renderFullscreen(props)}
|
||||
{renderOptions(props)}
|
||||
{renderInfo(props)}
|
||||
{renderFullscreen(props.onFullscreenMode)}
|
||||
{renderOptions(props.showSettings, props.showAddons, props.playMagnetLink, props.importFromFB, props.showHelpCenter)}
|
||||
{renderFooter(props.showTermsOfService, props.showInfo)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@
|
|||
background-color: @coloraccent20;
|
||||
}
|
||||
}
|
||||
.options, .info {
|
||||
.options, .footer {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
.info {
|
||||
.footer {
|
||||
border-top: 1px solid @colorwhite20;
|
||||
.terms-label, .about-label {
|
||||
padding: 10px 20px;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const renderReleasedDate = (released) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<span className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth() - 1]}</span>
|
||||
<span className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth()]}</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue