fix(VIDEO-19962): base64 encode public id for video metadata (#906)

Author: kjarmicki-cloudinary

src/components/title-bar/title-bar.js

@@ -1,6 +1,7 @@
 import videojs from 'video.js';
 import 'assets/styles/components/title-bar.scss';
 import componentUtils from '../component-utils';
+import { utf8ToBase64 } from '../../utils/utf8Base64';
 import { getCloudinaryUrlPrefix } from 'plugins/cloudinary/common';
 
 // support VJS5 & VJS6 at the same time
@@ -46,9 +47,13 @@ class TitleBar extends Component {
 
     const urlPrefix = getCloudinaryUrlPrefix(config);
     const deliveryType = source.getInitOptions().type || 'upload';
-    const metadataUrl = `${urlPrefix}/_applet_/video_service/video_metadata/${deliveryType}/${publicId}.json`;
+    const metadataUrl = `${urlPrefix}/_applet_/video_service/video_metadata/${deliveryType}/${utf8ToBase64(publicId)}.json`;
 
-    fetch(metadataUrl)
+    fetch(metadataUrl, {
+      headers: {
+        'X-Cld-Video-Player-Version': VERSION
+      }
+    })
       .then(response => {
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
         return response.json();