|
19 | 19 | // @INCLUDE_IN_API_DOCS |
20 | 20 |
|
21 | 21 | /** |
22 | | - * Tiny shared HTML5 `<video>` widget. Wraps a single `<video>` element in a |
23 | | - * div so callers can drop a configured player into their UI without |
24 | | - * re-deriving sensible defaults each time. Defaults (controls + muted + |
25 | | - * playsinline + preload="metadata") are tuned for inline product videos — |
26 | | - * the kind of "watch this short clip" surface where the user has not yet |
27 | | - * signalled intent to play. |
| 22 | + * Tiny shared HTML5 `<video>` widget. Two entry points: |
| 23 | + * |
| 24 | + * createPlayer(options) — returns a configured `<video>` wrapper the |
| 25 | + * caller can drop anywhere in their UI. |
| 26 | + * |
| 27 | + * renderFullScreenPlayer(srcElement, options) — opens a viewport- |
| 28 | + * covering overlay with a large auto-playing player that |
| 29 | + * expands out of `srcElement` (genie-style) and contracts back |
| 30 | + * on close. Useful when an inline thumbnail should expand into |
| 31 | + * a focused fullscreen view on click. |
28 | 32 | */ |
29 | 33 | define(function (require, exports, module) { |
30 | 34 |
|
| 35 | + const Strings = require("strings"); |
31 | 36 |
|
32 | 37 | /** |
33 | 38 | * Build a `<video>` element wrapped in a div with sensible Phoenix |
@@ -94,5 +99,137 @@ define(function (require, exports, module) { |
94 | 99 | return $wrap; |
95 | 100 | } |
96 | 101 |
|
97 | | - exports.createPlayer = createPlayer; |
| 102 | + /** |
| 103 | + * Open a viewport-covering overlay with a large autoplaying video that |
| 104 | + * expands out of `srcElement` (Mac-dock-genie style) and contracts |
| 105 | + * back to it on close. Click on the dimmed backdrop, the close (×) |
| 106 | + * button, or pressing Escape closes the overlay. |
| 107 | + * |
| 108 | + * Defaults: muted, autoplay, controls, preload="auto" (so the bytes |
| 109 | + * stream while the open animation runs and the user can hit play |
| 110 | + * straight away). Override via `options`. |
| 111 | + * |
| 112 | + * @param {HTMLElement|jQuery} srcElement Element the lightbox should |
| 113 | + * expand from / contract back to. Used only for the source rect; |
| 114 | + * not modified. |
| 115 | + * @param {Object} options See createPlayer's options; |
| 116 | + * additionally honours all the same player flags. `src` required. |
| 117 | + * @returns {{ close: Function }} Handle exposing a programmatic close. |
| 118 | + */ |
| 119 | + function renderFullScreenPlayer(srcElement, options) { |
| 120 | + options = options || {}; |
| 121 | + if (!options.src) { |
| 122 | + throw new Error("VideoPlayer.renderFullScreenPlayer: options.src is required"); |
| 123 | + } |
| 124 | + |
| 125 | + const srcEl = srcElement && srcElement.jquery ? srcElement[0] : srcElement; |
| 126 | + const originRect = srcEl ? srcEl.getBoundingClientRect() : null; |
| 127 | + |
| 128 | + const $overlay = $('<div class="phx-video-fullscreen-overlay"></div>'); |
| 129 | + const $player = createPlayer({ |
| 130 | + src: options.src, |
| 131 | + poster: options.poster, |
| 132 | + // Fullscreen defaults — overridable via options. |
| 133 | + muted: options.muted !== false, |
| 134 | + controls: options.controls !== false, |
| 135 | + autoplay: options.autoplay !== false, |
| 136 | + loop: options.loop === true, |
| 137 | + preload: options.preload || "auto", |
| 138 | + className: "phx-video-fullscreen-player" |
| 139 | + }); |
| 140 | + const closeLabel = (Strings && Strings.CLOSE) || "Close"; |
| 141 | + const $closeBtn = $( |
| 142 | + '<button class="phx-video-fullscreen-close" type="button">' + |
| 143 | + '<i class="fa-solid fa-xmark"></i>' + |
| 144 | + '</button>' |
| 145 | + ).attr("title", closeLabel).attr("aria-label", closeLabel); |
| 146 | + |
| 147 | + const ANIM_OPEN_MS = 280; |
| 148 | + const ANIM_CLOSE_MS = 220; |
| 149 | + let isClosing = false; |
| 150 | + |
| 151 | + // Compute the transform that snaps the centered final-position |
| 152 | + // player back over the origin rect — used for both the initial |
| 153 | + // collapsed state and the close animation. |
| 154 | + function transformToOrigin() { |
| 155 | + if (!originRect) { return null; } |
| 156 | + const r = $player[0].getBoundingClientRect(); |
| 157 | + if (!r.width || !r.height) { return null; } |
| 158 | + const dx = (originRect.left + originRect.width / 2) - |
| 159 | + (r.left + r.width / 2); |
| 160 | + const dy = (originRect.top + originRect.height / 2) - |
| 161 | + (r.top + r.height / 2); |
| 162 | + const scale = Math.min( |
| 163 | + originRect.width / r.width, |
| 164 | + originRect.height / r.height |
| 165 | + ); |
| 166 | + return "translate(" + dx + "px," + dy + "px) scale(" + scale + ")"; |
| 167 | + } |
| 168 | + |
| 169 | + function close() { |
| 170 | + if (isClosing) { return; } |
| 171 | + isClosing = true; |
| 172 | + $(document).off("keydown.phxVideoFullscreen"); |
| 173 | + const collapseT = transformToOrigin(); |
| 174 | + if (collapseT) { |
| 175 | + $player.css({ |
| 176 | + transition: "transform " + ANIM_CLOSE_MS + |
| 177 | + "ms cubic-bezier(0.4, 0, 1, 1), opacity " + |
| 178 | + ANIM_CLOSE_MS + "ms ease", |
| 179 | + transform: collapseT, |
| 180 | + opacity: 0 |
| 181 | + }); |
| 182 | + $closeBtn.css({ |
| 183 | + transition: "opacity " + (ANIM_CLOSE_MS - 40) + "ms ease", |
| 184 | + opacity: 0 |
| 185 | + }); |
| 186 | + $overlay.css({ |
| 187 | + transition: "background-color " + ANIM_CLOSE_MS + "ms ease", |
| 188 | + backgroundColor: "rgba(0,0,0,0)" |
| 189 | + }); |
| 190 | + setTimeout(function () { $overlay.remove(); }, ANIM_CLOSE_MS + 20); |
| 191 | + } else { |
| 192 | + $overlay.remove(); |
| 193 | + } |
| 194 | + } |
| 195 | + |
| 196 | + $overlay.on("click", close); |
| 197 | + $player.on("click", function (e) { e.stopPropagation(); }); |
| 198 | + $closeBtn.on("click", function (e) { e.stopPropagation(); close(); }); |
| 199 | + $(document).on("keydown.phxVideoFullscreen", function (e) { |
| 200 | + if (e.key === "Escape") { close(); } |
| 201 | + }); |
| 202 | + |
| 203 | + $overlay.append($player).append($closeBtn); |
| 204 | + $("body").append($overlay); |
| 205 | + |
| 206 | + // Two-frame FLIP open animation: lay out at the natural centered |
| 207 | + // position so we can measure the destination rect, snap visually |
| 208 | + // back to the origin with a transform, force a paint, then animate |
| 209 | + // to identity. Result: the lightbox appears to expand out of the |
| 210 | + // source element. |
| 211 | + const startT = transformToOrigin(); |
| 212 | + if (startT) { |
| 213 | + $player.css({ |
| 214 | + transform: startT, |
| 215 | + opacity: 0.6, |
| 216 | + transition: "none" |
| 217 | + }); |
| 218 | + // Force reflow so the next style write transitions instead |
| 219 | + // of collapsing into a single paint. |
| 220 | + void $player[0].offsetWidth; |
| 221 | + $player.css({ |
| 222 | + transition: "transform " + ANIM_OPEN_MS + |
| 223 | + "ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity " + |
| 224 | + (ANIM_OPEN_MS - 80) + "ms ease", |
| 225 | + transform: "translate(0px, 0px) scale(1)", |
| 226 | + opacity: 1 |
| 227 | + }); |
| 228 | + } |
| 229 | + |
| 230 | + return { close: close }; |
| 231 | + } |
| 232 | + |
| 233 | + exports.createPlayer = createPlayer; |
| 234 | + exports.renderFullScreenPlayer = renderFullScreenPlayer; |
98 | 235 | }); |
0 commit comments