cloudinary-video-player 3.12.1 → 3.12.2-edge.0

package/lib/visual-search.js

@@ -1 +1,235 @@
-(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[728],{9148:(e,a,s)=>{s.d(a,{default:()=>l});var t=s(6673),r=s.n(t);const l=(e,a)=>{a.addClass("vjs-visual-search");let s=!1;const t=(e=>{const a=()=>{e.$$(".vjs-visual-search-marker").forEach(e=>e.remove()),e.$$(".vjs-visual-search-results-wrapper").forEach(e=>e.remove()),e.removeClass("vjs-visual-search-results-active")};return{displayResults:s=>{a();const t=e.duration(),l=e.controlBar.progressControl.seekBar,n=r().dom.createEl("div",{className:"vjs-visual-search-results-wrapper",role:"presentation"});s.forEach(a=>{const{start_time:s,end_time:l}=a,c=s/t*100,o=(l-s)/t*100,i=`${Math.floor(s/60)}:${Math.floor(s%60).toString().padStart(2,"0")}`,d=r().dom.createEl("div",{className:"vjs-control vjs-visual-search-marker",style:`left: ${c}%; width: ${o}%`,tabIndex:0,role:"button",title:`Search result at ${i}`,ariaLabel:`Search result at ${i}`});n.appendChild(d),d.addEventListener("click",()=>{e.currentTime(s)}),d.addEventListener("keydown",a=>{"Enter"!==a.key&&" "!==a.key||(a.preventDefault(),e.currentTime(s))})}),l.el().appendChild(n),s.length>0&&e.addClass("vjs-visual-search-results-active")},clearMarkers:a}})(a),l=async e=>{const s=a.$(".vjs-visual-search-button");s.classList.add("vjs-waiting");try{const s=a.cloudinary.source(),r=s.publicId(),l=Object.assign({},s.transformation());l.flags=l.flags||[],l.flags.push(`getinfo:search_b64_${btoa(e)}`);const n=s.config().url(`${r}`,{transformation:l}),c=await fetch(n,{method:"GET",headers:{"Content-Type":"application/json"}});if(!c.ok)throw new Error(`Search request failed with status: ${c.status}`);const o=await c.json();t.displayResults(o.timestamps),o&&!a.hasStarted()&&a.play().then(()=>a.pause())}catch(e){console.error("Error performing visual search:",e)}finally{s.classList.remove("vjs-waiting")}},n=()=>{s=!1,t.clearMarkers(),a.$(".vjs-visual-search-wrapper")?.remove()},c=()=>{n();const e=a.$(".vjs-title-bar");e&&e.classList.remove("vjs-hidden");const c=r().dom.createEl("div",{className:"vjs-visual-search-wrapper"}),o=()=>{s&&(s=!1,c.classList.remove("vjs-visual-search-active"),d.input.value="",d.input.tabIndex=-1,d.closeButton.tabIndex=-1,t.clearMarkers())},i=(()=>{const e=r().dom.createEl("button",{className:"vjs-control vjs-button vjs-visual-search-button",title:"Search video content",ariaLabel:"Search video content"}),a=r().dom.createEl("span",{className:"vjs-icon-search"});e.appendChild(a);const t=r().dom.createEl("span",{className:"vjs-loading-spinner"});return e.appendChild(t),e.addEventListener("click",()=>{if(s){const e=d.input.value.trim();e&&l(e)}else s=!0,c.classList.add("vjs-visual-search-active"),d.input.tabIndex=0,d.closeButton.tabIndex=0,d.input.focus()}),e})(),d=((e,a)=>{const s=r().dom.createEl("form",{className:"vjs-visual-search-form"}),t=r().dom.createEl("input",{className:"vjs-visual-search-input",type:"text",ariaLabel:"Search input",tabIndex:-1}),l=r().dom.createEl("button",{className:"vjs-control vjs-button vjs-visual-search-close",type:"button",title:"Close search",ariaLabel:"Close search",tabIndex:-1}),n=r().dom.createEl("span",{className:"vjs-icon-close"});return l.appendChild(n),s.appendChild(t),s.appendChild(l),s.addEventListener("submit",a=>{a.preventDefault();const s=t.value.trim();s&&e(s)}),l.addEventListener("click",e=>{e.preventDefault(),a&&a()}),{element:s,input:t,closeButton:l}})(l,o);c.appendChild(i),c.appendChild(d.element),e.prepend(c),a.on("keydown",e=>{"Escape"===e.key&&s&&o()})};c(),a.visualSearch={createSearchUI:c,clearUI:n}}}}]);
+import { _ as _vjs } from './_videojs-proxy.js';
+import './_commonjsHelpers.js';
+
+const SearchButton = onClick => {
+  const button = _vjs.dom.createEl('button', {
+    className: 'vjs-control vjs-button vjs-visual-search-button',
+    title: 'Search video content',
+    ariaLabel: 'Search video content'
+  });
+  const searchIcon = _vjs.dom.createEl('span', {
+    className: 'vjs-icon-search'
+  });
+  button.appendChild(searchIcon);
+  const spinnerIcon = _vjs.dom.createEl('span', {
+    className: 'vjs-loading-spinner'
+  });
+  button.appendChild(spinnerIcon);
+  button.addEventListener('click', onClick);
+  return button;
+};
+
+const SearchInput = (onSearch, onClose) => {
+  const form = _vjs.dom.createEl('form', {
+    className: 'vjs-visual-search-form'
+  });
+  const input = _vjs.dom.createEl('input', {
+    className: 'vjs-visual-search-input',
+    type: 'text',
+    ariaLabel: 'Search input',
+    tabIndex: -1
+  });
+  const closeButton = _vjs.dom.createEl('button', {
+    className: 'vjs-control vjs-button vjs-visual-search-close',
+    type: 'button',
+    title: 'Close search',
+    ariaLabel: 'Close search',
+    tabIndex: -1
+  });
+
+  // Add close icon
+  const closeIcon = _vjs.dom.createEl('span', {
+    className: 'vjs-icon-close'
+  });
+  closeButton.appendChild(closeIcon);
+  form.appendChild(input);
+  form.appendChild(closeButton);
+
+  // Handle search submission
+  form.addEventListener('submit', e => {
+    e.preventDefault();
+    const query = input.value.trim();
+    if (query) {
+      onSearch(query);
+    }
+  });
+
+  // Handle close button
+  closeButton.addEventListener('click', e => {
+    e.preventDefault();
+    if (onClose) {
+      onClose();
+    }
+  });
+  return {
+    element: form,
+    input,
+    closeButton
+  };
+};
+
+const SearchResults = player => {
+  const clearMarkers = () => {
+    player.$$('.vjs-visual-search-marker').forEach(el => el.remove());
+    player.$$('.vjs-visual-search-results-wrapper').forEach(el => el.remove());
+
+    // Remove the class that indicates search results are displayed
+    player.removeClass('vjs-visual-search-results-active');
+  };
+  const displayResults = results => {
+    // Clear existing markers
+    clearMarkers();
+    const total = player.duration();
+    const seekBar = player.controlBar.progressControl.seekBar;
+
+    // Create wrapper for search results
+    const wrapperEl = _vjs.dom.createEl('div', {
+      className: 'vjs-visual-search-results-wrapper',
+      role: 'presentation'
+    });
+
+    // Add markers for each result
+    results.forEach(result => {
+      const {
+        start_time,
+        end_time
+      } = result;
+      const position = start_time / total * 100;
+      const width = (end_time - start_time) / total * 100;
+      const time = `${Math.floor(start_time / 60)}:${Math.floor(start_time % 60).toString().padStart(2, '0')}`;
+      const markerEl = _vjs.dom.createEl('div', {
+        className: 'vjs-control vjs-visual-search-marker',
+        style: `left: ${position}%; width: ${width}%`,
+        tabIndex: 0,
+        role: 'button',
+        title: `Search result at ${time}`,
+        ariaLabel: `Search result at ${time}`
+      });
+      wrapperEl.appendChild(markerEl);
+
+      // Add click handler to jump to this time
+      markerEl.addEventListener('click', () => {
+        player.currentTime(start_time);
+      });
+
+      // Add keyboard support
+      markerEl.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          player.currentTime(start_time);
+        }
+      });
+    });
+
+    // Add wrapper to seek bar
+    seekBar.el().appendChild(wrapperEl);
+
+    // Add a class to indicate search results are displayed
+    if (results.length > 0) {
+      player.addClass('vjs-visual-search-results-active');
+    }
+  };
+  return {
+    displayResults,
+    clearMarkers
+  };
+};
+
+const visualSearch = (options, player) => {
+  player.addClass('vjs-visual-search');
+  let isSearchActive = false;
+  const searchResults = SearchResults(player);
+  const performSearch = async query => {
+    const searchButton = player.$('.vjs-visual-search-button');
+    searchButton.classList.add('vjs-waiting');
+    try {
+      const source = player.cloudinary.source();
+      const publicId = source.publicId();
+      const transformation = Object.assign({}, source.transformation());
+      transformation.flags = transformation.flags || [];
+      transformation.flags.push(`getinfo:search_b64_${btoa(query)}`);
+      const visualSearchSrc = source.config().url(`${publicId}`, {
+        transformation
+      });
+      const response = await fetch(visualSearchSrc, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+      if (!response.ok) {
+        throw new Error(`Search request failed with status: ${response.status}`);
+      }
+      const results = await response.json();
+      searchResults.displayResults(results.timestamps);
+      if (results && !player.hasStarted()) {
+        // Make sure the progress bar is visible
+        player.play().then(() => player.pause());
+      }
+    } catch (error) {
+      console.error('Error performing visual search:', error);
+    } finally {
+      searchButton.classList.remove('vjs-waiting');
+    }
+  };
+  const clearUI = () => {
+    isSearchActive = false;
+    searchResults.clearMarkers();
+    player.$('.vjs-visual-search-wrapper')?.remove();
+  };
+  const createSearchUI = () => {
+    clearUI();
+    const titleBar = player.$('.vjs-title-bar');
+    if (titleBar) {
+      titleBar.classList.remove('vjs-hidden');
+    }
+    const searchContainer = _vjs.dom.createEl('div', {
+      className: 'vjs-visual-search-wrapper'
+    });
+
+    // Handle the search icon click (expand or submit)
+    const handleSearchButtonClick = () => {
+      if (!isSearchActive) {
+        isSearchActive = true;
+        searchContainer.classList.add('vjs-visual-search-active');
+        searchInput.input.tabIndex = 0;
+        searchInput.closeButton.tabIndex = 0;
+        searchInput.input.focus();
+      } else {
+        const query = searchInput.input.value.trim();
+        if (query) {
+          performSearch(query);
+        }
+      }
+    };
+    const closeSearch = () => {
+      if (isSearchActive) {
+        isSearchActive = false;
+        searchContainer.classList.remove('vjs-visual-search-active');
+        searchInput.input.value = '';
+        searchInput.input.tabIndex = -1;
+        searchInput.closeButton.tabIndex = -1;
+        searchResults.clearMarkers();
+      }
+    };
+    const searchButton = SearchButton(handleSearchButtonClick);
+    const searchInput = SearchInput(performSearch, closeSearch);
+    searchContainer.appendChild(searchButton);
+    searchContainer.appendChild(searchInput.element);
+    titleBar.prepend(searchContainer);
+    player.on('keydown', e => {
+      if (e.key === 'Escape' && isSearchActive) {
+        closeSearch();
+      }
+    });
+  };
+  createSearchUI();
+
+  // Public methods
+  player.visualSearch = {
+    createSearchUI,
+    clearUI
+  };
+};
+
+export { visualSearch as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudinary-video-player",
-  "version": "3.12.1",
+  "version": "3.12.2-edge.0",
   "description": "Cloudinary Video Player",
   "author": "Cloudinary",
   "license": "MIT",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/cloudinary/cloudinary-video-player.git"
   },
-  "module": "./lib/cld-video-player.js",
+  "module": "./lib/index.js",
   "main": "./dist/cld-video-player.min.js",
   "style": "./dist/cld-video-player.min.css",
   "types": "./types/cld-video-player.d.ts",
@@ -22,9 +22,28 @@
   "exports": {
     ".": {
       "types": "./types/cld-video-player.d.ts",
-      "import": "./lib/cld-video-player.js",
+      "import": "./lib/index.js",
       "require": "./dist/cld-video-player.min.js"
     },
+    "./videoPlayer": {
+      "import": "./lib/videoPlayer.js",
+      "require": "./dist/cld-video-player.min.js"
+    },
+    "./player": {
+      "import": "./lib/player.js",
+      "require": "./dist/cld-video-player.min.js"
+    },
+    "./all": {
+      "import": "./lib/all.js",
+      "require": "./dist/cld-video-player.min.js"
+    },
+    "./lazy": {
+      "import": "./lib/lazy.js",
+      "require": "./dist/cld-video-player-lazy.min.js"
+    },
+    "./cld-video-player.min.css": "./lib/cld-video-player.min.css",
+    "./shoppable": "./lib/shoppable-widget.js",
+    "./interaction-areas": "./lib/interaction-areas.service.js",
     "./*": "./lib/*",
     "./light/*": "./lib/*"
   },
@@ -34,7 +53,7 @@
     "start": "webpack serve --config webpack/dev.config.js",
     "build": "WEBPACK_BUILD_MIN=1 webpack --config webpack/build.config.js --progress --color",
     "build-dev": "webpack --config webpack/build.config.js  --progress --color --mode=development",
-    "build-es": "WEBPACK_BUILD_MIN=1 webpack --config webpack/es6.config.js --progress --color",
+    "build-es": "rollup -c rollup.esm.config.js",
     "build-light": "node webpack/copy-light-bundle.js",
     "build-all": "npm run clean && npm run build && npm run build-dev && npm run build-es && npm run build-light",
     "analyze": "webpack --config webpack/analyzer.config.js",
@@ -62,19 +81,11 @@
     "files": [
       {
         "path": "./dist/cld-video-player.min.js",
-        "maxSize": "137kb"
-      },
-      {
-        "path": "./lib/cld-video-player.js",
-        "maxSize": "137kb"
-      },
-      {
-        "path": "./lib/videoPlayer.js",
-        "maxSize": "137kb"
+        "maxSize": "140kb"
       },
       {
-        "path": "./lib/all.js",
-        "maxSize": "330kb"
+        "path": "./dist/cld-video-player-lazy.min.js",
+        "maxSize": "10kb"
       }
     ]
   },
@@ -96,6 +107,10 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.0",
     "@actions/core": "^1.11.1",
     "@actions/github": "^6.0.1",
     "@babel/core": "^7.28.5",
@@ -116,6 +131,7 @@
     "conventional-changelog-angular": "^8.1.0",
     "conventional-changelog-cli": "^5.0.0",
     "conventional-recommended-bump": "^11.2.0",
+    "rollup": "^4.28.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",

package/lib/adaptive-streaming.js.LICENSE.txt

@@ -1,3 +0,0 @@
-/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
-
-/*! @name videojs-contrib-quality-menu @version 1.0.4 @license Apache-2.0 */

package/lib/all.js.LICENSE.txt

@@ -1,25 +0,0 @@
-/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
-
-/*! @name videojs-contrib-quality-menu @version 1.0.4 @license Apache-2.0 */
-
-/*! @name videojs-per-source-behaviors @version 3.0.1 @license Apache-2.0 */
-
-/**
-   * @license
-   * slighly modified parse-headers 2.0.2 <https://github.com/kesla/parse-headers/>
-   * Copyright (c) 2014 David Björklund
-   * Available under the MIT license
-   * <https://github.com/kesla/parse-headers/blob/master/LICENCE>
-   */
-
-/**
- * @license
- * Video.js 8.23.4 <http://videojs.com/>
- * Copyright Brightcove, Inc. <https://www.brightcove.com/>
- * Available under Apache License Version 2.0
- * <https://github.com/videojs/video.js/blob/main/LICENSE>
- *
- * Includes vtt.js <https://github.com/mozilla/vtt.js>
- * Available under Apache License Version 2.0
- * <https://github.com/mozilla/vtt.js/blob/main/LICENSE>
- */