UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

2 lines (1 loc) 4.62 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),b=require("classnames"),d=require("shaka-player/dist/shaka-player.ui"),U=require("../utils-C9NL3q0j.js"),X=require("../progress-spinner-DTmNtD59.js"),Z=require("react-dom/client"),ee=require("../icons/ebay-icon-flag-24/index.js"),te=require("../icons/ebay-icon-play-filled-64-colored/index.js"),re=require("../icons/ebay-icon-attention-64/index.js"),V=r=>{var n=N.__rest(r,[]);return e.createElement("source",Object.assign({},n))},ne=7e3,oe=11,x={addBigPlayButton:!1,addSeekBar:!0,controlPanelElements:["play_pause","time_and_duration","spacer","mute","report","captions","fullscreen"]},ae=({callback:r,children:n})=>e.createElement("button",{className:"video-player__report-button",ref:r},e.createElement(ee.EbayIconFlag24,null),n);function le(r=()=>{}){const n=class extends d.ui.Element{constructor(o,i,y){super(o,i);const u=document.createElement("div"),h=()=>{const m=u.firstChild;o.appendChild(m),u.remove(),this.eventManager.listen(m,"click",r)};Z.createRoot(u).render(e.createElement(ae,{callback:h},y))}};return n.Factory=class{constructor(o){this.reportText=o}create(o,i){return new n(o,i,this.reportText)}},{Report:n}}const se=r=>{var{width:n,height:o,thumbnail:i,action:y,muted:u,playView:h="inline",a11yLoadText:m,a11yPlayText:q,reportText:_,volumeSlider:B,volume:L=1,hideReportButton:A,errorText:I,onVolumeChange:F=()=>{},onLoadError:j=()=>{},onPlay:M=()=>{},onReport:z=()=>{},children:$}=r,D=N.__rest(r,["width","height","thumbnail","action","muted","playView","a11yLoadText","a11yPlayText","reportText","volumeSlider","volume","hideReportButton","errorText","onVolumeChange","onLoadError","onPlay","onReport","children"]);const[P,v]=e.useState(),[R,H]=e.useState(),[S,W]=e.useState(),[E,k]=e.useState(),C=e.useRef(null),l=e.useRef(null),s=e.useRef(null),p=e.useRef(null),f=U.filterByType($,V).map(({props:t})=>t),T=t=>{v(!0),k(!0),j(t)},g=(t=0)=>{var a;!f.length||!s.current||(v(!1),s.current.load((a=f[t])===null||a===void 0?void 0:a.src).then(()=>{k(!1)}).catch(c=>{switch(console.error(c),c.code){case ne:return;case oe:setTimeout(()=>g(t),0);break;default:{const w=f.length>t+1&&t+1;w?setTimeout(()=>g(w),0):T(c)}}}).finally(()=>{v(!0)}))};e.useEffect(()=>{const t=l.current,a=C.current;if(!(!t||!a)&&(t.volume=L,d.polyfill.installAll(),s.current=new d.Player(t),!!s.current)){if(s.current.addEventListener("error",()=>T(new Error("Shake-Player error"))),s.current.addEventListener("buffering",c=>{H(c.buffering)}),p.current=new d.ui.Overlay(s.current,a,t,_),p.current.configure({addBigPlayButton:!0,controlPanelElements:[],addSeekBar:!1}),!A){const{Report:c}=le(z);d.ui.Controls.registerElement("report",new c.Factory(_))}g(),ie(a)}},[]),e.useEffect(()=>{switch(y){case"play":l.current.play();break;case"pause":l.current.pause();break}},[y]);const Y=()=>{if(!p.current)return;const t=B?{controlPanelElements:ce(x.controlPanelElements)}:{};p.current.configure(Object.assign(Object.assign({},x),t)),l.current.controls=!1},G=t=>{t.stopPropagation(),Y(),h==="fullscreen"&&l.current.requestFullscreen(),W(!0),M(t,{player:s.current})},J=()=>{l.current.play()},K=t=>{const a=t.currentTarget;F(t,{volume:Math.round((a.volume+Number.EPSILON)*100)/100,muted:a.muted})},Q=()=>{l.current.controls=!1},O={width:n?`${n}px`:void 0,height:o?`${o}px`:void 0};return e.createElement("div",{style:O,className:b("video-player",{"video-player--poster":!S})},!S&&P&&!E&&!R&&e.createElement("div",{className:"shaka-play-button-container"},e.createElement("button",{onClick:J,className:"shaka-play-button",style:{opacity:1,zIndex:999},"aria-label":q},e.createElement(te.EbayIconPlayFilled64Colored,null))),e.createElement("div",{className:"video-player__container",ref:C},e.createElement("video",Object.assign({ref:l,style:O,poster:i,muted:u||!1,onPlaying:G,onPause:Q,onVolumeChange:K},D),f.map((t,a)=>e.createElement("source",Object.assign({key:a},t))))),e.createElement("div",{className:b("video-player__overlay",{"video-player__overlay--hidden":!E})},e.createElement(re.EbayIconAttention64,null),e.createElement("div",{className:"video-player__overlay-text"},I)),e.createElement("div",{className:b("video-player__overlay",{"video-player__overlay--hidden":P&&(E||!R)})},e.createElement(X.EbayProgressSpinner,{size:"large","aria-label":m})))};function ce(r){const n=r.length-2>0?r.length-2:r.length,o=[...r];return o.splice(n,0,"volume"),o}function ie(r){const n=r.querySelectorAll(".shaka-spinner")[0];n&&n.setAttribute("hidden","")}exports.EbayVideo=se;exports.EbayVideoSource=V;