feat: enable player-source config inheritance

Author: tsi

src/plugins/cloudinary/index.js

@@ -122,7 +122,7 @@ class CloudinaryContext {
       options.sourceTransformation = options.sourceTransformation || this.sourceTransformation();
       options.sourceTypes = options.sourceTypes || this.sourceTypes();
       options.poster = options.poster || posterOptionsForCurrent();
-      options.queryParams = Object.assign(options.queryParams || {}, options.usageReport ? { _s: `vp-${VERSION}` } : {});
+      options.queryParams = Object.assign(options.queryParams || {}, options.allowUsageReport ? { _s: `vp-${VERSION}` } : {});
 
       if (options.sourceTypes.indexOf('audio') > -1) {
         builtSrc = new AudioSource(publicId, options);

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

@@ -1,7 +1,7 @@
-import { sliceAndUnsetProperties } from 'utils/slicing';
 import { objectToQuerystring } from 'utils/querystring';
 import castArray from 'lodash/castArray';
 import { SOURCE_TYPE } from 'utils/consts';
+import { SOURCE_PARAMS } from 'video-player.const';
 import {
   CONTAINER_MIME_TYPES,
   ADAPTIVE_SOURCETYPES,
@@ -37,58 +37,21 @@ class VideoSource extends BaseSource {
       options.poster = Object.assign({ publicId }, DEFAULT_POSTER_PARAMS);
     }
 
-    const {
-      poster,
-      sourceTypes,
-      sourceTransformation,
-      info,
-      recommendations,
-      textTracks,
-      withCredentials,
-      interactionAreas,
-      chapters,
-      visualSearch
-    } = sliceAndUnsetProperties(
-      options,
-      'poster',
-      'sourceTypes',
-      'sourceTransformation',
-      'info',
-      'recommendations',
-      'textTracks',
-      'withCredentials',
-      'interactionAreas',
-      'chapters',
-      'visualSearch'
-    );
-
     super(publicId, options);
 
-    this._sourceTypes = null;
-    this._recommendations = null;
-    this._textTracks = null;
-    this._poster = null;
-    this._info = null;
-    this._sourceTransformation = null;
-    this._interactionAreas = null;
-    this._chapters = null;
-    this._visualSearch = null;
     this._type = SOURCE_TYPE.VIDEO;
     this.isRawUrl = _isRawUrl;
     this.isLiveStream = options.type === 'live';
-    this._rawTransformation = options.raw_transformation;
-    this.withCredentials = !!withCredentials;
+    this.withCredentials = !!options.withCredentials;
     this.getInitOptions = () => initOptions;
 
-    this.poster(poster, { type: options.type });
-    this.sourceTypes(sourceTypes);
-    this.sourceTransformation(sourceTransformation);
-    this.info(info);
-    this.interactionAreas(interactionAreas);
-    this.chapters(chapters);
-    this.visualSearch(visualSearch);
-    this.recommendations(recommendations);
-    this.textTracks(textTracks);
+    // Set extracted parameters using their respective methods
+    SOURCE_PARAMS.forEach(param => {
+      if (options[param] !== undefined && this[param]) {
+        this[param](options[param]);
+      }
+    });
+    
     this.objectId = generateId();
   }
 
@@ -171,7 +134,9 @@ class VideoSource extends BaseSource {
     return this;
   }
 
-  poster(publicId, options = {}) {
+  poster(publicId) {
+    let options = { type: this.getInitOptions().type };
+
     if (!publicId) {
       return this._poster;
     }
@@ -228,7 +193,7 @@ class VideoSource extends BaseSource {
       const [type, codecTrans] = formatToMimeTypeAndTransformation(sourceType);
 
       // If user's transformation include video_codec then don't add another video codec to transformation
-      if (codecTrans && !(hasCodec(opts.transformation) || hasCodec(this._rawTransformation))) {
+      if (codecTrans && !(hasCodec(opts.transformation) || hasCodec(this.raw_transformation()))) {
         opts.transformation = mergeTransformations(opts.transformation, codecTrans);
       }
 
@@ -284,6 +249,96 @@ class VideoSource extends BaseSource {
   getInteractionAreas() {
     return this._interactionAreas;
   }
+
+  // Methods for additional SOURCE_PARAMS
+  adaptiveStreaming(value) {
+    if (value === undefined) {
+      return this._adaptiveStreaming;
+    }
+    this._adaptiveStreaming = value;
+    return this;
+  }
+
+  allowUsageReport(value) {
+    if (value === undefined) {
+      return this._allowUsageReport;
+    }
+    this._allowUsageReport = value;
+    return this;
+  }
+
+  autoShowRecommendations(value) {
+    if (value === undefined) {
+      return this._autoShowRecommendations;
+    }
+    this._autoShowRecommendations = value;
+    return this;
+  }
+
+  queryParams(params) {
+    if (params === undefined) {
+      return this._queryParams;
+    }
+    this._queryParams = params;
+    return this;
+  }
+
+  raw_transformation(value) {
+    if (value === undefined) {
+      return this._raw_transformation;
+    }
+    this._raw_transformation = value;
+    return this;
+  }
+
+  shoppable(value) {
+    if (value === undefined) {
+      return this._shoppable;
+    }
+    this._shoppable = value;
+    return this;
+  }
+
+  // Additional setter methods for remaining SOURCE_PARAMS
+  source(value) {
+    if (value === undefined) {
+      return this._source;
+    }
+    this._source = value;
+    return this;
+  }
+
+  transformation(value) {
+    if (value === undefined) {
+      return this._transformation;
+    }
+    this._transformation = value;
+    return this;
+  }
+
+  cloudinaryConfig(value) {
+    if (value === undefined) {
+      return this._cloudinaryConfig;
+    }
+    this._cloudinaryConfig = value;
+    return this;
+  }
+
+  type(value) {
+    if (value === undefined) {
+      return this._typeValue;
+    }
+    this._typeValue = value;
+    return this;
+  }
+
+  posterOptions(value) {
+    if (value === undefined) {
+      return this._posterOptions;
+    }
+    this._posterOptions = value;
+    return this;
+  }
 }
 
 export default VideoSource;

src/video-player.const.js

@@ -1,62 +1,70 @@
-export const CLOUDINARY_PARAMS = [
+// Parameters that can be passed to source configuration (inherited by source method)
+export const SOURCE_PARAMS = [
+  'adaptiveStreaming',
+  'allowUsageReport',
+  'autoShowRecommendations',
+  'chapters',
   'cloudinaryConfig',
-  'transformation',
-  'sourceTypes',
-  'sourceTransformation',
+  'info',
+  'interactionAreas',
+  'poster',
   'posterOptions',
-  'autoShowRecommendations',
-  'fontFace',
-  'secure'
+  'publicId',
+  'queryParams',
+  'raw_transformation',
+  'recommendations',
+  'shoppable',
+  'source',
+  'sourceTransformation',
+  'sourceTypes',
+  'textTracks',
+  'transformation',
+  'type',
+  'visualSearch',
+  'withCredentials'
 ];
 
-export const PLAYER_PARAMS = CLOUDINARY_PARAMS.concat([
+// All parameters that can be passed to player constructor
+export const PLAYER_PARAMS = SOURCE_PARAMS.concat([
   '_internalAnalyticsMetadata',
-  'debug',
-  'publicId',
-  'source',
-  'autoplayMode',
-  'playedEventPercents',
-  'playedEventTimes',
+  'ads',
+  'aiHighlightsGraph',
   'analytics',
+  'autoplayMode',
+  'chaptersButton',
   'cloudinaryAnalytics',
-  'allowUsageReport',
-  'fluid',
-  'ima',
-  'playlistWidget',
-  'hideContextMenu',
   'colors',
+  'debug',
+  'fetchErrorUsingGet',
   'floatingWhenNotVisible',
-  'ads',
-  'showJumpControls',
-  'chaptersButton',
+  'fluid',
+  'fontFace',
+  'hideContextMenu',
+  'ima',
   'pictureInPictureToggle',
-  'textTracks',
+  'playedEventPercents',
+  'playedEventTimes',
+  'playlistWidget',
   'qualitySelector',
-  'fetchErrorUsingGet',
-  'withCredentials',
   'seekThumbnails',
-  'aiHighlightsGraph',
-  'chapters',
-  'queryParams',
-  'type',
-  'visualSearch',
-  'adaptiveStreaming'
+  'showJumpControls'
 ]);
 
+// We support both camelCase and snake_case for cloudinary SDK params
 export const CLOUDINARY_CONFIG_PARAM = [
-  'cloud_name',
-  'secure',
-  'private_cdn',
-  'secure_distribution',
+  'api_secret',
+  'auth_token',
   'cdn_subdomain',
-  'secure_cdn_subdomain',
+  'cloud_name', 
   'cname',
+  'private_cdn',
+  'secure',
+  'secure_cdn_subdomain',
+  'secure_distribution',
   'shorten',
   'sign_url',
-  'api_secret',
   'url_suffix',
-  'use_root_path',
-  'auth_token'
+  'use_root_path'
 ];
 
 export const FLUID_CLASS_NAME = 'cld-fluid';

src/video-player.js

@@ -24,6 +24,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 { SOURCE_PARAMS } from './video-player.const';
 
 const INTERNAL_ANALYTICS_URL = 'https://analytics-api-s.cloudinary.com';
 
@@ -487,10 +488,13 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._setExtendedEvents();
 
     // Load first video (mainly to support video tag 'source' and 'public-id' attributes)
-    const source = this.playerOptions.source || this.playerOptions.publicId;
+    // Source parameters are set to playerOptions.cloudinary
+    const source = this.playerOptions.cloudinary.source || this.playerOptions.cloudinary.publicId;
 
     if (source) {
-      this.source(source, this.playerOptions);
+      const sourceOptions = Object.assign({}, this.playerOptions.cloudinary);
+      
+      this.source(source, sourceOptions);
     }
   }
 
@@ -564,22 +568,14 @@ class VideoPlayer extends Utils.mixin(Eventable) {
       return this.videojs.cloudinary.source(publicId, options);
     }
 
-    if (this.playerOptions.adaptiveStreaming) {
-      options.adaptiveStreaming = this.playerOptions.adaptiveStreaming;
-    }
+    // Inherit source parameters from player options (source options take precedence)
+    const inherited = pick(this.playerOptions, SOURCE_PARAMS);
+    options = { ...inherited, ...options };
 
     if (options.shoppable && this.videojs.shoppable) {
       this.videojs.shoppable(this.videojs, options);
     }
 
-    if (this.playerOptions.allowUsageReport) {
-      options.usageReport = true;
-    }
-
-    if (this.playerOptions.withCredentials) {
-      options.withCredentials = true;
-    }
-
     this._resetReloadVideo();
     this._resetReTryVideoState();
 

src/video-player.utils.js

@@ -2,8 +2,8 @@ import videojs from 'video.js';
 import Utils from './utils';
 import defaults from './config/defaults';
 import {
-  CLOUDINARY_PARAMS,
   PLAYER_PARAMS,
+  SOURCE_PARAMS,
   FLUID_CLASS_NAME,
   AUTO_PLAY_MODE
 } from './video-player.const';
@@ -90,7 +90,7 @@ export const extractOptions = (elem, options) => {
   const playerOptions = Utils.sliceAndUnsetProperties(options, ...PLAYER_PARAMS);
 
   // Cloudinary plugin specific options
-  playerOptions.cloudinary = Utils.sliceAndUnsetProperties(playerOptions, ...CLOUDINARY_PARAMS);
+  playerOptions.cloudinary = Utils.sliceAndUnsetProperties(playerOptions, ...SOURCE_PARAMS);
 
   // Allow explicitly passing options to videojs using the `videojs` namespace, in order
   // to avoid param name conflicts: