feat: chapters/transcription template urls (applets) (#888)

* feat: chapters/transcription template urls (applets)

Author: jakub-roch

src/plugins/chapters/chapters.js

@@ -1,7 +1,8 @@
 import videojs from 'video.js';
 
 import './chapters.scss';
-import { extendCloudinaryConfig, getCloudinaryUrl } from '../cloudinary/common';
+import { getCloudinaryUrlPrefix } from '../cloudinary/common';
+import { utf8ToBase64 } from '../../utils/utf8Base64';
 
 /**
  * Chapters plugin.
@@ -67,10 +68,9 @@ const ChaptersPlugin = (function () {
       return null;
     }
 
-    const fullUrl = getCloudinaryUrl(
-      `${currentPublicId}-chapters.vtt`,
-      extendCloudinaryConfig(this.player.cloudinary.cloudinaryConfig(), { resource_type: 'raw', version: '1' })
-    );
+    const { type: deliveryType } = this.player.cloudinary.source().resourceConfig();
+    const urlPrefix = getCloudinaryUrlPrefix(this.player.cloudinary.cloudinaryConfig());
+    const fullUrl = `${urlPrefix}/_applet_/video_service/chapters/${deliveryType}/${utf8ToBase64(currentPublicId)}.vtt`;
     return `${fullUrl}?t=${Date.now()}`;
   };
 

src/plugins/paced-transcript/index.js

@@ -1,4 +1,5 @@
-import { getCloudinaryUrl, extendCloudinaryConfig } from 'plugins/cloudinary/common';
+import { getCloudinaryUrlPrefix } from '../cloudinary/common';
+import { utf8ToBase64 } from '../../utils/utf8Base64';
 
 const fallbackFetch = async (url, fallback) => {
   try {
@@ -32,6 +33,9 @@ function pacedTranscript(config) {
   const classNames = player.textTrackDisplay.el().classList;
   classNames.add('cld-paced-text-tracks');
 
+  const getTranscriptionFileUrl = (urlPrefix, deliveryType, publicId, languageCode = null) =>
+    `${urlPrefix}/_applet_/video_service/transcription/${deliveryType}/${languageCode ? `${languageCode}/` : ''}${utf8ToBase64(publicId)}.transcript`;
+
   // Load the transcription file
   const initTranscript = async () => {
 
@@ -42,14 +46,16 @@ function pacedTranscript(config) {
     } else {
       // If not, and provided language, try fetching translated transcript, fallback to base transcript
       const source = player.cloudinary.source();
-      const basePath = getCloudinaryUrl(
-        source.publicId(),
-        extendCloudinaryConfig(player.cloudinary.cloudinaryConfig(), { resource_type: 'raw' })
-      );
+      const sourcePublicId = source.publicId();
+      const sourceDeliveryType = source.resourceConfig().type;
+      const urlPrefix = getCloudinaryUrlPrefix(player.cloudinary.cloudinaryConfig());
+      const transcriptionFileUrl = getTranscriptionFileUrl(urlPrefix, sourceDeliveryType, sourcePublicId);
+
       if (options.srclang) {
-        transcriptResponse = await fallbackFetch(`${basePath}.${options.srclang}.transcript`, `${basePath}.transcript`);
+        const transcriptionTranslationFileUrl = getTranscriptionFileUrl(urlPrefix, sourceDeliveryType, sourcePublicId, options.srclang);
+        transcriptResponse = await fallbackFetch(transcriptionTranslationFileUrl, transcriptionFileUrl);
       } else {
-        transcriptResponse = await fallbackFetch(`${basePath}.transcript`);
+        transcriptResponse = await fallbackFetch(transcriptionFileUrl);
       }
     }
     if (!transcriptResponse?.ok) return;

src/utils/utf8Base64.js

@@ -0,0 +1,5 @@
+export function utf8ToBase64(str) {
+  const utf8Bytes = new TextEncoder().encode(str);
+  const binaryStr = String.fromCharCode(...utf8Bytes);
+  return btoa(binaryStr);
+}