chore: rename histogram to aiHighlightsGraph

docs/histogram.html → docs/aiHighlightsGraph.html

@@ -30,7 +30,7 @@
       var player = cloudinary.videoPlayer('player', {
         cloud_name: 'demo',
         publicId: 'cld-imagine',
-        showHistogram: true
+        aiHighlightsGraph: true
       });
 
     }, false);
@@ -43,7 +43,7 @@
       <a href="./index.html">&#60;&#60; Back to examples index</a>
     </nav>
     <h1>Cloudinary Video Player</h1>
-    <h3 class="mb-4">Progress Bar Histogram Graph</h3>
+    <h3 class="mb-4">AI Highlights Graph</h3>
 
     <video
       id="player"
@@ -77,7 +77,7 @@ <h3 class="mt-4">Example Code:</h3>
         var player = cloudinary.videoPlayer('player', {
           cloud_name: 'demo',
           publicId: 'cld-imagine',
-          showHistogram: true
+          aiHighlightsGraph: true
         });
       </code>
     </pre>

docs/index.html

@@ -60,7 +60,7 @@ <h3 class="mt-4">Some code examples:</h3>
       <li><a href="./components.html">Components</a></li>
       <li><a href="./recommendations.html">Recommendations</a></li>
       <li><a href="./fluid.html">Fluid Layouts</a></li>
-      <li><a href="./histogram.html">Histogram</a></li>
+      <li><a href="./aiHighlightsGraph.html">AI Highlights Graph</a></li>
       <li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
       <li><a href="./360.html">360 Videos</a></li>
       <li><a href="./floating-player.html">Floating Player</a></li>

src/config/defaults.js

@@ -13,7 +13,7 @@ export default {
     'pictureInPictureToggle': false
   },
   seekThumbnails: true,
-  showHistogram: false,
+  aiHighlightsGraph: false,
   preload: PRELOAD.AUTO,
   textTrackSettings: false,
   loop: false,

src/plugins/histogram/histogram.scss → src/plugins/aiHighlightsGraph/aiHighlightsGraph.scss

@@ -13,7 +13,7 @@
     z-index: 0;
   }
 }
-.vjs-histogram-display {
+.vjs-highlights-graph-display {
   position: absolute;
   left: 0;
   right: 0;

src/plugins/histogram/index.js → src/plugins/aiHighlightsGraph/index.js

@@ -1,6 +1,6 @@
 import videojs from 'video.js';
 
-import './histogram.scss';
+import './aiHighlightsGraph.scss';
 
 // Default options for the plugin.
 let defaults = {};
@@ -16,8 +16,8 @@ let defaults = {};
  *           A plain object containing options for the plugin.
  */
 const onPlayerReady = function onPlayerReady(player, options) {
-  player.addClass('vjs-histogram');
-  player.histogram = new HistogramPlugin(player, options);
+  player.addClass('vjs-ai-highlights-graph');
+  player.aiHighlightsGraph = new HighlightsGraphPlugin(player, options);
 };
 
 /**
@@ -28,22 +28,22 @@ const onPlayerReady = function onPlayerReady(player, options) {
  * depending on how the plugin is invoked. This may or may not be important
  * to you; if not, remove the wait for "ready"!
  *
- * @function histogram
+ * @function aiHighlightsGraph
  * @param    {Object} [options={}]
  *           An object of options left to the plugin author to define.
  */
-function histogram(options) {
+function aiHighlightsGraph(options) {
   this.ready(() => {
     onPlayerReady(this, videojs.mergeOptions(defaults, options));
   });
 }
 
 /**
- * Histogram class.
+ * HighlightsGraphPlugin class.
  *
- * This class performs all functions related to displaying the Histogram bar.
+ * This class performs all functions related to displaying the AI highlights graph.
  */
-const HistogramPlugin = (function () {
+const HighlightsGraphPlugin = (function () {
 
   /**
    * Plugin class constructor, called by videojs on
@@ -56,61 +56,61 @@ const HistogramPlugin = (function () {
    * @param    {Object} [options={}]
    *           A plain object containing options for the plugin.
    */
-  function HistogramPlugin(player, options) {
+  function HighlightsGraphPlugin(player, options) {
     this.player = player;
     this.options = options;
-    this.initializeHistogram();
+    this.initializeHighlightsGraph();
     this.registeredEvents = {};
     return this;
   }
 
-  HistogramPlugin.prototype.src = function src(source) {
+  HighlightsGraphPlugin.prototype.src = function src(source) {
     this.resetPlugin();
     this.options.src = source;
-    this.initializeHistogram();
+    this.initializeHighlightsGraph();
   };
 
-  HistogramPlugin.prototype.detach = function detach() {
+  HighlightsGraphPlugin.prototype.detach = function detach() {
     this.resetPlugin();
   };
 
-  HistogramPlugin.prototype.resetPlugin = function resetPlugin() {
-    if (this.histogramHolder) {
-      this.histogramHolder.parentNode.removeChild(this.histogramHolder);
+  HighlightsGraphPlugin.prototype.resetPlugin = function resetPlugin() {
+    if (this.graphHolder) {
+      this.graphHolder.parentNode.removeChild(this.graphHolder);
     }
     delete this.progressBar;
-    delete this.histogramHolder;
+    delete this.graphHolder;
     delete this.lastStyle;
   };
 
   /**
    * Bootstrap the plugin.
    */
-  HistogramPlugin.prototype.initializeHistogram = function initializeHistogram() {
+  HighlightsGraphPlugin.prototype.initializeHighlightsGraph = function initializeHighlightsGraph() {
     if (!this.options.src) {
       return;
     }
 
     fetch(this.options.src).then((res) => {
       return res.json();
     }).then((res) => {
-      this.setupHistogramElement();
-      if (this.histogramHolder) {
-        this.createHistogram(res);
+      this.setupHighlightsGraphElement();
+      if (this.graphHolder) {
+        this.createHighlightsGraph(res);
       }
     });
   };
 
-  HistogramPlugin.prototype.setupHistogramElement = function setupHistogramElement() {
+  HighlightsGraphPlugin.prototype.setupHighlightsGraphElement = function setupHighlightsGraphElement() {
     const mouseDisplay = this.player.$('.vjs-mouse-display');
     this.progressBar = this.player.$('.vjs-progress-control');
     if (!this.progressBar) {
       return;
     }
-    const histogramHolder = this.player.$('.vjs-histogram-display') || document.createElement('div');
-    histogramHolder.setAttribute('class', 'vjs-histogram-display');
-    this.progressBar.appendChild(histogramHolder);
-    this.histogramHolder = histogramHolder;
+    const graphHolder = this.player.$('.vjs-highlights-graph-display') || document.createElement('div');
+    graphHolder.setAttribute('class', 'vjs-highlights-graph-display');
+    this.progressBar.appendChild(graphHolder);
+    this.graphHolder = graphHolder;
     if (mouseDisplay) {
       mouseDisplay.classList.add('vjs-hidden');
     }
@@ -119,7 +119,7 @@ const HistogramPlugin = (function () {
   /**
    * Function to create the SVG path element
    */
-  HistogramPlugin.prototype.createPath = function createPath(dataArray, containerWidth, containerHeight) {
+  HighlightsGraphPlugin.prototype.createPath = function createPath(dataArray, containerWidth, containerHeight) {
     // Calculate the x and y coordinates for each point
     const stepX = containerWidth / (dataArray.length - 1);
     const points = dataArray.map((value, index) => ({
@@ -148,12 +148,12 @@ const HistogramPlugin = (function () {
     return path;
   };
 
-  HistogramPlugin.prototype.createHistogram = function createHistogram(info) {
+  HighlightsGraphPlugin.prototype.createHighlightsGraph = function createHighlightsGraph(info) {
     const data = info.data;
     const svgWidth = 600;
     const svgHeight = 20;
 
-    const svg = this.player.$('.vjs-histogram-display > svg') || document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const svg = this.player.$('.vjs-highlights-graph-display > svg') || document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
     svg.setAttribute('preserveAspectRatio', 'none');
     svg.setAttribute('width', svgWidth);
@@ -163,10 +163,10 @@ const HistogramPlugin = (function () {
     const path = this.createPath(data, svgWidth, svgHeight);
     svg.appendChild(path);
 
-    this.histogramHolder.appendChild(svg);
+    this.graphHolder.appendChild(svg);
   };
 
-  return HistogramPlugin;
+  return HighlightsGraphPlugin;
 }());
 
-export default histogram;
+export default aiHighlightsGraph;

src/plugins/colors/index.js

@@ -48,7 +48,7 @@ const playerColors = `
     color: --base-color;
   }
 
-  .PLAYER-CLASS-PREFIX .vjs-histogram-display {
+  .PLAYER-CLASS-PREFIX .vjs-highlights-graph-display {
     color: rgba(--text-color, 0.3);
   }
 

src/plugins/index.js

@@ -13,7 +13,7 @@ import cloudinary from './cloudinary';
 import analytics from './analytics';
 import cloudinaryAnalytics from './cloudinary-analytics';
 import vttThumbnails from './vtt-thumbnails';
-import histogram from './histogram';
+import aiHighlightsGraph from './aiHighlightsGraph';
 
 const plugins = {
   autoplayOnScroll,
@@ -24,7 +24,7 @@ const plugins = {
   analytics,
   cloudinaryAnalytics,
   vttThumbnails,
-  histogram,
+  aiHighlightsGraph,
   // #if (!process.env.WEBPACK_BUILD_LIGHT)
   interactive,
   dashPlugin,

src/validators/validators.js

@@ -44,7 +44,7 @@ export const playerValidators = {
     playedEventPercents: validator.isArrayOfNumbers,
     showJumpControls: validator.isBoolean,
     seekThumbnails: validator.isBoolean,
-    showHistogram: validator.isBoolean,
+    aiHighlightsGraph: validator.isBoolean,
     floatingWhenNotVisible: validator.isString(FLOATING_TO),
     playedEventTimes: validator.isArray,
     playlistWidget: {

src/video-player.const.js

@@ -32,7 +32,7 @@ export const PLAYER_PARAMS = CLOUDINARY_PARAMS.concat([
   'fetchErrorUsingGet',
   'withCredentials',
   'seekThumbnails',
-  'showHistogram',
+  'aiHighlightsGraph',
   'queryParams'
 ]);
 

src/video-player.js

@@ -187,7 +187,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._initFloatingPlayer();
     this._initColors();
     this._initTextTracks();
-    this._initHistogram();
+    this._initHighlightsGraph();
     this._initSeekThumbs();
   }
 
@@ -278,8 +278,8 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     }
   }
 
-  _initHistogram() {
-    if (this.playerOptions.showHistogram) {
+  _initHighlightsGraph() {
+    if (this.playerOptions.aiHighlightsGraph) {
       this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, { source }) => {
         if (
           !source ||
@@ -300,14 +300,14 @@ class VideoPlayer extends Utils.mixin(Eventable) {
         transformation.flags = transformation.flags || [];
         transformation.flags.push('getinfo');
 
-        const histogramSrc = source.config()
+        const aiHighlightsGraphSrc = source.config()
           .url(`${publicId}`, { transformation })
           .replace(/\.json$/, ''); // Handle playlist by tag
 
         // Plugin is called differently on init and on source update.
-        isFunction(this.videojs.histogram)
-          ? this.videojs.histogram({ src: histogramSrc })
-          : this.videojs.histogram.src(histogramSrc);
+        isFunction(this.videojs.aiHighlightsGraph)
+          ? this.videojs.aiHighlightsGraph({ src: aiHighlightsGraphSrc })
+          : this.videojs.aiHighlightsGraph.src(aiHighlightsGraphSrc);
       });
     }
   }