fix(VIDEO-20100): analytics improvements

Author: tsi

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

@@ -3,6 +3,7 @@ import 'assets/styles/components/title-bar.scss';
 import componentUtils from '../component-utils';
 import { utf8ToBase64 } from '../../utils/utf8Base64';
 import { getCloudinaryUrlPrefix } from 'plugins/cloudinary/common';
+import { appendQueryParams } from '../../utils/querystring';
 
 // support VJS5 & VJS6 at the same time
 const dom = videojs.dom || videojs;
@@ -47,7 +48,10 @@ class TitleBar extends Component {
 
     const urlPrefix = getCloudinaryUrlPrefix(config);
     const deliveryType = source.getInitOptions().type || 'upload';
-    const metadataUrl = `${urlPrefix}/_applet_/video_service/video_metadata/${deliveryType}/${utf8ToBase64(publicId)}.json`;
+    const metadataUrl = appendQueryParams(
+      `${urlPrefix}/_applet_/video_service/video_metadata/${deliveryType}/${utf8ToBase64(publicId)}.json`,
+      source.queryParams()
+    );
 
     fetch(metadataUrl, {
       headers: {

src/plugins/chapters/chapters.js

@@ -3,6 +3,7 @@ import videojs from 'video.js';
 import './chapters.scss';
 import { getCloudinaryUrlPrefix } from '../cloudinary/common';
 import { utf8ToBase64 } from '../../utils/utf8Base64';
+import { appendQueryParams } from '../../utils/querystring';
 
 /**
  * Chapters plugin.
@@ -68,10 +69,11 @@ const ChaptersPlugin = (function () {
       return null;
     }
 
-    const { type: deliveryType } = this.player.cloudinary.source().resourceConfig();
+    const source = this.player.cloudinary.source();
+    const { type: deliveryType } = 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()}`;
+    return appendQueryParams(fullUrl, source.queryParams());
   };
 
   /**

src/plugins/cloudinary/models/video-source/video-source.js

@@ -129,8 +129,8 @@ class VideoSource extends BaseSource {
     }
 
     options.cloudinaryConfig = options.cloudinaryConfig || this.cloudinaryConfig();
-
     options.resource_type = this.resourceType() || options.resource_type;
+    options.queryParams = this.queryParams();
 
     if (publicId === true) {
       const urlPrefix = getCloudinaryUrlPrefix(options.cloudinaryConfig);
@@ -145,7 +145,8 @@ class VideoSource extends BaseSource {
       }
 
       this._poster = new ImageSource(appletUrl, {
-        cloudinaryConfig: options.cloudinaryConfig
+        cloudinaryConfig: options.cloudinaryConfig,
+        queryParams: options.queryParams
       });
 
       return this;

src/plugins/text-tracks-manager/index.js

@@ -3,6 +3,7 @@ import { getCloudinaryUrlPrefix } from '../cloudinary/common';
 import { transcriptParser } from './parsers/transcriptParser';
 import { srtParser } from './parsers/srtParser';
 import { addTextTrackCues, fetchFileContent, refreshTextTrack, removeAllTextTrackCues } from './utils';
+import { appendQueryParams } from '../../utils/querystring';
 
 const getTranscriptionFileUrl = (urlPrefix, deliveryType, publicId, languageCode = null) =>
   `${urlPrefix}/_applet_/video_service/transcription/${deliveryType}/${languageCode ? `${languageCode}/` : ''}${utf8ToBase64(publicId)}.transcript`;
@@ -110,8 +111,9 @@ function textTracksManager() {
       const publicId = source.publicId();
       const deliveryType = source.resourceConfig().type;
       const urlPrefix = getCloudinaryUrlPrefix(player.cloudinary.cloudinaryConfig());
-      const baseUrl = getTranscriptionFileUrl(urlPrefix, deliveryType, publicId);
-      const localizedUrl = srclang ? getTranscriptionFileUrl(urlPrefix, deliveryType, publicId, srclang) : null;
+      const queryParams = source.queryParams();
+      const baseUrl = appendQueryParams(getTranscriptionFileUrl(urlPrefix, deliveryType, publicId), queryParams);
+      const localizedUrl = srclang ? appendQueryParams(getTranscriptionFileUrl(urlPrefix, deliveryType, publicId, srclang), queryParams) : null;
 
       return localizedUrl ? localizedUrl : baseUrl;
     };

src/utils/fetch-config.js

@@ -1,6 +1,7 @@
 import { defaultProfiles } from 'cloudinary-video-player-profiles';
 import { isRawUrl, getCloudinaryUrlPrefix } from '../plugins/cloudinary/common';
 import { utf8ToBase64 } from '../utils/utf8Base64';
+import { appendQueryParams } from './querystring';
 
 const isDefaultProfile = (profileName) => !!defaultProfiles.find(({ name }) => profileName === name);
 
@@ -15,21 +16,22 @@ const getDefaultProfileConfig = (profileName) => {
 };
 
 const fetchConfig = async (options) => {
-  const { profile, publicId, cloudinaryConfig, type = 'upload', videoConfig } = options;
+  const { profile, publicId, cloudinaryConfig, type = 'upload', videoConfig, allowUsageReport = true } = options;
 
   if (profile && isDefaultProfile(profile)) {
     return getDefaultProfileConfig(profile);
   }
 
   const urlPrefix = getCloudinaryUrlPrefix(cloudinaryConfig) + '/_applet_/video_service';
+  const queryParams = allowUsageReport ? { _s: `vp-${VERSION}` } : null;
 
   let configUrl;
   if (profile) {
     configUrl = isRawUrl(profile) 
       ? profile 
-      : `${urlPrefix}/video_player_profiles/${profile.replaceAll(' ', '+')}.json`;
+      : appendQueryParams(`${urlPrefix}/video_player_profiles/${profile.replaceAll(' ', '+')}.json`, queryParams);
   } else if (publicId && videoConfig !== false) {
-    configUrl = `${urlPrefix}/video_player_config/video/${type}/${utf8ToBase64(publicId)}.json`;
+    configUrl = appendQueryParams(`${urlPrefix}/video_player_config/video/${type}/${utf8ToBase64(publicId)}.json`, queryParams);
   } else {
     return {};
   }

src/utils/querystring.js

@@ -9,4 +9,13 @@ const objectToQuerystring = (obj) => {
   return `?${query}`;
 };
 
-export { objectToQuerystring };
+const appendQueryParams = (url, params) => {
+  const queryString = objectToQuerystring(params);
+  if (!queryString) {
+    return url;
+  }
+  const separator = url.includes('?') ? '&' : '?';
+  return `${url}${separator}${queryString.slice(1)}`;
+};
+
+export { objectToQuerystring, appendQueryParams };

src/video-player.js

@@ -23,6 +23,7 @@ import { PLAYER_EVENT, SOURCE_TYPE } from './utils/consts';
 import { getAnalyticsFromPlayerOptions } from './utils/get-analytics-player-options';
 import { extendCloudinaryConfig, normalizeOptions, isRawUrl, ERROR_CODE } from './plugins/cloudinary/common';
 import { isVideoInReadyState, checkIfVideoIsAvailable } from './utils/video-retry';
+import { appendQueryParams } from './utils/querystring';
 
 const INTERNAL_ANALYTICS_URL = 'https://analytics-api-s.cloudinary.com';
 
@@ -265,9 +266,10 @@ class VideoPlayer extends Utils.mixin(Eventable) {
         transformation.flags = transformation.flags || [];
         transformation.flags.push('sprite');
 
-        const vttSrc = source.config()
+        const vttUrl = source.config()
           .url(`${publicId}.vtt`, { transformation })
           .replace(/\.json$/, ''); // Handle playlist by tag
+        const vttSrc = appendQueryParams(vttUrl, source.queryParams());
 
         // vttThumbnails must be called differently on init and on source update.
         isFunction(this.videojs.vttThumbnails)
@@ -299,9 +301,10 @@ class VideoPlayer extends Utils.mixin(Eventable) {
         transformation.flags = transformation.flags || [];
         transformation.flags.push('getinfo');
 
-        const aiHighlightsGraphSrc = source.config()
+        const aiHighlightsGraphUrl = source.config()
           .url(`${publicId}`, { transformation })
           .replace(/\.json$/, ''); // Handle playlist by tag
+        const aiHighlightsGraphSrc = appendQueryParams(aiHighlightsGraphUrl, source.queryParams());
 
         // Plugin is called differently on init and on source update.
         isFunction(this.videojs.aiHighlightsGraph)