@yuebai008/cli/dist/cli-server/client/front_end/panels/media/PlayerPropertiesView.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as SourceFrame from"../../ui/legacy/components/source_frame/source_frame.js";import*as UI from"../../ui/legacy/legacy.js";import playerPropertiesViewStyles from"./playerPropertiesView.css.js";const UIStrings={video:"Video",audio:"Audio",track:"Track",decoder:"Decoder",properties:"Properties",textTrack:"Text track",noTextTracks:"No text tracks",resolution:"Resolution",fileSize:"File size",bitrate:"Bitrate",duration:"Duration",startTime:"Start time",streaming:"Streaming",playbackFrameUrl:"Playback frame URL",playbackFrameTitle:"Playback frame title",singleoriginPlayback:"Single-origin playback",rangeHeaderSupport:"`Range` header support",frameRate:"Frame rate",videoPlaybackRoughness:"Video playback roughness",videoFreezingScore:"Video freezing score",rendererName:"Renderer name",decoderName:"Decoder name",noDecoder:"No decoder",hardwareDecoder:"Hardware decoder",decryptingDemuxer:"Decrypting demuxer",encoderName:"Encoder name",noEncoder:"No encoder",hardwareEncoder:"Hardware encoder"},str_=i18n.i18n.registerUIStrings("panels/media/PlayerPropertiesView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),i18nLazyString=i18n.i18n.getLazilyComputedLocalizedString.bind(void 0,str_);export class PropertyRenderer extends UI.Widget.VBox{title;contents;value;pseudoColorProtectionElement;constructor(e){super(),this.contentElement.classList.add("media-property-renderer");const t=this.contentElement.createChild("span","media-property-renderer-title");this.contents=this.contentElement.createChild("div","media-property-renderer-contents"),UI.UIUtils.createTextChild(t,e),this.title=e,this.value=null,this.pseudoColorProtectionElement=null,this.contentElement.classList.add("media-property-renderer-hidden")}updateData(e,t){if(""===t||null===t)return this.updateDataInternal(e,null);try{t=JSON.parse(t)}catch(e){}return this.updateDataInternal(e,t)}updateDataInternal(e,t){if(null===t)this.changeContents(null);else{if(this.value===t)return;this.value=t,this.changeContents(t)}}unsetNestedContents(){this.contentElement.classList.add("media-property-renderer-hidden"),null===this.pseudoColorProtectionElement&&(this.pseudoColorProtectionElement=document.createElement("div"),this.pseudoColorProtectionElement.classList.add("media-property-renderer"),this.pseudoColorProtectionElement.classList.add("media-property-renderer-hidden"),this.contentElement.parentNode.insertBefore(this.pseudoColorProtectionElement,this.contentElement))}changeNestedContents(e){if(null===e||0===Object.keys(e).length)this.unsetNestedContents();else{null!==this.pseudoColorProtectionElement&&(this.pseudoColorProtectionElement.remove(),this.pseudoColorProtectionElement=null),this.contentElement.classList.remove("media-property-renderer-hidden"),this.contents.removeChildren();new SourceFrame.JSONView.JSONView(new SourceFrame.JSONView.ParsedJSON(e,"",""),!0).show(this.contents)}}changeContents(e){if(null===e)this.unsetNestedContents();else{null!==this.pseudoColorProtectionElement&&(this.pseudoColorProtectionElement.remove(),this.pseudoColorProtectionElement=null),this.contentElement.classList.remove("media-property-renderer-hidden"),this.contents.removeChildren();const t=document.createElement("span");t.textContent=e,this.contents.appendChild(t)}}}export class FormattedPropertyRenderer extends PropertyRenderer{formatfunction;constructor(e,t){super(e),this.formatfunction=t}updateDataInternal(e,t){null===t?this.changeContents(null):this.changeContents(this.formatfunction(t))}}export class DefaultPropertyRenderer extends PropertyRenderer{constructor(e,t){super(e),this.changeContents(t)}}export class NestedPropertyRenderer extends PropertyRenderer{constructor(e,t){super(e),this.changeNestedContents(t)}}export class DimensionPropertyRenderer extends PropertyRenderer{width;height;constructor(e){super(e),this.width=0,this.height=0}updateDataInternal(e,t){let r=!1;"width"===e&&Number(t)!==this.width&&(this.width=Number(t),r=!0),"height"===e&&Number(t)!==this.height&&(this.height=Number(t),r=!0),0===this.width||0===this.height?this.changeContents(null):r&&this.changeContents(`${this.width}×${this.height}`)}}export class AttributesView extends UI.Widget.VBox{contentHash;constructor(e){super(),this.contentHash=0,this.contentElement.classList.add("media-attributes-view");for(const t of e){t.show(this.contentElement);const e=this.contentElement.textContent;null!==e&&(this.contentHash+=Platform.StringUtilities.hashCode(e))}}getContentHash(){return this.contentHash}}export class TrackManager{type;view;constructor(e,t){this.type=t,this.view=e}updateData(e,t){const r=this.view.getTabs(this.type),n=JSON.parse(t);let i=1;for(const e of n)this.addNewTab(r,e,i),i++}addNewTab(e,t,r){const n=[];for(const[e,r]of Object.entries(t))"object"==typeof r?n.push(new NestedPropertyRenderer(i18n.i18n.lockedString(e),r)):n.push(new DefaultPropertyRenderer(i18n.i18n.lockedString(e),r));const i=new AttributesView(n);e.addNewTab(r,i)}}export class VideoTrackManager extends TrackManager{constructor(e){super(e,"video")}}export class TextTrackManager extends TrackManager{constructor(e){super(e,"text")}}export class AudioTrackManager extends TrackManager{constructor(e){super(e,"audio")}}const TrackTypeLocalized={Video:i18nLazyString(UIStrings.video),Audio:i18nLazyString(UIStrings.audio)};class GenericTrackMenu extends UI.TabbedPane.TabbedPane{decoderName;trackName;constructor(e,t=i18nString(UIStrings.track)){super(),this.decoderName=e,this.trackName=t}addNewTab(e,t){const r=i18nString(UIStrings.track),n=`Track${e}`;if(this.hasTab(n)){const e=this.tabView(n);if(null===e)return;if(e.getContentHash()===t.getContentHash())return;this.closeTab(n,!1)}this.appendTab(n,`${this.trackName} #${e}`,t,`${this.decoderName} ${r} #${e}`)}}class DecoderTrackMenu extends GenericTrackMenu{constructor(e,t){super(e);const r=`${e} ${i18nString(UIStrings.decoder)}`,n=`${r} ${i18nString(UIStrings.properties)}`;this.appendTab("DecoderProperties",r,t,n)}}class NoTracksPlaceholderMenu extends UI.Widget.VBox{isPlaceholder;wrapping;constructor(e,t){super(),this.isPlaceholder=!0,this.wrapping=e,this.wrapping.appendTab("_placeholder",t,new UI.Widget.VBox,t),this.wrapping.show(this.contentElement)}addNewTab(e,t){this.isPlaceholder&&(this.wrapping.closeTab("_placeholder"),this.isPlaceholder=!1),this.wrapping.addNewTab(e,t)}}export class PlayerPropertiesView extends UI.Widget.VBox{mediaElements;videoDecoderElements;audioDecoderElements;textTrackElements;attributeMap;videoProperties;videoDecoderProperties;audioDecoderProperties;videoDecoderTabs;audioDecoderTabs;textTracksTabs;constructor(){super(),this.contentElement.classList.add("media-properties-frame"),this.mediaElements=[],this.videoDecoderElements=[],this.audioDecoderElements=[],this.textTrackElements=[],this.attributeMap=new Map,this.populateAttributesAndElements(),this.videoProperties=new AttributesView(this.mediaElements),this.videoDecoderProperties=new AttributesView(this.videoDecoderElements),this.audioDecoderProperties=new AttributesView(this.audioDecoderElements),this.videoProperties.show(this.contentElement),this.videoDecoderTabs=new DecoderTrackMenu(TrackTypeLocalized.Video(),this.videoDecoderProperties),this.videoDecoderTabs.show(this.contentElement),this.audioDecoderTabs=new DecoderTrackMenu(TrackTypeLocalized.Audio(),this.audioDecoderProperties),this.audioDecoderTabs.show(this.contentElement),this.textTracksTabs=null}lazyCreateTrackTabs(){let e=this.textTracksTabs;if(null===e){const t=new GenericTrackMenu(i18nString(UIStrings.textTrack));e=new NoTracksPlaceholderMenu(t,i18nString(UIStrings.noTextTracks)),e.show(this.contentElement),this.textTracksTabs=e}return e}getTabs(e){if("audio"===e)return this.audioDecoderTabs;if("video"===e)return this.videoDecoderTabs;if("text"===e)return this.lazyCreateTrackTabs();throw new Error("Unreachable")}onProperty(e){const t=this.attributeMap.get(e.name);if(!t)throw new Error(`Player property "${e.name}" not supported.`);t.updateData(e.name,e.value)}formatKbps(e){if(""===e)return"0 kbps";return`${Math.floor(Number(e)/1e3)} kbps`}formatTime(e){if(""===e)return"0:00";const t=new Date;return t.setSeconds(Number(e)),t.toISOString().substr(11,8)}formatFileSize(e){if(""===e)return"0 bytes";const t=Number(e);if(t<1e3)return`${e} bytes`;const r=Math.floor(Math.log10(t)/3),n=["bytes","kB","MB","GB","TB"][r];return`${(t/Math.pow(1e3,r)).toFixed(2)} ${n}`}populateAttributesAndElements(){const e=new PropertyRenderer(i18nString(UIStrings.resolution));this.mediaElements.push(e),this.attributeMap.set("kResolution",e);const t=new FormattedPropertyRenderer(i18nString(UIStrings.fileSize),this.formatFileSize);this.mediaElements.push(t),this.attributeMap.set("kTotalBytes",t);const r=new FormattedPropertyRenderer(i18nString(UIStrings.bitrate),this.formatKbps);this.mediaElements.push(r),this.attributeMap.set("kBitrate",r);const n=new FormattedPropertyRenderer(i18nString(UIStrings.duration),this.formatTime);this.mediaElements.push(n),this.attributeMap.set("kMaxDuration",n);const i=new PropertyRenderer(i18nString(UIStrings.startTime));this.mediaElements.push(i),this.attributeMap.set("kStartTime",i);const s=new PropertyRenderer(i18nString(UIStrings.streaming));this.mediaElements.push(s),this.attributeMap.set("kIsStreaming",s);const o=new PropertyRenderer(i18nString(UIStrings.playbackFrameUrl));this.mediaElements.push(o),this.attributeMap.set("kFrameUrl",o);const a=new PropertyRenderer(i18nString(UIStrings.playbackFrameTitle));this.mediaElements.push(a),this.attributeMap.set("kFrameTitle",a);const d=new PropertyRenderer(i18nString(UIStrings.singleoriginPlayback));this.mediaElements.push(d),this.attributeMap.set("kIsSingleOrigin",d);const c=new PropertyRenderer(i18nString(UIStrings.rangeHeaderSupport));this.mediaElements.push(c),this.attributeMap.set("kIsRangeHeaderSupported",c);const h=new PropertyRenderer(i18nString(UIStrings.frameRate));this.mediaElements.push(h),this.attributeMap.set("kFramerate",h);const l=new PropertyRenderer(i18nString(UIStrings.videoPlaybackRoughness));this.mediaElements.push(l),this.attributeMap.set("kVideoPlaybackRoughness",l);const p=new PropertyRenderer(i18nString(UIStrings.videoFreezingScore));this.mediaElements.push(p),this.attributeMap.set("kVideoPlaybackFreezing",p);const u=new PropertyRenderer(i18nString(UIStrings.rendererName));this.mediaElements.push(u),this.attributeMap.set("kRendererName",u);const m=new DefaultPropertyRenderer(i18nString(UIStrings.decoderName),i18nString(UIStrings.noDecoder));this.videoDecoderElements.push(m),this.attributeMap.set("kVideoDecoderName",m);const g=new PropertyRenderer(i18nString(UIStrings.hardwareDecoder));this.videoDecoderElements.push(g),this.attributeMap.set("kIsPlatformVideoDecoder",g);const S=new DefaultPropertyRenderer(i18nString(UIStrings.encoderName),i18nString(UIStrings.noEncoder));this.videoDecoderElements.push(S),this.attributeMap.set("kVideoEncoderName",S);const b=new PropertyRenderer(i18nString(UIStrings.hardwareEncoder));this.videoDecoderElements.push(b),this.attributeMap.set("kIsPlatformVideoEncoder",b);const w=new PropertyRenderer(i18nString(UIStrings.decryptingDemuxer));this.videoDecoderElements.push(w),this.attributeMap.set("kIsVideoDecryptingDemuxerStream",w);const y=new VideoTrackManager(this);this.attributeMap.set("kVideoTracks",y);const k=new DefaultPropertyRenderer(i18nString(UIStrings.decoderName),i18nString(UIStrings.noDecoder));this.audioDecoderElements.push(k),this.attributeMap.set("kAudioDecoderName",k);const P=new PropertyRenderer(i18nString(UIStrings.hardwareDecoder));this.audioDecoderElements.push(P),this.attributeMap.set("kIsPlatformAudioDecoder",P);const T=new PropertyRenderer(i18nString(UIStrings.decryptingDemuxer));this.audioDecoderElements.push(T),this.attributeMap.set("kIsAudioDecryptingDemuxerStream",T);const E=new AudioTrackManager(this);this.attributeMap.set("kAudioTracks",E);const D=new TextTrackManager(this);this.attributeMap.set("kTextTracks",D)}wasShown(){super.wasShown(),this.registerCSSFiles([playerPropertiesViewStyles])}}