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

animated placeholder styles dropped

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-19 23:34:37 +03:00
parent d34a4f48dd
commit b4a3a9a017
6 changed files with 7 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/index.js
View file

@ -14,7 +14,6 @@ const Popup = require('./Popup');
const ShareModal = require('./ShareModal');
const Slider = require('./Slider');
const TextInput = require('./TextInput');
const placeholderStyles = require('./placeholder-styles');
const routesRegexp = require('./routesRegexp');
const useBinaryState = require('./useBinaryState');
const useFullscreen = require('./useFullscreen');
@ -39,7 +38,6 @@ module.exports = {
ShareModal,
Slider,
TextInput,
placeholderStyles,
routesRegexp,
useBinaryState,
useFullscreen,

18
src/common/placeholder-styles.less
View file

@ -1,18 +0,0 @@
@keyframes placeholderAnimation {
from {
filter: brightness(1);
}
to {
filter: brightness(1.2);
}
}
.placeholder-container {
animation-name: placeholderAnimation;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-timing-function: ease-out;
}

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

@ -1,6 +1,5 @@
const React = require('react');
const classnames = require('classnames');
const { MainNavBar, MetaRow, MetaRowPlaceholder, placeholderStyles } = require('stremio/common');
const { MainNavBar, MetaRow, MetaRowPlaceholder } = require('stremio/common');
const useCatalogs = require('./useCatalogs');
const styles = require('./styles');
@ -45,7 +44,7 @@ const Board = () => {
return (
<MetaRowPlaceholder
key={`${index}${req.base}${content.type}`}
className={classnames(styles['board-row-placeholder'], placeholderStyles['placeholder-container'])}
className={styles['board-row-placeholder']}
/>
);
}

5
src/routes/Detail/Detail.js
View file

@ -1,6 +1,5 @@
const React = require('react');
const classnames = require('classnames');
const { NavBar, MetaPreview, MetaPreviewPlaceholder, placeholderStyles } = require('stremio/common');
const { NavBar, MetaPreview, MetaPreviewPlaceholder } = require('stremio/common');
const VideosList = require('./VideosList');
const StreamsList = require('./StreamsList');
const useMetaItem = require('./useMetaItem');
@ -33,7 +32,7 @@ const Detail = ({ urlParams }) => {
/>
</React.Fragment>
:
<MetaPreviewPlaceholder className={classnames(styles['meta-preview'], placeholderStyles['placeholder-container'])} />
<MetaPreviewPlaceholder className={styles['meta-preview']} />
}
{
typeof urlParams.videoId === 'string' && urlParams.videoId.length > 0 ?

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

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button, placeholderStyles } = require('stremio/common');
const { Button } = require('stremio/common');
const Stream = require('./Stream');
const StreamPlaceholder = require('./StreamPlaceholder');
const useStreams = require('./useStreams');
@ -12,7 +12,7 @@ const StreamsList = ({ className, metaItem }) => {
const streams = useStreams(metaItem);
return (
<div className={classnames(className, styles['streams-list-container'])}>
<div className={classnames(styles['streams-scroll-container'], { [placeholderStyles['placeholder-container']]: streams.length === 0 })}>
<div className={styles['streams-scroll-container']}>
{
streams.length > 0 ?
streams.map((stream) => (

3
src/routes/Detail/VideosList/VideosList.js
View file

@ -1,7 +1,6 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { placeholderStyles } = require('stremio/common');
const SeasonsBar = require('./SeasonsBar');
const SeasonsBarPlaceholder = require('./SeasonsBarPlaceholder');
const Video = require('./Video');
@ -12,7 +11,7 @@ const styles = require('./styles');
const VideosList = ({ className, metaItem }) => {
const [season, seasons, setSeason] = useSeasons(metaItem);
return (
<div className={classnames(className, styles['videos-list-container'], { [placeholderStyles['placeholder-container']]: metaItem === null })}>
<div className={classnames(className, styles['videos-list-container'])}>
{
metaItem !== null ?
<React.Fragment>