@ebay/ui-core-react/ebay-video/index.js

Skin components build off React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),P=require("react-dom"),Z=require("classnames"),x=require("shaka-player/dist/shaka-player.ui"),Te=require("../utils-C9NL3q0j.js"),Ce=require("../icons/ebay-icon-audio-off-16/index.js"),Pe=require("../icons/ebay-icon-audio-high-16/index.js"),Re=require("../icons/ebay-icon-expand-16/index.js"),xe=require("../icons/ebay-icon-contract-16/index.js"),_e=require("../icons/ebay-icon-flag-16/index.js"),Fe=require("../icons/ebay-icon-play-filled-64-colored/index.js"),Le=require("../icons/ebay-icon-attention-64/index.js"),ee=s=>{var c=j.__rest(s,[]);return e.createElement("source",Object.assign({},c))},Ie=7e3,Ae=11,Me=2e3,M=(s,c={})=>{const{onInit:o,onVolumeChange:a,onTimeAndSeekRangeUpdated:r,onTracksChanged:l,onFullscreenChange:d,onLoadedMetadata:u,onLoadedData:p}=c,[n,m]=e.useState(null),_=e.useRef(null),F=e.useRef(null),S=e.useRef(null),f=e.useRef(!0);return e.useLayoutEffect(()=>{f.current=!0;class b extends x.ui.Element{constructor(I,V){if(super(I,V),!f.current)return;if(P.flushSync(()=>{m(I)}),_.current=this.video,F.current=this.controls,S.current=this.player,o){const k={};a&&(k.muted=this.video.muted,k.volume=this.video.volume),(d||u||p)&&(k.isFullScreenEnabled=this.controls.isFullScreenEnabled(),k.isFullScreenSupported=this.controls.isFullScreenSupported()),o(k)}a&&this.eventManager.listen(this.video,"volumechange",()=>{f.current&&a({muted:this.video.muted,volume:this.video.volume})}),r&&this.eventManager.listen(this.controls,"timeandseekrangeupdated",()=>{f.current&&r({displayTime:this.controls.getDisplayTime(),seekRange:this.player.seekRange(),isLive:this.player.isLive(),isSeeking:this.controls.isSeeking()})}),l&&this.eventManager.listen(this.player,"trackschanged",()=>{f.current&&l({isLive:this.player.isLive()})}),d&&this.eventManager.listen(document,"fullscreenchange",()=>{f.current&&d({isFullScreenEnabled:this.controls.isFullScreenEnabled()})});const N=this.controls.getLocalVideo();u&&this.eventManager.listen(N,"loadedmetadata",()=>{f.current&&u({isFullScreenSupported:this.controls.isFullScreenSupported()})}),p&&this.eventManager.listen(N,"loadeddata",()=>{f.current&&p({isFullScreenSupported:this.controls.isFullScreenSupported()})})}}return x.ui.Controls.registerElement(s,{create:(L,I)=>new b(L,I)}),()=>{f.current=!1}},[]),{container:n,videoRef:_,controlsRef:F,playerRef:S}},we=({a11yMuteText:s,a11yUnmuteText:c})=>{const[o,a]=e.useState(!1),[r,l]=e.useState(1),{container:d,videoRef:u}=M("mute_popover",{onInit:({muted:n,volume:m})=>{n!==void 0&&a(n),m!==void 0&&l(m)},onVolumeChange:({muted:n,volume:m})=>{a(n),l(m)}});if(!d)return null;const p=()=>{u.current&&(!u.current.muted&&u.current.volume===0?u.current.volume=1:u.current.muted=!u.current.muted)};return P.createPortal(e.createElement("button",{className:"shaka-mute-button shaka-tooltip",onClick:p},o||r===0?e.createElement(Ce.EbayIconAudioOff16,{a11yText:c||"Unmute"}):e.createElement(Pe.EbayIconAudioHigh16,{a11yText:s||"Mute"})),d)},qe=({a11yFullscreenText:s,a11yExitFullscreenText:c})=>{const[o,a]=e.useState(!1),[r,l]=e.useState(!0),{container:d,controlsRef:u}=M("fullscreen_button",{onInit:({isFullScreenEnabled:n,isFullScreenSupported:m})=>{n!==void 0&&a(n),m!==void 0&&l(m)},onFullscreenChange:({isFullScreenEnabled:n})=>{a(n)},onLoadedMetadata:({isFullScreenSupported:n})=>{l(n)},onLoadedData:({isFullScreenSupported:n})=>{l(n)}});if(!d||!r)return null;const p=()=>j.__awaiter(void 0,void 0,void 0,function*(){var n;!((n=u.current)===null||n===void 0)&&n.toggleFullScreen&&(yield u.current.toggleFullScreen())});return P.createPortal(e.createElement("button",{className:"shaka-fullscreen-button shaka-tooltip",onClick:p},o?e.createElement(xe.EbayIconContract16,{a11yText:c||"Exit fullscreen"}):e.createElement(Re.EbayIconExpand16,{a11yText:s||"Enter fullscreen"})),d)};function q(s,c){const o=Math.floor(s/3600),a=Math.floor(s/60%60);let r=Math.floor(s%60);r<10&&(r="0"+r);let l=a+":"+r;return c&&(a<10&&(l="0"+l),l=o+":"+l),l}const Ne=()=>{const[s,c]=e.useState("0:00"),{container:o}=M("remaining_time",{onTimeAndSeekRangeUpdated:({displayTime:a,seekRange:r,isLive:l})=>{const d=r.end-r.start;if(!isFinite(d))c("0:00");else if(l)c("");else{const u=d>=3600,p=Math.max(0,r.end-a),n="- "+q(p,u);c(n)}}});return o?P.createPortal(e.createElement("span",{className:"shaka-remaining-time"},s),o):null},Oe=({a11ySkipToLiveText:s})=>{const[c,o]=e.useState("0:00"),[a,r]=e.useState(!1),{container:l,videoRef:d,playerRef:u}=M("current_time",{onTimeAndSeekRangeUpdated:({displayTime:n,seekRange:m,isLive:_,isSeeking:F})=>{const S=m.end-m.start;if(!isFinite(S))o("LIVE");else if(_){const f=Math.floor(m.end-n),b=Math.max(0,f),L=S>=3600;b>=1||F?o("- "+q(b,L)):o("LIVE")}else{const f=S>=3600,b=Math.max(0,n-m.start);o(q(b,f))}},onTracksChanged:({isLive:n})=>{r(n)}});if(!l)return null;const p=()=>{if(!(!d.current||!u.current)&&a){const n=u.current.seekRange();d.current.currentTime=n.end}};return P.createPortal(e.createElement("button",{className:"shaka-current-time",disabled:!a,"aria-hidden":!a||void 0,onClick:p,"aria-label":a?s||"Skip to live":void 0},c),l)},Ve=()=>{const[s,c]=e.useState(""),{container:o}=M("total_time",{onTimeAndSeekRangeUpdated:({seekRange:a})=>{const r=a.end-a.start;if(isFinite(r)&&r){const l=r>=3600;c(q(r,l))}}});return o?P.createPortal(e.createElement("span",{className:"shaka-current-time"},s),o):null},Be=({reportText:s,a11yReportText:c,onReport:o})=>{const{container:a}=M("report");if(!a)return null;const r=l=>{o&&o(l)};return P.createPortal(e.createElement("button",{className:"video-player__report-button",onClick:r,"aria-label":c||s||"Report"},e.createElement(_e.EbayIconFlag16,null)),a)},Ue=()=>{const s=e.useRef(!0);return e.useLayoutEffect(()=>(s.current=!0,x.ui.Controls.registerElement("captions",{create:(c,o)=>s.current?new x.ui.TextSelection(c,o):null}),()=>{s.current=!1}),[]),null},De=["play_pause","current_time","spacer","total_time","captions","mute_popover","report","fullscreen_button"],He=["remaining_time","spacer","mute_popover","play_pause"],je={doubleClickForFullscreen:!0,singleClickForPlayAndPause:!0,customContextMenu:!0,contextMenuElements:["mute"],showUIAlways:!1,addSeekBar:!0,controlPanelElements:De},ze={doubleClickForFullscreen:!0,singleClickForPlayAndPause:!0,customContextMenu:!0,contextMenuElements:["mute"],showUIAlways:!1,addSeekBar:!1,controlPanelElements:He},$e=s=>{var{width:c,height:o,thumbnail:a,action:r,muted:l,playView:d="inline",layout:u="default",a11yPlayText:p,reportText:n,a11yReportText:m,a11yMuteText:_,a11yUnmuteText:F,a11yFullscreenText:S,a11yExitFullscreenText:f,a11ySkipToLiveText:b,volumeSlider:L,volume:I=1,hideReportButton:V,errorText:N,shakaConfig:k,spinnerTimeout:te,onVolumeChange:ne=()=>{},onLoadError:re=()=>{},onPlay:oe=()=>{},onPause:ae=()=>{},onReport:le=()=>{},children:se}=s,z=j.__rest(s,["width","height","thumbnail","action","muted","playView","layout","a11yPlayText","reportText","a11yReportText","a11yMuteText","a11yUnmuteText","a11yFullscreenText","a11yExitFullscreenText","a11ySkipToLiveText","volumeSlider","volume","hideReportButton","errorText","shakaConfig","spinnerTimeout","onVolumeChange","onLoadError","onPlay","onPause","onReport","children"]);const[ce,ie]=e.useState(),[ue,$]=e.useState(),[de,Y]=e.useState(r==="play"||z.autoPlay===!0),[me,G]=e.useState(!1),[fe,B]=e.useState(!1),R=e.useRef(null),g=e.useRef(null),y=e.useRef(null),v=e.useRef(null),O=Te.filterByType(se,ee).map(({props:t})=>t),J=t=>{$(!0),B(!1),re(t)},U=(t=0)=>{var i;!O.length||!y.current||y.current.load((i=O[t])===null||i===void 0?void 0:i.src).then(()=>{$(!1)}).catch(h=>{switch(console.error(h),h.code){case Ie:return;case Ae:setTimeout(()=>U(t),0);break;default:{const T=O.length>t+1&&t+1;T?setTimeout(()=>U(T),0):J(h)}}})};e.useLayoutEffect(()=>{var t;const i=g.current,h=R.current;if(!i||!h||(i.volume=I,i.muted=l!==!1,x.polyfill.installAll(),y.current=new x.Player(i),!y.current))return;k&&y.current.configure(k),y.current.addEventListener("error",()=>J(new Error("Shaka-Player error"))),v.current=new x.ui.Overlay(y.current,h,i),v.current.configure({controlPanelElements:[],addSeekBar:!1}),!((t=document?.documentElement)===null||t===void 0)&&t.lang&&v.current.getControls().getLocalization().changeLocale([document.documentElement.lang]),v.current.getControls().addEventListener("timeandseekrangeupdated",()=>{var E,C;const w=(E=v.current)===null||E===void 0?void 0:E.getControls(),A=(C=v.current)===null||C===void 0?void 0:C.getControls().getPlayer();if(!w||!A)return;const H=A.seekRange(),W=H.end-H.start;if(!isFinite(W)||A.isLive())return;const Ee=w.getDisplayTime(),Se=Math.max(0,Ee-H.start),be=W>=3600,ke=q(Se,be),X=h.querySelector(".shaka-seek-bar");X&&X.setAttribute("aria-valuetext",ke)}),v.current.getControls().addEventListener("captionselectionupdated",()=>{const E=h,C=E.querySelector("button[shaka-status]");if(!C)return;C.removeAttribute("aria-pressed"),C.removeAttribute("aria-label"),C.setAttribute("aria-expanded","false");const w=E.querySelector(".shaka-text-languages");w&&w.querySelectorAll("[aria-selected='true']").forEach(A=>{A.removeAttribute("aria-selected"),A.setAttribute("aria-current","true")})}),B(!0);const T=h.querySelector(".shaka-spinner");return T&&setTimeout(()=>{T.hidden=!0},te||Me),U(),()=>{y.current&&y.current.destroy(),v.current&&v.current.destroy()}},[]),e.useEffect(()=>{if(g.current)switch(r){case"play":Y(!0),g.current.play();break;case"pause":G(!0),g.current.pause();break}},[r]);const he=()=>{if(!v.current)return;const t=u==="compact"?ze:je,i=Object.assign(Object.assign({},t),{controlPanelElements:[...t.controlPanelElements]});if(L===!0){const h=i.controlPanelElements.length-2>0?i.controlPanelElements.length-2:i.controlPanelElements.length;i.controlPanelElements.splice(h,0,"volume")}v.current.configure(i),g.current.controls=!1,setTimeout(()=>D(),10)},pe=t=>{t.stopPropagation(),he(),D(),d==="fullscreen"&&u!=="compact"&&g.current.requestFullscreen(),ie(!0),oe(t,{player:y.current,auto:de}),Y(!1)},ye=()=>{B(!1),g.current.play()},ve=t=>{const i=t.currentTarget;ne(t,{volume:Math.round((i.volume+Number.EPSILON)*100)/100,muted:i.muted})},D=()=>{if(R.current){const t=R.current.querySelector(".shaka-controls-button-panel"),i=t?.querySelector(".shaka-spacer"),h=R.current.querySelector(".shaka-range-container");if(t&&i&&h){const T=t.getBoundingClientRect(),E=i.getBoundingClientRect();h.style.marginRight=`${T.right-E.right}px`,h.style.marginLeft=`${E.left-T.left}px`}}},ge=t=>{g.current.controls=!1,ae(t,{player:y.current,auto:me}),G(!1),D()},K={width:c?`${c}px`:void 0,height:o?`${o}px`:void 0},Q=fe&&R.current?R.current.querySelector(".shaka-controls-container"):null;return e.createElement("div",{style:K,className:Z("video-player",{"video-player--poster":!ce,"video-player--compact":u==="compact"})},e.createElement("div",{className:"video-player__container",ref:R,style:K},e.createElement("video",Object.assign({ref:g,poster:a,playsInline:!0,muted:l!==!1,onPlaying:pe,onPause:ge,onVolumeChange:ve},z),O.map((t,i)=>e.createElement("source",Object.assign({key:i},t))))),e.createElement("div",{className:Z("video-player__overlay",{"video-player__overlay--hidden":!ue})},e.createElement(Le.EbayIconAttention64,null),e.createElement("div",{className:"video-player__overlay-text"},N)),Q&&P.createPortal(e.createElement("div",{className:"shaka-play-button-container"},e.createElement("button",{type:"button",className:"shaka-play-button","aria-label":p,onClick:ye},e.createElement(Fe.EbayIconPlayFilled64Colored,{width:64}))),Q),!V&&e.createElement(Be,{reportText:n,a11yReportText:m,onReport:le}),e.createElement(Oe,{a11ySkipToLiveText:b}),e.createElement(Ne,null),e.createElement(Ve,null),e.createElement(we,{a11yMuteText:_,a11yUnmuteText:F}),e.createElement(qe,{a11yFullscreenText:S,a11yExitFullscreenText:f}),e.createElement(Ue,null))};exports.EbayVideo=$e;exports.EbayVideoSource=ee;