mirror of
https://github.com/Radarr/Radarr.git
synced 2024-08-16 15:29:40 +02:00
parent
b7cf6f49d0
commit
f073f0c35c
179
frontend/src/Components/Marquee.js
Normal file
179
frontend/src/Components/Marquee.js
Normal file
@ -0,0 +1,179 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const FPS = 20;
|
||||
const STEP = 1;
|
||||
const TIMEOUT = 1 / FPS * 1000;
|
||||
|
||||
class Marquee extends Component {
|
||||
|
||||
static propTypes = {
|
||||
text: PropTypes.string,
|
||||
hoverToStop: PropTypes.bool,
|
||||
loop: PropTypes.bool,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
text: '',
|
||||
hoverToStop: true,
|
||||
loop: false
|
||||
};
|
||||
|
||||
state = {
|
||||
animatedWidth: 0,
|
||||
overflowWidth: 0,
|
||||
direction: 0
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.measureText();
|
||||
|
||||
if (this.props.hoverToStop) {
|
||||
this.startAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.text.length !== nextProps.text.length) {
|
||||
clearTimeout(this.marqueeTimer);
|
||||
this.setState({ animatedWidth: 0, direction: 0 });
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.measureText();
|
||||
|
||||
if (this.props.hoverToStop) {
|
||||
this.startAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.marqueeTimer);
|
||||
}
|
||||
|
||||
onHandleMouseEnter = () => {
|
||||
if (this.props.hoverToStop) {
|
||||
clearTimeout(this.marqueeTimer);
|
||||
} else if (this.state.overflowWidth > 0) {
|
||||
this.startAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
onHandleMouseLeave = () => {
|
||||
if (this.props.hoverToStop && this.state.overflowWidth > 0) {
|
||||
this.startAnimation();
|
||||
} else {
|
||||
clearTimeout(this.marqueeTimer);
|
||||
this.setState({ animatedWidth: 0 });
|
||||
}
|
||||
}
|
||||
|
||||
startAnimation = () => {
|
||||
clearTimeout(this.marqueeTimer);
|
||||
const isLeading = this.state.animatedWidth === 0;
|
||||
const timeout = isLeading ? 0 : TIMEOUT;
|
||||
|
||||
const animate = () => {
|
||||
const { overflowWidth } = this.state;
|
||||
let animatedWidth = this.state.animatedWidth;
|
||||
let direction = this.state.direction;
|
||||
|
||||
if (direction === 0) {
|
||||
animatedWidth = this.state.animatedWidth + STEP;
|
||||
} else {
|
||||
animatedWidth = this.state.animatedWidth - STEP;
|
||||
}
|
||||
|
||||
const isRoundOver = animatedWidth < 0;
|
||||
const endOfText = animatedWidth > overflowWidth;
|
||||
|
||||
if (endOfText) {
|
||||
direction = direction === 1;
|
||||
}
|
||||
|
||||
if (isRoundOver) {
|
||||
if (this.props.loop) {
|
||||
direction = direction === 0;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ animatedWidth, direction });
|
||||
this.marqueeTimer = setTimeout(animate, TIMEOUT);
|
||||
};
|
||||
|
||||
this.marqueeTimer = setTimeout(animate, timeout);
|
||||
}
|
||||
|
||||
measureText = () => {
|
||||
const container = this.container;
|
||||
const node = this.text;
|
||||
|
||||
if (container && node) {
|
||||
const containerWidth = container.offsetWidth;
|
||||
const textWidth = node.offsetWidth;
|
||||
const overflowWidth = textWidth - containerWidth;
|
||||
|
||||
if (overflowWidth !== this.state.overflowWidth) {
|
||||
this.setState({ overflowWidth });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const style = {
|
||||
position: 'relative',
|
||||
right: this.state.animatedWidth,
|
||||
whiteSpace: 'nowrap'
|
||||
};
|
||||
|
||||
if (this.state.overflowWidth < 0) {
|
||||
return (
|
||||
<div
|
||||
ref={(el) => {
|
||||
this.container = el;
|
||||
}}
|
||||
className={`ui-marquee ${this.props.className}`}
|
||||
style={{ overflow: 'hidden' }}
|
||||
>
|
||||
<span
|
||||
ref={(el) => {
|
||||
this.text = el;
|
||||
}}
|
||||
style={style}
|
||||
title={this.props.text}
|
||||
>
|
||||
{this.props.text}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={(el) => {
|
||||
this.container = el;
|
||||
}}
|
||||
className={`ui-marquee ${this.props.className}`.trim()}
|
||||
style={{ overflow: 'hidden' }}
|
||||
onMouseEnter={this.onHandleMouseEnter}
|
||||
onMouseLeave={this.onHandleMouseLeave}
|
||||
>
|
||||
<span
|
||||
ref={(el) => {
|
||||
this.text = el;
|
||||
}}
|
||||
style={style}
|
||||
title={this.props.text}
|
||||
>
|
||||
{this.props.text}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Marquee;
|
@ -66,7 +66,7 @@
|
||||
.title {
|
||||
font-weight: 300;
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.toggleMonitoredContainer {
|
||||
@ -112,6 +112,7 @@
|
||||
|
||||
.details {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 7px;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -121,7 +122,7 @@
|
||||
.rating,
|
||||
.year,
|
||||
.runtime {
|
||||
margin-right: 15px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.certification {
|
||||
@ -156,6 +157,7 @@
|
||||
.overview {
|
||||
flex: 1 0 auto;
|
||||
margin-top: 8px;
|
||||
padding-left: 7px;
|
||||
min-height: 0;
|
||||
font-size: $intermediateFontSize;
|
||||
}
|
||||
|
@ -12,6 +12,7 @@ import HeartRating from 'Components/HeartRating';
|
||||
import Icon from 'Components/Icon';
|
||||
import IconButton from 'Components/Link/IconButton';
|
||||
import InfoLabel from 'Components/InfoLabel';
|
||||
import Marquee from 'Components/Marquee';
|
||||
import MovieStatusLabel from './MovieStatusLabel';
|
||||
import Measure from 'Components/Measure';
|
||||
import MonitorToggleButton from 'Components/MonitorToggleButton';
|
||||
@ -35,7 +36,6 @@ import MovieHistoryTable from 'Movie/History/MovieHistoryTable';
|
||||
import MovieTitlesTable from './Titles/MovieTitlesTable';
|
||||
import MovieCastPostersConnector from './Credits/Cast/MovieCastPostersConnector';
|
||||
import MovieCrewPostersConnector from './Credits/Crew/MovieCrewPostersConnector';
|
||||
import MovieAlternateTitles from './MovieAlternateTitles';
|
||||
import MovieDetailsLinks from './MovieDetailsLinks';
|
||||
import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
|
||||
import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
|
||||
@ -78,7 +78,8 @@ class MovieDetails extends Component {
|
||||
allCollapsed: false,
|
||||
expandedState: {},
|
||||
selectedTabIndex: 0,
|
||||
overviewHeight: 0
|
||||
overviewHeight: 0,
|
||||
titleWidth: 0
|
||||
};
|
||||
}
|
||||
|
||||
@ -151,6 +152,10 @@ class MovieDetails extends Component {
|
||||
this.setState({ overviewHeight: height });
|
||||
}
|
||||
|
||||
onTitleMeasure = ({ width }) => {
|
||||
this.setState({ titleWidth: width });
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
@ -174,7 +179,6 @@ class MovieDetails extends Component {
|
||||
youTubeTrailerId,
|
||||
inCinemas,
|
||||
images,
|
||||
alternateTitles,
|
||||
tags,
|
||||
isSaving,
|
||||
isRefreshing,
|
||||
@ -199,6 +203,7 @@ class MovieDetails extends Component {
|
||||
isDeleteMovieModalOpen,
|
||||
isInteractiveImportModalOpen,
|
||||
overviewHeight,
|
||||
titleWidth,
|
||||
selectedTabIndex
|
||||
} = this.state;
|
||||
|
||||
@ -275,41 +280,43 @@ class MovieDetails extends Component {
|
||||
/>
|
||||
|
||||
<div className={styles.info}>
|
||||
<div className={styles.titleRow}>
|
||||
<div className={styles.titleContainer}>
|
||||
<div className={styles.toggleMonitoredContainer}>
|
||||
<MonitorToggleButton
|
||||
className={styles.monitorToggleButton}
|
||||
monitored={monitored}
|
||||
isSaving={isSaving}
|
||||
size={40}
|
||||
onPress={onMonitorTogglePress}
|
||||
<Measure onMeasure={this.onTitleMeasure}>
|
||||
<div className={styles.titleRow}>
|
||||
<div className={styles.titleContainer}>
|
||||
<div className={styles.toggleMonitoredContainer}>
|
||||
<MonitorToggleButton
|
||||
className={styles.monitorToggleButton}
|
||||
monitored={monitored}
|
||||
isSaving={isSaving}
|
||||
size={40}
|
||||
onPress={onMonitorTogglePress}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.title} style={{ width: (titleWidth - 150) }}>
|
||||
<Marquee text={title} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.movieNavigationButtons}>
|
||||
<IconButton
|
||||
className={styles.movieNavigationButton}
|
||||
name={icons.ARROW_LEFT}
|
||||
size={30}
|
||||
title={`Go to ${previousMovie.title}`}
|
||||
to={`/movie/${previousMovie.titleSlug}`}
|
||||
/>
|
||||
|
||||
<IconButton
|
||||
className={styles.movieNavigationButton}
|
||||
name={icons.ARROW_RIGHT}
|
||||
size={30}
|
||||
title={`Go to ${nextMovie.title}`}
|
||||
to={`/movie/${nextMovie.titleSlug}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.title}>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.movieNavigationButtons}>
|
||||
<IconButton
|
||||
className={styles.movieNavigationButton}
|
||||
name={icons.ARROW_LEFT}
|
||||
size={30}
|
||||
title={`Go to ${previousMovie.title}`}
|
||||
to={`/movie/${previousMovie.titleSlug}`}
|
||||
/>
|
||||
|
||||
<IconButton
|
||||
className={styles.movieNavigationButton}
|
||||
name={icons.ARROW_RIGHT}
|
||||
size={30}
|
||||
title={`Go to ${nextMovie.title}`}
|
||||
to={`/movie/${nextMovie.titleSlug}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Measure>
|
||||
|
||||
<div className={styles.details}>
|
||||
<div>
|
||||
@ -453,7 +460,7 @@ class MovieDetails extends Component {
|
||||
}
|
||||
|
||||
{
|
||||
!!studio &&
|
||||
!!studio && !isSmallScreen &&
|
||||
<InfoLabel
|
||||
className={styles.detailsInfoLabel}
|
||||
title="Studio"
|
||||
|
Loading…
Reference in New Issue
Block a user