| 1 |
"use strict"; |
| 2 |
|
| 3 |
(function() { |
| 4 |
|
| 5 |
//#region \0rolldown/runtime.js |
| 6 |
var __defProp = Object.defineProperty; |
| 7 |
var __name = (target, value) => __defProp(target, "name", { |
| 8 |
value, |
| 9 |
configurable: true |
| 10 |
}); |
| 11 |
var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports); |
| 12 |
|
| 13 |
//#endregion |
| 14 |
|
| 15 |
//#region modules/atomic-widgets/elements/atomic-background-video/handlers/editor-background-video-state.js |
| 16 |
var require_editor_background_video_state = /* @__PURE__ */ __commonJSMin(((exports) => { |
| 17 |
Object.defineProperty(exports, "__esModule", { value: true }); |
| 18 |
exports.getEditorState = getEditorState; |
| 19 |
exports.isEditorPreview = isEditorPreview; |
| 20 |
exports.resolveDesignTimeState = resolveDesignTimeState; |
| 21 |
exports.setEditorState = setEditorState; |
| 22 |
var _alpinejs$1 = (globalThis.elementorV2.alpinejs); |
| 23 |
var STORE_NAME = "editor-background-video-state"; |
| 24 |
var PLAYING_STATE = "playing"; |
| 25 |
var PAUSED_STATE = "paused"; |
| 26 |
/** |
| 27 |
* @typedef {Record<string, 'playing' | 'paused' | ''>} BackgroundVideoState |
| 28 |
*/ |
| 29 |
function ensureStore() { |
| 30 |
if (!_alpinejs$1.Alpine.store(STORE_NAME)) _alpinejs$1.Alpine.store( |
| 31 |
STORE_NAME, |
| 32 |
/** @type {BackgroundVideoState} */ |
| 33 |
{} |
| 34 |
); |
| 35 |
return _alpinejs$1.Alpine.store(STORE_NAME); |
| 36 |
} |
| 37 |
function resolveDesignTimeState(state) { |
| 38 |
if (PAUSED_STATE === state || "" === state) return state; |
| 39 |
return PLAYING_STATE; |
| 40 |
} |
| 41 |
function getEditorState(elementId, fallback = PLAYING_STATE) { |
| 42 |
var _store$elementId; |
| 43 |
return (_store$elementId = ensureStore()[elementId]) !== null && _store$elementId !== void 0 ? _store$elementId : fallback; |
| 44 |
} |
| 45 |
function setEditorState(elementId, state) { |
| 46 |
const store = ensureStore(); |
| 47 |
store[elementId] = state; |
| 48 |
} |
| 49 |
function isEditorPreview() { |
| 50 |
var _window$elementorFron; |
| 51 |
var _window$elementorFron2; |
| 52 |
var _window$parent; |
| 53 |
return Boolean(((_window$elementorFron = window.elementorFrontend) === null || _window$elementorFron === void 0 || (_window$elementorFron2 = _window$elementorFron.isEditMode) === null || _window$elementorFron2 === void 0 ? void 0 : _window$elementorFron2.call(_window$elementorFron)) || ((_window$parent = window.parent) === null || _window$parent === void 0 ? void 0 : _window$parent.elementor)); |
| 54 |
} |
| 55 |
})); |
| 56 |
|
| 57 |
//#endregion |
| 58 |
//#region modules/atomic-widgets/elements/atomic-background-video/handlers/background-video-handler.js |
| 59 |
var require_background_video_handler = /* @__PURE__ */ __commonJSMin(((exports) => { |
| 60 |
Object.defineProperty(exports, "__esModule", { value: true }); |
| 61 |
exports.PLAY_ELEMENT_TYPE = exports.PAUSE_ELEMENT_TYPE = exports.CONTROLS_ELEMENT_TYPE = void 0; |
| 62 |
var _frontendHandlers = (globalThis.elementorV2.frontendHandlers); |
| 63 |
var _alpinejs = (globalThis.elementorV2.alpinejs); |
| 64 |
var _editorBackgroundVideoState = require_editor_background_video_state(); |
| 65 |
var PLAYING_CLASS = "e--playing"; |
| 66 |
var PAUSED_CLASS = "e--paused"; |
| 67 |
var ROOT_PLAYING_CLASS = "e-background-video--playing"; |
| 68 |
var ROOT_PAUSED_CLASS = "e-background-video--paused"; |
| 69 |
exports.PLAY_ELEMENT_TYPE = "e-background-video-play"; |
| 70 |
exports.PAUSE_ELEMENT_TYPE = "e-background-video-pause"; |
| 71 |
exports.CONTROLS_ELEMENT_TYPE = "e-background-video-controls"; |
| 72 |
function applyVideoSettings(video, settings) { |
| 73 |
if (!video) return; |
| 74 |
video.muted = Boolean(settings.mute); |
| 75 |
video.loop = Boolean(settings.loop); |
| 76 |
video.autoplay = Boolean(settings.autoplay); |
| 77 |
if (settings.start_time) video.currentTime = Number(settings.start_time); |
| 78 |
if (settings.autoplay) video.play().catch(() => {}); |
| 79 |
} |
| 80 |
function enforceEndTime(video, settings, signal) { |
| 81 |
if (!video) return; |
| 82 |
const endTime = Number(settings.end_time); |
| 83 |
const startTime = Number(settings.start_time) || 0; |
| 84 |
if (!endTime || endTime <= startTime) return; |
| 85 |
video.addEventListener("timeupdate", () => { |
| 86 |
if (video.currentTime < endTime) return; |
| 87 |
if (settings.loop) { |
| 88 |
video.currentTime = startTime; |
| 89 |
return; |
| 90 |
} |
| 91 |
video.pause(); |
| 92 |
}, { signal }); |
| 93 |
} |
| 94 |
(0, _frontendHandlers.register)({ |
| 95 |
elementType: "e-background-video", |
| 96 |
id: "e-background-video-handler", |
| 97 |
callback: ({ element, settings, signal }) => { |
| 98 |
const elementId = element.dataset.id; |
| 99 |
const video = element.querySelector(".e-background-video__media"); |
| 100 |
applyVideoSettings(video, settings); |
| 101 |
enforceEndTime(video, settings, signal); |
| 102 |
_alpinejs.Alpine.data(`eBackgroundVideo${elementId}`, () => ({ |
| 103 |
isPlaying: video ? !video.paused : false, |
| 104 |
isEditor: (0, _editorBackgroundVideoState.isEditorPreview)(), |
| 105 |
get editorState() { |
| 106 |
return (0, _editorBackgroundVideoState.getEditorState)(elementId, (0, _editorBackgroundVideoState.resolveDesignTimeState)(settings.state)); |
| 107 |
}, |
| 108 |
get previewState() { |
| 109 |
if (this.isEditor) return this.editorState; |
| 110 |
return this.isPlaying ? "playing" : "paused"; |
| 111 |
}, |
| 112 |
get showPlayButton() { |
| 113 |
return "paused" === this.previewState; |
| 114 |
}, |
| 115 |
get showPauseButton() { |
| 116 |
return "playing" === this.previewState; |
| 117 |
}, |
| 118 |
play() { |
| 119 |
if (this.isEditor || !video) return; |
| 120 |
video.play().catch(() => {}); |
| 121 |
}, |
| 122 |
pause() { |
| 123 |
if (this.isEditor || !video) return; |
| 124 |
video.pause(); |
| 125 |
}, |
| 126 |
init() { |
| 127 |
if (video) { |
| 128 |
video.addEventListener("play", () => { |
| 129 |
this.isPlaying = true; |
| 130 |
}, { signal }); |
| 131 |
video.addEventListener("pause", () => { |
| 132 |
this.isPlaying = false; |
| 133 |
}, { signal }); |
| 134 |
} |
| 135 |
}, |
| 136 |
rootState: { ":class"() { |
| 137 |
if (this.isEditor) return {}; |
| 138 |
return { |
| 139 |
[ROOT_PLAYING_CLASS]: this.isPlaying, |
| 140 |
[ROOT_PAUSED_CLASS]: !this.isPlaying |
| 141 |
}; |
| 142 |
} }, |
| 143 |
controlsWrapper: { ":class"() { |
| 144 |
return { |
| 145 |
[PLAYING_CLASS]: "playing" === this.previewState, |
| 146 |
[PAUSED_CLASS]: "paused" === this.previewState |
| 147 |
}; |
| 148 |
} }, |
| 149 |
playButton: { "@click"() { |
| 150 |
this.play(); |
| 151 |
} }, |
| 152 |
pauseButton: { "@click"() { |
| 153 |
this.pause(); |
| 154 |
} } |
| 155 |
})); |
| 156 |
return () => {}; |
| 157 |
} |
| 158 |
}); |
| 159 |
})); |
| 160 |
|
| 161 |
//#endregion |
| 162 |
return require_background_video_handler(); |
| 163 |
|
| 164 |
})(); |
| 165 |
//# sourceMappingURL=background-video-handler.js.map |
