about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorThibG <thib@sitedethib.com>2018-08-14 21:51:17 +0200
committerEugen Rochko <eugen@zeonfederated.com>2018-08-14 21:51:17 +0200
commitec2c516ab865ea63b5e7bc4405d0141d377e3e12 (patch)
tree93ec360209acd7e357bed43ac66a5bbaed7d4a85 /app/javascript
parent464daffdf9a37e9a773d224a162fad022890d463 (diff)
Various fixes regarding the video position slider (#8201)
* Prevent default event handling when clicking on the video position slider

This prevents accidental text selection when clicking on the position slider.

* Fix bug when clicking on video position slider before starting the video

* Slightly more aggressive video preloading

- Preload video metadata if the video is loaded in detailed view, as it is
  likely to get played, and metadata is useful for seeking in the video.
- Preload video data if it's fullscreen as it is extremely likely to get
  played right after being put in fullscreen (although those are two steps).
- Preload video data if the user has clicked the position slider, as the video
  will play as soon as the mouse button is released, and video metadata is
  needed to properly seek into the video.
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/mastodon/features/video/index.js20
1 files changed, 17 insertions, 3 deletions
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js
index 47a165e16..55ea32acb 100644
--- a/app/javascript/mastodon/features/video/index.js
+++ b/app/javascript/mastodon/features/video/index.js
@@ -158,6 +158,9 @@ export default class Video extends React.PureComponent {
     this.setState({ dragging: true });
     this.video.pause();
     this.handleMouseMove(e);
+
+    e.preventDefault();
+    e.stopPropagation();
   }
 
   handleMouseUp = () => {
@@ -174,8 +177,10 @@ export default class Video extends React.PureComponent {
     const { x } = getPointerPosition(this.seek, e);
     const currentTime = Math.floor(this.video.duration * x);
 
-    this.video.currentTime = currentTime;
-    this.setState({ currentTime });
+    if (!isNaN(currentTime)) {
+      this.video.currentTime = currentTime;
+      this.setState({ currentTime });
+    }
   }, 60);
 
   togglePlay = () => {
@@ -281,6 +286,15 @@ export default class Video extends React.PureComponent {
       playerStyle.height = height;
     }
 
+    let preload;
+    if (startTime || fullscreen || dragging) {
+      preload = 'auto';
+    } else if (detailed) {
+      preload = 'metadata';
+    } else {
+      preload = 'none';
+    }
+
     return (
       <div
         role='menuitem'
@@ -296,7 +310,7 @@ export default class Video extends React.PureComponent {
           ref={this.setVideoRef}
           src={src}
           poster={preview}
-          preload={startTime ? 'auto' : 'none'}
+          preload={preload}
           loop
           role='button'
           tabIndex='0'