Video trimming UI plugin

CONTROLS.md

@@ -28,6 +28,7 @@ controls: [
     'settings', // Settings menu
     'pip', // Picture-in-picture (currently Safari only)
     'airplay', // Airplay (currently Safari only)
+    'trim', // Trim Control
     'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
     'fullscreen', // Toggle fullscreen
 ];
@@ -56,6 +57,10 @@ i18n: {
     unmute: 'Unmute',
     enableCaptions: 'Enable captions',
     disableCaptions: 'Disable captions',
+    enterTrim: 'Enter trim',
+    exitTrim: 'Exit trim',
+    trimStart: 'Trim Start',
+    trimEnd: 'Trim End',
     enterFullscreen: 'Enter fullscreen',
     exitFullscreen: 'Exit fullscreen',
     frameTitle: 'Player for {title}',

README.md

@@ -462,6 +462,9 @@ player.fullscreen.enter(); // Enter fullscreen
 | `increaseVolume(step)`     | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
 | `decreaseVolume(step)`     | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
 | `toggleCaptions(toggle)`   | Boolean          | Toggle captions display. If no parameter is passed, it will toggle based on current status.                |
+| `trim.enter()`             | -                | Enter Trimming tool.                                                                                       |
+| `trim.exit()`              | -                | Exit Trimming tool.                                                                                        |
+| `trim.toggle()`            | -                | Toggle Trimming tool.                                                                                      |
 | `fullscreen.enter()`       | -                | Enter fullscreen. If fullscreen is not supported, a fallback "full window/viewport" is used instead.       |
 | `fullscreen.exit()`        | -                | Exit fullscreen.                                                                                           |
 | `fullscreen.toggle()`      | -                | Toggle fullscreen.                                                                                         |
@@ -520,6 +523,8 @@ player.fullscreen.active; // false;
 | `pip`¹          | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |
 | `ratio`              | ✓      | ✓      | Gets or sets the video aspect ratio. The setter accepts a string in the same format as the `ratio` option.                                                                                                                                                                                                                             |
 | `download`           | ✓      | ✓      | Gets or sets the URL for the download button. The setter accepts a string containing a valid absolute URL.                                                                                                                                                                                                                             |
+| `trim.startTime`     | ✓      | ✓      | Gets or sets the trimming range start time. The setter accepts a float in seconds.                                                                                                                                                                                                                                                     |
+| `trim.endTime`       | ✓      | ✓      | Gets or sets the trimming range end time. The setter accepts a float in seconds.                                                                                                                                                                                                                                                       |
 
 1.  HTML5 only
 
@@ -676,6 +681,9 @@ player.on('ready', event => {
 | `waiting`        | Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).                                                                                                                                                                                                                  |
 | `emptied`        | he media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the `load()` method is called to reload it.                                                                                                                                                                         |
 | `cuechange`      | Sent when a `TextTrack` has changed the currently displaying cues.                                                                                                                                                                                                                                                                             |
+| `entertrim`      | Sent when the player enters the trimming tool.                                                                                                                                                                                                                                                                                                 |
+| `exittrim`       | Sent when the player exits the trimming tool mode.                                                                                                                                                                                                                                                                                             |
+| `trimchange`     | Sent when the trimming region has changed.                                                                                                                                                                                                                                                                                                     |
 | `error`          | Sent when an error occurs. The element's `error` attribute contains more information.                                                                                                                                                                                                                                                          |
 
 ### YouTube only
@@ -717,6 +725,7 @@ document then the shortcuts will work when any element has focus, apart from an
 | `F`        | Toggle fullscreen                      |
 | `C`        | Toggle captions                        |
 | `L`        | Toggle loop                            |
+| `T`        | Toggle trimming tool                   |
 
 # Preview thumbnails
 
@@ -728,6 +737,10 @@ You can see the example VTT files [here](https://cdn.plyr.io/static/demo/thumbs/
 
 Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen).
 
+# Trimming
+
+It's possible to create a trim region from your video using the trim mode. This is useful when creating clips or repeating loops. The 'trimchange' event will give you the start and end time of the selected region.
+
 # Browser support
 
 Plyr supports the last 2 versions of most _modern_ browsers.

src/js/config/defaults.js

@@ -110,6 +110,11 @@ const defaults = {
     update: false,
   },
 
+  // Trim settings
+  trim: {
+    enabled: true, // Allow trim?
+  },
+
   // Fullscreen settings
   fullscreen: {
     enabled: true, // Allow fullscreen?
@@ -143,6 +148,7 @@ const defaults = {
     'pip',
     'airplay',
     // 'download',
+    // 'trim',
     'fullscreen',
   ],
   settings: ['captions', 'quality', 'speed'],
@@ -166,6 +172,10 @@ const defaults = {
     enableCaptions: 'Enable captions',
     disableCaptions: 'Disable captions',
     download: 'Download',
+    enterTrim: 'Enter trim',
+    exitTrim: 'Exit trim',
+    trimStart: 'Trim Start',
+    trimEnd: 'Trim End',
     enterFullscreen: 'Enter fullscreen',
     exitFullscreen: 'Exit fullscreen',
     frameTitle: 'Player for {title}',
@@ -222,6 +232,7 @@ const defaults = {
     mute: null,
     volume: null,
     captions: null,
+    trim: null,
     download: null,
     fullscreen: null,
     pip: null,
@@ -284,6 +295,11 @@ const defaults = {
     'adsallcomplete',
     'adsimpression',
     'adsclick',
+
+    // Trimming
+    'entertrim',
+    'exittrim',
+    'trimchange',
   ],
 
   // Selectors
@@ -305,6 +321,7 @@ const defaults = {
       mute: '[data-plyr="mute"]',
       captions: '[data-plyr="captions"]',
       download: '[data-plyr="download"]',
+      trim: '[data-plyr="trim"]',
       fullscreen: '[data-plyr="fullscreen"]',
       pip: '[data-plyr="pip"]',
       airplay: '[data-plyr="airplay"]',
@@ -368,6 +385,16 @@ const defaults = {
       enabled: 'plyr--captions-enabled',
       active: 'plyr--captions-active',
     },
+    trim: {
+      enabled: 'plyr--trim-enabled',
+      active: 'plyr--trim-active',
+      // Trim tool
+      trimTool: 'plyr__trim-tool',
+      leftThumb: 'plyr__trim-tool__thumb-left',
+      rightThumb: 'plyr__trim-tool__thumb-right',
+      timeContainer: 'plyr__trim-tool__time-container',
+      timeContainerShown: 'plyr__trim-tool__time-container--is-shown',
+    },
     fullscreen: {
       enabled: 'plyr--fullscreen-enabled',
       fallback: 'plyr--fullscreen-fallback',

src/js/controls.js

@@ -63,6 +63,7 @@ const controls = {
         airplay: getElement.call(this, this.config.selectors.buttons.airplay),
         settings: getElement.call(this, this.config.selectors.buttons.settings),
         captions: getElement.call(this, this.config.selectors.buttons.captions),
+        trim: getElement.call(this, this.config.selectors.buttons.trim),
         fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen),
       };
 
@@ -228,6 +229,14 @@ const controls = {
         props.iconPressed = 'captions-on';
         break;
 
+      case 'trim':
+        props.toggle = true;
+        props.label = 'enterTrim';
+        props.labelPressed = 'exitTrim';
+        props.icon = 'enter-trim';
+        props.iconPressed = 'exit-trim';
+        break;
+
       case 'fullscreen':
         props.toggle = true;
         props.label = 'enterFullscreen';
@@ -1590,6 +1599,11 @@ const controls = {
         container.appendChild(createButton.call(this, 'download', attributes));
       }
 
+      // Toggle trim button
+      if (control === 'trim') {
+        container.appendChild(createButton.call(this, 'trim', defaultAttributes));
+      }
+
       // Toggle fullscreen button
       if (control === 'fullscreen') {
         container.appendChild(createButton.call(this, 'fullscreen', defaultAttributes));

src/js/listeners.js

@@ -131,6 +131,11 @@ class Listeners {
           player.rewind();
           break;
 
+        case 84:
+          // T key
+          player.trim.toggle();
+          break;
+
         case 70:
           // F key
           player.fullscreen.toggle();
@@ -620,6 +625,16 @@ class Listeners {
       'download',
     );
 
+    // Trim toggle
+    this.bind(
+      elements.buttons.trim,
+      'click',
+      () => {
+        player.trim.toggle();
+      },
+      'trim',
+    );
+
     // Fullscreen toggle
     this.bind(
       elements.buttons.fullscreen,
@@ -802,6 +817,24 @@ class Listeners {
       }
     });
 
+    // Move trim handles if selected
+    this.bind(elements.controls, 'mousemove touchmove', event => {
+      const { trim } = player;
+
+      if (trim && trim.editing) {
+        trim.setTrimLength(event);
+      }
+    });
+
+    // Stop trimming when handle is no longer selected
+    this.bind(elements.controls, 'mouseup touchend', event => {
+      const { trim } = player;
+
+      if (trim && trim.editing) {
+        trim.setEditing(event);
+      }
+    });
+
     // Polyfill for lower fill in <input type="range"> for webkit
     if (browser.isWebkit) {
       Array.from(getElements.call(player, 'input[type="range"]')).forEach((element) => {