fix(player): improve unlisted vimeo video handling (#1315)

faelmorais · web-flow · commit 5d5ae75fcff4 · 2024-06-18T16:01:36.000+10:00
diff --git a/packages/vidstack/src/providers/vimeo/loader.ts b/packages/vidstack/src/providers/vimeo/loader.ts
@@ -50,9 +50,9 @@ export class VimeoProviderLoader implements MediaProviderLoader<VimeoProvider> {
 
     if (!isString(src.src)) return null;
 
-    const { videoId } = resolveVimeoVideoId(src.src);
+    const { videoId, hash } = resolveVimeoVideoId(src.src);
     if (videoId) {
-      return getVimeoVideoInfo(videoId, abort).then((info) => (info ? info.poster : null));
+      return getVimeoVideoInfo(videoId, abort, hash).then((info) => (info ? info.poster : null));
     }
 
     return null;
diff --git a/packages/vidstack/src/providers/vimeo/provider.ts b/packages/vidstack/src/providers/vimeo/provider.ts
@@ -228,7 +228,7 @@ export class VimeoProvider
 
     this._videoInfoPromise = promise;
 
-    getVimeoVideoInfo(videoId, abort)
+    getVimeoVideoInfo(videoId, abort, this._hash)
       .then((info) => {
         promise.resolve(info);
       })
diff --git a/packages/vidstack/src/providers/vimeo/utils.ts b/packages/vidstack/src/providers/vimeo/utils.ts
@@ -1,6 +1,7 @@
 import type { VimeoOEmbedData, VimeoVideoInfo } from './embed/misc';
 
-const videoIdRE = /(?:https:\/\/)?(?:player\.)?vimeo(?:\.com)?\/(?:video\/)?(\d+)(?:\?hash=(.*))?/;
+const videoIdRE =
+  /(?:https:\/\/)?(?:player\.)?vimeo(?:\.com)?\/(?:video\/)?(\d+)(?:(?:\?hash=|\?h=|\/)(.*))?/;
 
 const infoCache = new Map<string, VimeoVideoInfo>();
 
@@ -11,12 +12,19 @@ export function resolveVimeoVideoId(src: string) {
   return { videoId: matches?.[1], hash: matches?.[2] };
 }
 
-export async function getVimeoVideoInfo(videoId: string, abort: AbortController) {
+export async function getVimeoVideoInfo(
+  videoId: string,
+  abort: AbortController,
+  videoHash?: string | null,
+) {
   if (infoCache.has(videoId)) return infoCache.get(videoId)!;
 
   if (pendingFetch.has(videoId)) return pendingFetch.get(videoId);
 
-  const oembedSrc = `https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/${videoId}`;
+  let oembedSrc = `https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/${videoId}`;
+  if (videoHash) {
+    oembedSrc = oembedSrc.concat(`?h=${videoHash}`);
+  }
 
   const promise = window
     .fetch(oembedSrc, {

Original file line number	Diff line number	Diff line change
`@@ -50,9 +50,9 @@ export class VimeoProviderLoader implements MediaProviderLoader<VimeoProvider> {`
`50`	`50`
`51`	`51`	`if (!isString(src.src)) return null;`
`52`	`52`
`53`		`- const { videoId } = resolveVimeoVideoId(src.src);`
	`53`	`+ const { videoId, hash } = resolveVimeoVideoId(src.src);`
`54`	`54`	`if (videoId) {`
`55`		`- return getVimeoVideoInfo(videoId, abort).then((info) => (info ? info.poster : null));`
	`55`	`+ return getVimeoVideoInfo(videoId, abort, hash).then((info) => (info ? info.poster : null));`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`return null;`