UNPKG

cloudinary-video-player

Version:

Cloudinary Video Player

67 lines (51 loc) • 13.8 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/*! * Cloudinary Video Player v3.2.1 * Built on 2025-08-12T18:54:00.175Z * 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://cloudinary-video-player/./plugins/visual-search/components/SearchButton.js?"); /***/ }), /***/ "./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://cloudinary-video-player/./plugins/visual-search/components/SearchInput.js?"); /***/ }), /***/ "./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://cloudinary-video-player/./plugins/visual-search/components/SearchResults.js?"); /***/ }), /***/ "./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://cloudinary-video-player/./plugins/visual-search/visual-search.js?"); /***/ }), /***/ "./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://cloudinary-video-player/./plugins/visual-search/visual-search.scss?"); /***/ }) }]);