cloudinary-video-player 4.0.4-edge.2 → 4.1.1-edge.0

package/lib/video-player.js

@@ -561,7 +561,7 @@ class TitleBar extends Component {
     const metadataUrl = appendQueryParams(`${urlPrefix}/_applet_/video_service/video_metadata/${deliveryType}/${utf8ToBase64(publicId)}.json`, source.queryParams());
     fetch(metadataUrl, {
       headers: {
-        'X-Cld-Video-Player-Version': "4.0.4-edge.2"
+        'X-Cld-Video-Player-Version': "4.1.1-edge.0"
       }
     }).then(response => {
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -3196,7 +3196,7 @@ class CloudinaryAnalytics {
       }, {
         ...(isPlainObject(this.analyticsOptions) ? this.analyticsOptions : {}),
         videoPlayerType: 'cloudinary video player',
-        videoPlayerVersion: "4.0.4-edge.2"
+        videoPlayerVersion: "4.1.1-edge.0"
       });
     } else if (this.currentVideoMetadata.cloudName !== metadata.cloudName || this.currentVideoMetadata.publicId !== metadata.publicId) {
       this.cloudinaryAnalytics.stopManualTracking();
@@ -4189,18 +4189,6 @@ async function lazyShoppablePlugin(player, options) {
   new ShoppableWidget(player, options.shoppable).init();
 }
 
-async function lazyVisualSearchPlugin(options) {
-  const player = this;
-  try {
-    const {
-      default: initPlugin
-    } = await import(/* webpackChunkName: "visual-search" */'./visual-search.js');
-    player.ready(() => initPlugin(options, player));
-  } catch (error) {
-    console.error('Failed to load plugin:', error);
-  }
-}
-
 async function lazySharePlugin(options) {
   const player = this;
   try {
@@ -4753,7 +4741,6 @@ const plugins = {
   playlist: lazyPlugin,
   shoppable: lazyShoppablePlugin,
   interactionAreas: lazyInteractionAreasPlugin,
-  visualSearch: lazyVisualSearchPlugin,
   share: lazySharePlugin,
   adaptiveStreaming: lazyAdaptiveStreamingPlugin,
   textTracksManager
@@ -4906,7 +4893,7 @@ const splitOptions = flatOptions => {
     delete playerOptions.cloudinaryConfig;
   }
 
-  // Source-level config (visualSearch, chapters, etc.)
+  // Source-level config (chapters, textTracks, etc.)
   playerOptions.sourceOptions = Utils.sliceAndUnsetProperties(playerOptions, ...SOURCE_PARAMS);
 
   // Allow explicitly passing options to videojs using the `videojs` namespace, in order
@@ -4980,7 +4967,6 @@ const getSourceOptions = function () {
       if (sourceOptions.chapters) return 'inline-chapters';
       return undefined;
     })(),
-    visualSearch: sourceOptions.visualSearch,
     download: sourceOptions.download === true ? true : undefined,
     hdr: sourceOptions.hdr === true ? true : undefined,
     recommendations: sourceOptions.recommendations && sourceOptions.recommendations.length,
@@ -5194,7 +5180,7 @@ class VideoPlayer {
       const analyticsData = getAnalyticsFromPlayerOptions(options);
       const analyticsParams = new URLSearchParams(analyticsData).toString();
       const baseParams = new URLSearchParams({
-        vpVersion: "4.0.4-edge.2",
+        vpVersion: "4.1.1-edge.0",
         vpInstanceId: this.getVPInstanceId(),
         cloudName: options.cloudinary.cloud_name,
         ...internalAnalyticsMetadata
@@ -5271,7 +5257,6 @@ class VideoPlayer {
     this._initAnalytics();
     this._initCloudinaryAnalytics();
     this._initFloatingPlayer();
-    this._initVisualSearch();
     this._initShare();
     this._initColors();
     this._initTextTracks();
@@ -5404,25 +5389,12 @@ class VideoPlayer {
       }
     });
   }
-  _initVisualSearch() {
-    // Listen for source changes to apply visual search based on source config
-    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, _ref4) => {
-      let {
-        source
-      } = _ref4;
-      if (source?._visualSearch && this.videojs.visualSearch) {
-        isFunction(this.videojs.visualSearch) ? this.videojs.visualSearch(source._visualSearch) : this.videojs.visualSearch.createSearchUI(source._visualSearch);
-      } else if (!source?._visualSearch && this.videojs.visualSearch?.clearUI) {
-        this.videojs.visualSearch.clearUI();
-      }
-    });
-  }
   _initShare() {
     // Listen for source changes to apply Share plugin based on source config
-    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, _ref5) => {
+    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, _ref4) => {
       let {
         source
-      } = _ref5;
+      } = _ref4;
       if (!this.videojs.share) {
         return;
       }
@@ -5452,10 +5424,10 @@ class VideoPlayer {
   }
   _initTextTracks() {
     this.textTracksManager = this.videojs.textTracksManager();
-    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, _ref6) => {
+    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, _ref5) => {
       let {
         source
-      } = _ref6;
+      } = _ref5;
       if (source?._textTracks) {
         this.setTextTracks(source._textTracks);
       }
@@ -5519,10 +5491,10 @@ class VideoPlayer {
   }
   _initSourceSwitcher() {
     this.sourceSwitcher = this.videojs.sourceSwitcher();
-    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, _ref7) => {
+    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, _ref6) => {
       let {
         source
-      } = _ref7;
+      } = _ref6;
       const videoSources = source.videoSources?.();
       const isSourcesListAvailable = Array.isArray(videoSources) ? !!videoSources.length : false;
       if (this.videojs.controlBar) {
@@ -5533,20 +5505,20 @@ class VideoPlayer {
         }
       }
       if (isSourcesListAvailable) {
-        const selectedIndex = videoSources.findIndex(_ref8 => {
+        const selectedIndex = videoSources.findIndex(_ref7 => {
           let {
             publicId
-          } = _ref8;
+          } = _ref7;
           return publicId === source.publicId();
         });
         this.sourceSwitcher.reInit({
           sources: videoSources,
           selectedIndex: selectedIndex === -1 ? 0 : selectedIndex,
-          onSourceChange: _ref9 => {
+          onSourceChange: _ref8 => {
             let {
               publicId,
               ...newSourceOptions
-            } = _ref9;
+            } = _ref8;
             return this.source(publicId, {
               ...newSourceOptions,
               videoSources
@@ -5651,11 +5623,11 @@ class VideoPlayer {
       volumeBar.removeAttribute('aria-live');
     }
   }
-  _onSourceChange(e, _ref0) {
+  _onSourceChange(e, _ref9) {
     let {
       source,
       sourceOptions
-    } = _ref0;
+    } = _ref9;
     this._sendInternalAnalytics({
       ...(sourceOptions && {
         sourceOptions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudinary-video-player",
-  "version": "4.0.4-edge.2",
+  "version": "4.1.1-edge.0",
   "description": "Cloudinary Video Player",
   "author": "Cloudinary",
   "license": "MIT",

package/dist/visual-search.js

@@ -1,67 +0,0 @@
-/*!
- * Cloudinary Video Player v4.0.4-edge.2
- * Built on 2026-07-30T08:21:38.281Z
- * https://github.com/cloudinary/cloudinary-video-player
- */
-"use strict";
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-(self["cloudinaryVideoPlayerChunkLoading"] = self["cloudinaryVideoPlayerChunkLoading"] || []).push([["visual-search"],{
-
-/***/ "./plugins/visual-search/components/SearchButton.js"
-/*!**********************************************************!*\
-  !*** ./plugins/visual-search/components/SearchButton.js ***!
-  \**********************************************************/
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SearchButton: () => (/* binding */ SearchButton)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n\nconst SearchButton = onClick => {\n  const button = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {\n    className: 'vjs-control vjs-button vjs-visual-search-button',\n    title: 'Search video content',\n    ariaLabel: 'Search video content'\n  });\n  const searchIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {\n    className: 'vjs-icon-search'\n  });\n  button.appendChild(searchIcon);\n  const spinnerIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {\n    className: 'vjs-loading-spinner'\n  });\n  button.appendChild(spinnerIcon);\n  button.addEventListener('click', onClick);\n  return button;\n};\n\n//# sourceURL=webpack:///./plugins/visual-search/components/SearchButton.js?\n}");
-
-/***/ },
-
-/***/ "./plugins/visual-search/components/SearchInput.js"
-/*!*********************************************************!*\
-  !*** ./plugins/visual-search/components/SearchInput.js ***!
-  \*********************************************************/
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SearchInput: () => (/* binding */ SearchInput)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n\nconst SearchInput = (onSearch, onClose) => {\n  const form = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('form', {\n    className: 'vjs-visual-search-form'\n  });\n  const input = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('input', {\n    className: 'vjs-visual-search-input',\n    type: 'text',\n    ariaLabel: 'Search input',\n    tabIndex: -1\n  });\n  const closeButton = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {\n    className: 'vjs-control vjs-button vjs-visual-search-close',\n    type: 'button',\n    title: 'Close search',\n    ariaLabel: 'Close search',\n    tabIndex: -1\n  });\n\n  // Add close icon\n  const closeIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {\n    className: 'vjs-icon-close'\n  });\n  closeButton.appendChild(closeIcon);\n  form.appendChild(input);\n  form.appendChild(closeButton);\n\n  // Handle search submission\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const query = input.value.trim();\n    if (query) {\n      onSearch(query);\n    }\n  });\n\n  // Handle close button\n  closeButton.addEventListener('click', e => {\n    e.preventDefault();\n    if (onClose) {\n      onClose();\n    }\n  });\n  return {\n    element: form,\n    input,\n    closeButton\n  };\n};\n\n//# sourceURL=webpack:///./plugins/visual-search/components/SearchInput.js?\n}");
-
-/***/ },
-
-/***/ "./plugins/visual-search/components/SearchResults.js"
-/*!***********************************************************!*\
-  !*** ./plugins/visual-search/components/SearchResults.js ***!
-  \***********************************************************/
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SearchResults: () => (/* binding */ SearchResults)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n\nconst SearchResults = player => {\n  const clearMarkers = () => {\n    player.$$('.vjs-visual-search-marker').forEach(el => el.remove());\n    player.$$('.vjs-visual-search-results-wrapper').forEach(el => el.remove());\n\n    // Remove the class that indicates search results are displayed\n    player.removeClass('vjs-visual-search-results-active');\n  };\n  const displayResults = results => {\n    // Clear existing markers\n    clearMarkers();\n    const total = player.duration();\n    const seekBar = player.controlBar.progressControl.seekBar;\n\n    // Create wrapper for search results\n    const wrapperEl = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {\n      className: 'vjs-visual-search-results-wrapper',\n      role: 'presentation'\n    });\n\n    // Add markers for each result\n    results.forEach(result => {\n      const {\n        start_time,\n        end_time\n      } = result;\n      const position = start_time / total * 100;\n      const width = (end_time - start_time) / total * 100;\n      const time = `${Math.floor(start_time / 60)}:${Math.floor(start_time % 60).toString().padStart(2, '0')}`;\n      const markerEl = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {\n        className: 'vjs-control vjs-visual-search-marker',\n        style: `left: ${position}%; width: ${width}%`,\n        tabIndex: 0,\n        role: 'button',\n        title: `Search result at ${time}`,\n        ariaLabel: `Search result at ${time}`\n      });\n      wrapperEl.appendChild(markerEl);\n\n      // Add click handler to jump to this time\n      markerEl.addEventListener('click', () => {\n        player.currentTime(start_time);\n      });\n\n      // Add keyboard support\n      markerEl.addEventListener('keydown', e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          player.currentTime(start_time);\n        }\n      });\n    });\n\n    // Add wrapper to seek bar\n    seekBar.el().appendChild(wrapperEl);\n\n    // Add a class to indicate search results are displayed\n    if (results.length > 0) {\n      player.addClass('vjs-visual-search-results-active');\n    }\n  };\n  return {\n    displayResults,\n    clearMarkers\n  };\n};\n\n//# sourceURL=webpack:///./plugins/visual-search/components/SearchResults.js?\n}");
-
-/***/ },
-
-/***/ "./plugins/visual-search/visual-search.js"
-/*!************************************************!*\
-  !*** ./plugins/visual-search/visual-search.js ***!
-  \************************************************/
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_SearchButton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/SearchButton */ \"./plugins/visual-search/components/SearchButton.js\");\n/* harmony import */ var _components_SearchInput__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/SearchInput */ \"./plugins/visual-search/components/SearchInput.js\");\n/* harmony import */ var _components_SearchResults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/SearchResults */ \"./plugins/visual-search/components/SearchResults.js\");\n/* harmony import */ var _visual_search_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./visual-search.scss */ \"./plugins/visual-search/visual-search.scss\");\n\n\n\n\n\nconst visualSearch = (options, player) => {\n  player.addClass('vjs-visual-search');\n  let isSearchActive = false;\n  const searchResults = (0,_components_SearchResults__WEBPACK_IMPORTED_MODULE_3__.SearchResults)(player);\n  const performSearch = async query => {\n    const searchButton = player.$('.vjs-visual-search-button');\n    searchButton.classList.add('vjs-waiting');\n    try {\n      const source = player.cloudinary.source();\n      const publicId = source.publicId();\n      const transformation = Object.assign({}, source.transformation());\n      transformation.flags = transformation.flags || [];\n      transformation.flags.push(`getinfo:search_b64_${btoa(query)}`);\n      const visualSearchSrc = source.config().url(`${publicId}`, {\n        transformation\n      });\n      const response = await fetch(visualSearchSrc, {\n        method: 'GET',\n        headers: {\n          'Content-Type': 'application/json'\n        }\n      });\n      if (!response.ok) {\n        throw new Error(`Search request failed with status: ${response.status}`);\n      }\n      const results = await response.json();\n      searchResults.displayResults(results.timestamps);\n      if (results && !player.hasStarted()) {\n        // Make sure the progress bar is visible\n        player.play().then(() => player.pause());\n      }\n    } catch (error) {\n      console.error('Error performing visual search:', error);\n    } finally {\n      searchButton.classList.remove('vjs-waiting');\n    }\n  };\n  const clearUI = () => {\n    isSearchActive = false;\n    searchResults.clearMarkers();\n    player.$('.vjs-visual-search-wrapper')?.remove();\n  };\n  const createSearchUI = () => {\n    clearUI();\n    const titleBar = player.$('.vjs-title-bar');\n    if (titleBar) {\n      titleBar.classList.remove('vjs-hidden');\n    }\n    const searchContainer = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {\n      className: 'vjs-visual-search-wrapper'\n    });\n\n    // Handle the search icon click (expand or submit)\n    const handleSearchButtonClick = () => {\n      if (!isSearchActive) {\n        isSearchActive = true;\n        searchContainer.classList.add('vjs-visual-search-active');\n        searchInput.input.tabIndex = 0;\n        searchInput.closeButton.tabIndex = 0;\n        searchInput.input.focus();\n      } else {\n        const query = searchInput.input.value.trim();\n        if (query) {\n          performSearch(query);\n        }\n      }\n    };\n    const closeSearch = () => {\n      if (isSearchActive) {\n        isSearchActive = false;\n        searchContainer.classList.remove('vjs-visual-search-active');\n        searchInput.input.value = '';\n        searchInput.input.tabIndex = -1;\n        searchInput.closeButton.tabIndex = -1;\n        searchResults.clearMarkers();\n      }\n    };\n    const searchButton = (0,_components_SearchButton__WEBPACK_IMPORTED_MODULE_1__.SearchButton)(handleSearchButtonClick);\n    const searchInput = (0,_components_SearchInput__WEBPACK_IMPORTED_MODULE_2__.SearchInput)(performSearch, closeSearch);\n    searchContainer.appendChild(searchButton);\n    searchContainer.appendChild(searchInput.element);\n    titleBar.prepend(searchContainer);\n    player.on('keydown', e => {\n      if (e.key === 'Escape' && isSearchActive) {\n        closeSearch();\n      }\n    });\n  };\n  createSearchUI();\n\n  // Public methods\n  player.visualSearch = {\n    createSearchUI,\n    clearUI\n  };\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (visualSearch);\n\n//# sourceURL=webpack:///./plugins/visual-search/visual-search.js?\n}");
-
-/***/ },
-
-/***/ "./plugins/visual-search/visual-search.scss"
-/*!**************************************************!*\
-  !*** ./plugins/visual-search/visual-search.scss ***!
-  \**************************************************/
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack:///./plugins/visual-search/visual-search.scss?\n}");
-
-/***/ }
-
-}]);

package/dist/visual-search.min.js

@@ -1,6 +0,0 @@
-/*!
- * Cloudinary Video Player v4.0.4-edge.2
- * Built on 2026-07-30T08:21:21.690Z
- * https://github.com/cloudinary/cloudinary-video-player
- */
-"use strict";(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=(e=>{const a=r().dom.createEl("button",{className:"vjs-control vjs-button vjs-visual-search-button",title:"Search video content",ariaLabel:"Search video content"}),s=r().dom.createEl("span",{className:"vjs-icon-search"});a.appendChild(s);const t=r().dom.createEl("span",{className:"vjs-loading-spinner"});return a.appendChild(t),a.addEventListener("click",e),a})(()=>{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()}),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}}}}]);

package/lib/visual-search.js

@@ -1,235 +0,0 @@
-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 };