Skip to content

Commit

Permalink
Vimeo private videos: check for hash in src and add as a param (#2322)
Browse files Browse the repository at this point in the history
* check for hash in src and add as a param

* Enable different methods of passing hash
  • Loading branch information
Frosch authored Sep 29, 2021
1 parent 02d06c4 commit e4a18a5
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 8 deletions.
1 change: 1 addition & 0 deletions src/js/config/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,7 @@ const defaults = {
embed: {
provider: 'data-plyr-provider',
id: 'data-plyr-embed-id',
hash: 'data-plyr-embed-hash',
},
},

Expand Down
42 changes: 34 additions & 8 deletions src/js/plugins/vimeo.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,25 @@ function parseId(url) {
return url.match(regex) ? RegExp.$2 : url;
}

// Try to extract a hash for private videos from the URL
function parseHash(url) {
/* This regex matches a hexadecimal hash if given in any of these forms:
* - [https://player.]vimeo.com/video/{id}/{hash}[?params]
* - [https://player.]vimeo.com/video/{id}?h={hash}[&params]
* - [https://player.]vimeo.com/video/{id}?[params]&h={hash}
* - video/{id}/{hash}
* If matched, the hash is available in the named group `hash`
*/
const regex = /^.*(?:vimeo.com\/|video\/)(?:\d+)(?:\?.*\&*h=|\/)+(?<hash>[\d,a-f]+)/
const found = url.match(regex)

if (found) {
return found.groups.hash
}

return null
}

// Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) {
if (play && !this.embed.hasPlayed) {
Expand Down Expand Up @@ -72,6 +91,19 @@ const vimeo = {
const config = player.config.vimeo;
const { premium, referrerPolicy, ...frameParams } = config;

// Get the source URL or ID
let source = player.media.getAttribute('src');
let hash = ''
// Get from <div> if needed
if (is.empty(source)) {
source = player.media.getAttribute(player.config.attributes.embed.id);
// hash can also be set as attribute on the <div>
hash = player.media.getAttribute(player.config.attributes.embed.hash);
} else {
hash = parseHash(source)
}
const hashParam = (!!hash) ? {h: hash} : {}

// If the owner has a pro or premium account then we can hide controls etc
if (premium) {
Object.assign(frameParams, {
Expand All @@ -87,17 +119,11 @@ const vimeo = {
muted: player.muted,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative,
// hash has to be added to iframe-URL
...hashParam,
...frameParams,
});

// Get the source URL or ID
let source = player.media.getAttribute('src');

// Get from <div> if needed
if (is.empty(source)) {
source = player.media.getAttribute(player.config.attributes.embed.id);
}

const id = parseId(source);
// Build an iframe
const iframe = createElement('iframe');
Expand Down

0 comments on commit e4a18a5

Please sign in to comment.