forked from phcode-dev/staging.phcode.dev
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathVideoPlayer.js
More file actions
1 lines (1 loc) · 3.23 KB
/
Copy pathVideoPlayer.js
File metadata and controls
1 lines (1 loc) · 3.23 KB
1
define(function(require,exports,module){const Strings=require("strings");function createPlayer(options){if(!(options=options||{}).src)throw new Error("VideoPlayer.createPlayer: options.src is required");const controls=!1!==options.controls,muted=!1!==options.muted,autoplay=!0===options.autoplay,loop=!0===options.loop,preload=options.preload||"metadata",wrapperClass="phx-video-player"+(options.className?" "+options.className:""),$wrap=$("<div></div>").addClass(wrapperClass),$video=$("<video playsinline></video>").attr("preload",preload).attr("src",options.src);return options.poster&&$video.attr("poster",options.poster),controls&&$video.attr("controls",""),muted&&($video.attr("muted",""),$video[0].muted=!0),autoplay&&($video.attr("autoplay",""),$video[0].autoplay=!0),loop&&($video.attr("loop",""),$video[0].loop=!0),$wrap.append($video),$wrap}function renderFullScreenPlayer(srcElement,options){if(!(options=options||{}).src)throw new Error("VideoPlayer.renderFullScreenPlayer: options.src is required");const srcEl=srcElement&&srcElement.jquery?srcElement[0]:srcElement,originRect=srcEl?srcEl.getBoundingClientRect():null,$overlay=$('<div class="phx-video-fullscreen-overlay"></div>'),$player=createPlayer({src:options.src,poster:options.poster,muted:!1!==options.muted,controls:!1!==options.controls,autoplay:!1!==options.autoplay,loop:!0===options.loop,preload:options.preload||"auto",className:"phx-video-fullscreen-player"}),closeLabel=Strings&&Strings.CLOSE||"Close",$closeBtn=$('<button class="phx-video-fullscreen-close" type="button"><i class="fa-solid fa-xmark"></i></button>').attr("title",closeLabel).attr("aria-label",closeLabel),ANIM_OPEN_MS=280,ANIM_CLOSE_MS=220;let isClosing=!1;function transformToOrigin(){if(!originRect)return null;const r=$player[0].getBoundingClientRect();if(!r.width||!r.height)return null;const dx=originRect.left+originRect.width/2-(r.left+r.width/2),dy=originRect.top+originRect.height/2-(r.top+r.height/2),scale=Math.min(originRect.width/r.width,originRect.height/r.height);return"translate("+dx+"px,"+dy+"px) scale("+scale+")"}function close(){if(isClosing)return;isClosing=!0,$(document).off("keydown.phxVideoFullscreen");const collapseT=transformToOrigin();collapseT?($player.css({transition:"transform "+ANIM_CLOSE_MS+"ms cubic-bezier(0.4, 0, 1, 1), opacity "+ANIM_CLOSE_MS+"ms ease",transform:collapseT,opacity:0}),$closeBtn.css({transition:"opacity "+(ANIM_CLOSE_MS-40)+"ms ease",opacity:0}),$overlay.css({transition:"background-color "+ANIM_CLOSE_MS+"ms ease",backgroundColor:"rgba(0,0,0,0)"}),setTimeout(function(){$overlay.remove()},ANIM_CLOSE_MS+20)):$overlay.remove()}$overlay.on("click",close),$player.on("click",function(e){e.stopPropagation()}),$closeBtn.on("click",function(e){e.stopPropagation(),close()}),$(document).on("keydown.phxVideoFullscreen",function(e){"Escape"===e.key&&close()}),$overlay.append($player).append($closeBtn),$("body").append($overlay);const startT=transformToOrigin();return startT&&($player.css({transform:startT,opacity:.6,transition:"none"}),$player[0].offsetWidth,$player.css({transition:"transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease",transform:"translate(0px, 0px) scale(1)",opacity:1})),{close:close}}exports.createPlayer=createPlayer,exports.renderFullScreenPlayer=renderFullScreenPlayer});