UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

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