Fixed Movie Details Tweaks

Fixes #4124

frontend/src/Components/Marquee.js

@@ -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;

frontend/src/Movie/Details/MovieDetails.css

@@ -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;
 }

frontend/src/Movie/Details/MovieDetails.js

@@ -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"