Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video trimming UI plugin #1798

Open
wants to merge 24 commits into
base: develop
Choose a base branch
from
Open

Video trimming UI plugin #1798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
ba312b2
Structural code for video trimming UI
Danielh112 Apr 2, 2020
72f1568
Merge remote-tracking branch 'origin/develop' into video-trimming-plugin
Danielh112 Apr 2, 2020
4c75bcc
Trim tool icons added
DanielHuntleySBG Apr 3, 2020
c82fa73
If the user is using the trimming tool, check if the seek position is…
DanielHuntleySBG Apr 3, 2020
f5bc729
Improved styling of Trimming timeline
DanielHuntleySBG Apr 4, 2020
13d15b6
Fix to only update the current time when the user has finished settin…
DanielHuntleySBG Apr 4, 2020
ef5bccf
Trimming tool: Implementation of timestamp above each thumb to displa…
DanielHuntleySBG Apr 5, 2020
d8ae6e2
Improve accessiblity: Inclusion of aria metadata
DanielHuntleySBG Apr 6, 2020
c9f8329
Nit pick fixes for trimming tool PR
DanielHuntleySBG Apr 6, 2020
5780e0d
Remove plyr.svg from pull request
DanielHuntleySBG Apr 6, 2020
e13be14
Trimming: On source change update whether or not to show the trimming…
DanielHuntleySBG Apr 6, 2020
5bb96f3
Merge branch 'video-trimming-plugin' of https://github.com/SBGSports/…
DanielHuntleySBG Apr 6, 2020
2ab8a88
Video trimming bug fix: When switching sources a new trimming object …
DanielHuntleySBG Apr 7, 2020
c0fa6d5
Trimming: Change structure of triggerevent messages so that they are …
DanielHuntleySBG Apr 8, 2020
81d77eb
Remove Timeupdate event listener when changing source as two instance…
DanielHuntleySBG Apr 9, 2020
ee73dc4
Convert the default trim length to percent as for longer videos it wa…
DanielHuntleySBG Apr 9, 2020
5e53137
Addition of a couple additional api endpoints to get and set the star…
DanielHuntleySBG Apr 9, 2020
83ab236
Update to use the existing clamp function | Improve commenting for se…
DanielHuntleySBG Apr 9, 2020
bc2fbc4
Remove getter and setter for trimming from plyr.js as it can be acces…
DanielHuntleySBG Apr 11, 2020
bdf4718
Remove settrimstart and settrimend from plyr.js as they can be set fr…
DanielHuntleySBG Apr 11, 2020
04941a0
Calling trim.enter or trim.exit did not update the video trim control…
DanielHuntleySBG Apr 14, 2020
64dc1fd
Fix to Trimming tool, to prevent the start time being before the end …
DanielHuntleySBG Apr 20, 2020
6f06907
Merge develop branch back into video trimming branch
DanielHuntleySBG Apr 24, 2020
3aed88e
resolve merge conflicts
DanielHuntleySBG Nov 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CONTROLS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
];
Expand Down Expand Up @@ -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}',
Expand Down
13 changes: 13 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand All @@ -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.
Expand Down
1 change: 0 additions & 1 deletion dist/plyr.svg
View file
Open in desktop

This file was deleted.

27 changes: 27 additions & 0 deletions src/js/config/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,11 @@ const defaults = {
update: false,
},

// Trim settings
trim: {
enabled: true, // Allow trim?
},

// Fullscreen settings
fullscreen: {
enabled: true, // Allow fullscreen?
Expand Down Expand Up @@ -143,6 +148,7 @@ const defaults = {
'pip',
'airplay',
// 'download',
// 'trim',
'fullscreen',
],
settings: ['captions', 'quality', 'speed'],
Expand All @@ -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}',
Expand Down Expand Up @@ -222,6 +232,7 @@ const defaults = {
mute: null,
volume: null,
captions: null,
trim: null,
download: null,
fullscreen: null,
pip: null,
Expand Down Expand Up @@ -284,6 +295,11 @@ const defaults = {
'adsallcomplete',
'adsimpression',
'adsclick',

// Trimming
'entertrim',
'exittrim',
'trimchange',
],

// Selectors
Expand All @@ -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"]',
Expand Down Expand Up @@ -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',
Expand Down
14 changes: 14 additions & 0 deletions src/js/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
};

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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));
Expand Down
33 changes: 33 additions & 0 deletions src/js/listeners.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,11 @@ class Listeners {
player.rewind();
break;

case 84:
// T key
player.trim.toggle();
break;

case 70:
// F key
player.fullscreen.toggle();
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) => {
Expand Down
Loading