cloudinary-video-player 2.3.6-edge.7 → 2.4.0

package/dist/visual-search.js

@@ -16,8 +16,9 @@ __webpack_require__.r(__webpack_exports__);
 
 const SearchButton = onClick => {
   const button = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {
-    className: 'vjs-visual-search-button',
-    title: 'Search video content'
+    className: 'vjs-control vjs-button vjs-visual-search-button',
+    title: 'Search video content',
+    ariaLabel: 'Search video content'
   });
   const searchIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {
     className: 'vjs-icon-search'
@@ -52,12 +53,16 @@ const SearchInput = (onSearch, onClose) => {
   });
   const input = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('input', {
     className: 'vjs-visual-search-input',
-    type: 'text'
+    type: 'text',
+    ariaLabel: 'Search input',
+    tabIndex: -1
   });
   const closeButton = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {
-    className: 'vjs-visual-search-close',
+    className: 'vjs-control vjs-button vjs-visual-search-close',
     type: 'button',
-    title: 'Close search'
+    title: 'Close search',
+    ariaLabel: 'Close search',
+    tabIndex: -1
   });
 
   // Add close icon
@@ -86,7 +91,8 @@ const SearchInput = (onSearch, onClose) => {
   });
   return {
     element: form,
-    input
+    input,
+    closeButton
   };
 };
 
@@ -121,7 +127,8 @@ const SearchResults = player => {
 
     // Create wrapper for search results
     const wrapperEl = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {
-      className: 'vjs-visual-search-results-wrapper'
+      className: 'vjs-visual-search-results-wrapper',
+      role: 'presentation'
     });
 
     // Add markers for each result
@@ -130,9 +137,16 @@ const SearchResults = player => {
         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 = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {
-        className: 'vjs-visual-search-marker',
-        style: `left: ${start_time / total * 100}%; width: ${(end_time - start_time) / total * 100}%`
+        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);
 
@@ -140,6 +154,14 @@ const SearchResults = player => {
       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
@@ -236,6 +258,8 @@ const visualSearch = (options, player) => {
       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();
@@ -249,6 +273,8 @@ const visualSearch = (options, player) => {
         isSearchActive = false;
         searchContainer.classList.remove('vjs-visual-search-active');
         searchInput.input.value = '';
+        searchInput.input.tabIndex = -1;
+        searchInput.closeButton.tabIndex = -1;
         searchResults.clearMarkers();
       }
     };

package/dist/visual-search.light.js

@@ -16,8 +16,9 @@ __webpack_require__.r(__webpack_exports__);
 
 const SearchButton = onClick => {
   const button = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {
-    className: 'vjs-visual-search-button',
-    title: 'Search video content'
+    className: 'vjs-control vjs-button vjs-visual-search-button',
+    title: 'Search video content',
+    ariaLabel: 'Search video content'
   });
   const searchIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {
     className: 'vjs-icon-search'
@@ -52,12 +53,16 @@ const SearchInput = (onSearch, onClose) => {
   });
   const input = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('input', {
     className: 'vjs-visual-search-input',
-    type: 'text'
+    type: 'text',
+    ariaLabel: 'Search input',
+    tabIndex: -1
   });
   const closeButton = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {
-    className: 'vjs-visual-search-close',
+    className: 'vjs-control vjs-button vjs-visual-search-close',
     type: 'button',
-    title: 'Close search'
+    title: 'Close search',
+    ariaLabel: 'Close search',
+    tabIndex: -1
   });
 
   // Add close icon
@@ -86,7 +91,8 @@ const SearchInput = (onSearch, onClose) => {
   });
   return {
     element: form,
-    input
+    input,
+    closeButton
   };
 };
 
@@ -121,7 +127,8 @@ const SearchResults = player => {
 
     // Create wrapper for search results
     const wrapperEl = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {
-      className: 'vjs-visual-search-results-wrapper'
+      className: 'vjs-visual-search-results-wrapper',
+      role: 'presentation'
     });
 
     // Add markers for each result
@@ -130,9 +137,16 @@ const SearchResults = player => {
         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 = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {
-        className: 'vjs-visual-search-marker',
-        style: `left: ${start_time / total * 100}%; width: ${(end_time - start_time) / total * 100}%`
+        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);
 
@@ -140,6 +154,14 @@ const SearchResults = player => {
       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
@@ -236,6 +258,8 @@ const visualSearch = (options, player) => {
       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();
@@ -249,6 +273,8 @@ const visualSearch = (options, player) => {
         isSearchActive = false;
         searchContainer.classList.remove('vjs-visual-search-active');
         searchInput.input.value = '';
+        searchInput.input.tabIndex = -1;
+        searchInput.closeButton.tabIndex = -1;
         searchResults.clearMarkers();
       }
     };

package/dist/visual-search.light.min.js

@@ -1,2 +1,2 @@
-"use strict";(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[728],{9148:(e,s,a)=>{a.d(s,{default:()=>l});var t=a(6673),r=a.n(t);const l=(e,s)=>{s.addClass("vjs-visual-search");let a=!1;const t=(e=>{const s=()=>{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:a=>{s();const t=e.duration(),l=e.controlBar.progressControl.seekBar,c=r().dom.createEl("div",{className:"vjs-visual-search-results-wrapper"});a.forEach((s=>{const{start_time:a,end_time:l}=s,i=r().dom.createEl("div",{className:"vjs-visual-search-marker",style:`left: ${a/t*100}%; width: ${(l-a)/t*100}%`});c.appendChild(i),i.addEventListener("click",(()=>{e.currentTime(a)}))})),l.el().appendChild(c),a.length>0&&e.addClass("vjs-visual-search-results-active")},clearMarkers:s}})(s),l=async e=>{const a=s.$(".vjs-visual-search-button");a.classList.add("vjs-waiting");try{const a=s.cloudinary.source(),r=a.publicId(),l=Object.assign({},a.transformation());l.flags=l.flags||[],l.flags.push(`getinfo:search_b64_${btoa(e)}`);const c=a.config().url(`${r}`,{transformation:l}),i=await fetch(c,{method:"GET",headers:{"Content-Type":"application/json"}});if(!i.ok)throw new Error(`Search request failed with status: ${i.status}`);const n=await i.json();t.displayResults(n.timestamps),n&&!s.hasStarted()&&s.play().then((()=>s.pause()))}catch(e){console.error("Error performing visual search:",e)}finally{a.classList.remove("vjs-waiting")}},c=()=>{a=!1,t.clearMarkers(),s.$(".vjs-visual-search-wrapper")?.remove()},i=()=>{c();const e=s.$(".vjs-title-bar");e&&e.classList.remove("vjs-hidden");const i=r().dom.createEl("div",{className:"vjs-visual-search-wrapper"}),n=()=>{a&&(a=!1,i.classList.remove("vjs-visual-search-active"),d.input.value="",t.clearMarkers())},o=(e=>{const s=r().dom.createEl("button",{className:"vjs-visual-search-button",title:"Search video content"}),a=r().dom.createEl("span",{className:"vjs-icon-search"});s.appendChild(a);const t=r().dom.createEl("span",{className:"vjs-loading-spinner"});return s.appendChild(t),s.addEventListener("click",e),s})((()=>{if(a){const e=d.input.value.trim();e&&l(e)}else a=!0,i.classList.add("vjs-visual-search-active"),d.input.focus()})),d=((e,s)=>{const a=r().dom.createEl("form",{className:"vjs-visual-search-form"}),t=r().dom.createEl("input",{className:"vjs-visual-search-input",type:"text"}),l=r().dom.createEl("button",{className:"vjs-visual-search-close",type:"button",title:"Close search"}),c=r().dom.createEl("span",{className:"vjs-icon-close"});return l.appendChild(c),a.appendChild(t),a.appendChild(l),a.addEventListener("submit",(s=>{s.preventDefault();const a=t.value.trim();a&&e(a)})),l.addEventListener("click",(e=>{e.preventDefault(),s&&s()})),{element:a,input:t}})(l,n);i.appendChild(o),i.appendChild(d.element),e.prepend(i),s.on("keydown",(e=>{"Escape"===e.key&&a&&n()}))};i(),s.visualSearch={createSearchUI:i,clearUI:c}}}}]);
+"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}}}}]);
 //# sourceMappingURL=visual-search.light.min.js.map

package/dist/visual-search.min.js

@@ -1,2 +1,2 @@
-"use strict";(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[728],{9148:(e,s,a)=>{a.d(s,{default:()=>l});var t=a(7938),r=a.n(t);const l=(e,s)=>{s.addClass("vjs-visual-search");let a=!1;const t=(e=>{const s=()=>{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:a=>{s();const t=e.duration(),l=e.controlBar.progressControl.seekBar,c=r().dom.createEl("div",{className:"vjs-visual-search-results-wrapper"});a.forEach((s=>{const{start_time:a,end_time:l}=s,i=r().dom.createEl("div",{className:"vjs-visual-search-marker",style:`left: ${a/t*100}%; width: ${(l-a)/t*100}%`});c.appendChild(i),i.addEventListener("click",(()=>{e.currentTime(a)}))})),l.el().appendChild(c),a.length>0&&e.addClass("vjs-visual-search-results-active")},clearMarkers:s}})(s),l=async e=>{const a=s.$(".vjs-visual-search-button");a.classList.add("vjs-waiting");try{const a=s.cloudinary.source(),r=a.publicId(),l=Object.assign({},a.transformation());l.flags=l.flags||[],l.flags.push(`getinfo:search_b64_${btoa(e)}`);const c=a.config().url(`${r}`,{transformation:l}),i=await fetch(c,{method:"GET",headers:{"Content-Type":"application/json"}});if(!i.ok)throw new Error(`Search request failed with status: ${i.status}`);const n=await i.json();t.displayResults(n.timestamps),n&&!s.hasStarted()&&s.play().then((()=>s.pause()))}catch(e){console.error("Error performing visual search:",e)}finally{a.classList.remove("vjs-waiting")}},c=()=>{a=!1,t.clearMarkers(),s.$(".vjs-visual-search-wrapper")?.remove()},i=()=>{c();const e=s.$(".vjs-title-bar");e&&e.classList.remove("vjs-hidden");const i=r().dom.createEl("div",{className:"vjs-visual-search-wrapper"}),n=()=>{a&&(a=!1,i.classList.remove("vjs-visual-search-active"),d.input.value="",t.clearMarkers())},o=(e=>{const s=r().dom.createEl("button",{className:"vjs-visual-search-button",title:"Search video content"}),a=r().dom.createEl("span",{className:"vjs-icon-search"});s.appendChild(a);const t=r().dom.createEl("span",{className:"vjs-loading-spinner"});return s.appendChild(t),s.addEventListener("click",e),s})((()=>{if(a){const e=d.input.value.trim();e&&l(e)}else a=!0,i.classList.add("vjs-visual-search-active"),d.input.focus()})),d=((e,s)=>{const a=r().dom.createEl("form",{className:"vjs-visual-search-form"}),t=r().dom.createEl("input",{className:"vjs-visual-search-input",type:"text"}),l=r().dom.createEl("button",{className:"vjs-visual-search-close",type:"button",title:"Close search"}),c=r().dom.createEl("span",{className:"vjs-icon-close"});return l.appendChild(c),a.appendChild(t),a.appendChild(l),a.addEventListener("submit",(s=>{s.preventDefault();const a=t.value.trim();a&&e(a)})),l.addEventListener("click",(e=>{e.preventDefault(),s&&s()})),{element:a,input:t}})(l,n);i.appendChild(o),i.appendChild(d.element),e.prepend(i),s.on("keydown",(e=>{"Escape"===e.key&&a&&n()}))};i(),s.visualSearch={createSearchUI:i,clearUI:c}}}}]);
+"use strict";(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[728],{9148:(e,a,s)=>{s.d(a,{default:()=>l});var t=s(7938),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}}}}]);
 //# sourceMappingURL=visual-search.min.js.map