@livepeer-frameworks/player-wc 0.1.4 → 0.1.5

package/dist/fw-player.iife.js

@@ -497,11 +497,20 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
   .fw-context-menu-item {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition:
@@ -540,11 +549,20 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
   .fw-context-menu-checkbox {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.5rem 0.5rem 2rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition:
@@ -2919,10 +2937,8 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
                   .playbackMode=${this.playbackMode}
                   .isContentLive=${e.isEffectivelyLive}
                   .devMode=${this.devMode}
-                  .isDevPanelOpen=${this._isDevPanelOpen}
                   .isStatsOpen=${this._isStatsOpen}
                   @fw-stats-toggle=${()=>{this._isStatsOpen=!this._isStatsOpen}}
-                  @fw-dev-panel-toggle=${()=>{this._isDevPanelOpen=!this._isDevPanelOpen}}
                   @fw-mode-change=${e=>{this.playbackMode=e.detail.mode}}
                 ></fw-player-controls>
               `}
@@ -3138,8 +3154,9 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
       .player-area--dev {
         flex: 1;
         min-width: 0;
+        min-height: 0;
       }
-    `],n([ye({attribute:"content-id"})],e.FwPlayer.prototype,"contentId",void 0),n([ye({attribute:"content-type"})],e.FwPlayer.prototype,"contentType",void 0),n([ye({attribute:"gateway-url"})],e.FwPlayer.prototype,"gatewayUrl",void 0),n([ye({attribute:"mist-url"})],e.FwPlayer.prototype,"mistUrl",void 0),n([ye({attribute:"auth-token"})],e.FwPlayer.prototype,"authToken",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"autoplay",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"muted",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"controls",void 0),n([ye({type:Boolean,attribute:"stock-controls"})],e.FwPlayer.prototype,"stockControls",void 0),n([ye({type:Boolean,attribute:"native-controls"})],e.FwPlayer.prototype,"nativeControls",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"debug",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],e.FwPlayer.prototype,"devMode",void 0),n([ye({attribute:"thumbnail-url"})],e.FwPlayer.prototype,"thumbnailUrl",void 0),n([ye({attribute:"playback-mode"})],e.FwPlayer.prototype,"playbackMode",void 0),n([ye({attribute:!1})],e.FwPlayer.prototype,"endpoints",void 0),n([be()],e.FwPlayer.prototype,"_isStatsOpen",void 0),n([be()],e.FwPlayer.prototype,"_isDevPanelOpen",void 0),n([be()],e.FwPlayer.prototype,"_skipDirection",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuOpen",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuMounted",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuState",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuSide",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuActiveLevel",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuOpenSubmenu",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuSubmenuSide",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuX",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuY",void 0),n([ve("#container")],e.FwPlayer.prototype,"_containerEl",void 0),e.FwPlayer=n([pe("fw-player")],e.FwPlayer);let Qt=class extends he{constructor(){super(...arguments),this.playbackMode="auto",this.isContentLive=!1,this.devMode=!1,this.isDevPanelOpen=!1,this.showStatsButton=!1,this.isStatsOpen=!1,this._settingsOpen=!1,this._isNearLiveState=!0,this._buffered=null,this._boundVideo=null,this._onBufferedUpdate=null,this._onWindowClick=e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.classList.contains("fw-settings-anchor")||e.classList.contains("fw-settings-menu")))||(this._settingsOpen=!1)}}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this._unbindVideoEvents(),this._detachWindowClickListener()}updated(e){this._bindVideoEvents(),this._reconcileNearLiveState(),e.has("_settingsOpen")&&(this._settingsOpen?this._attachWindowClickListener():this._detachWindowClickListener())}_bindVideoEvents(){const e=this.pc?.s.videoElement??null;if(e===this._boundVideo)return;if(this._unbindVideoEvents(),this._boundVideo=e,!e)return void(this._buffered=null);const t=()=>{this._buffered=this.pc.getBufferedRanges()??e.buffered};t(),e.addEventListener("progress",t),e.addEventListener("loadeddata",t),this._onBufferedUpdate=t}_unbindVideoEvents(){if(!this._boundVideo)return;const e=this._onBufferedUpdate;e&&(this._boundVideo.removeEventListener("progress",e),this._boundVideo.removeEventListener("loadeddata",e)),this._boundVideo=null,this._onBufferedUpdate=null}_attachWindowClickListener(){window.setTimeout(()=>{this._settingsOpen&&window.addEventListener("click",this._onWindowClick)},0)}_detachWindowClickListener(){window.removeEventListener("click",this._onWindowClick)}_deriveBufferWindowMs(e){if(!e)return;const t=Object.values(e);if(0===t.length)return;const n=t.map(e=>e.firstms).filter(e=>"number"==typeof e),i=t.map(e=>e.lastms).filter(e=>"number"==typeof e);if(0===n.length||0===i.length)return;const r=Math.max(...n),s=Math.min(...i)-r;return!Number.isFinite(s)||s<=0?void 0:s}_getSeekingContext(){const e=this.pc.s,t=this.pc.getController(),n=e.currentSourceInfo?.type,i=e.streamState?.streamInfo,r=function(e,t,n){return void 0!==e?e:t?.type?"live"===t.type:!Number.isFinite(n)}(this.isContentLive,i,e.duration),s=i?.meta?.buffer_window??this._deriveBufferWindowMs(i?.meta?.tracks),a=St(e.videoElement),o=St(e.videoElement)&&void 0!==s&&s>0&&"whep"!==n&&"webrtc"!==n,l=kt({isLive:r,video:e.videoElement,mistStreamInfo:i,currentTime:e.currentTime,duration:e.duration,allowMediaStreamDvr:o}),u=this.pc.getSeekableStart(),d=this.pc.getLiveEdge(),c=Number.isFinite(u)&&Number.isFinite(d)&&d>=u&&(d>0||u>0),h=c?u:l.seekableStart,f=c?d:l.liveEdge,p=r&&Number.isFinite(f)&&Number.isFinite(h)&&f>h;return{mistStreamInfo:i,isLive:r,sourceType:n,seekableStart:h,liveEdge:f,hasDvrWindow:p,canSeek:(t?.canSeekStream?.()??It({video:e.videoElement,isLive:r,duration:e.duration,bufferWindowMs:s}))&&(!r||p),commitOnRelease:r,liveThresholds:At(n,a,s)}}_reconcileNearLiveState(){const e=this._getSeekingContext();if(!e.isLive)return void(this._isNearLiveState||(this._isNearLiveState=!0));const t=Ct(this.pc.s.currentTime,e.liveEdge,e.liveThresholds,this._isNearLiveState);t!==this._isNearLiveState&&(this._isNearLiveState=t)}_handleModeChange(e){const{mode:t}=e.detail;this.dispatchEvent(new CustomEvent("fw-mode-change",{detail:{mode:t},bubbles:!0,composed:!0}))}render(){const e=this.pc.s,t=!e.videoElement,n=this._getSeekingContext(),i=e.shouldShowControls||e.isPaused||!e.hasPlaybackStarted||e.shouldShowIdleScreen||!!e.error||this._settingsOpen,r=$t({isLive:n.isLive,currentTime:e.currentTime,duration:e.duration,liveEdge:n.liveEdge,seekableStart:n.seekableStart,unixoffset:n.mistStreamInfo?.unixoffset}),s=!n.hasDvrWindow||this._isNearLiveState;return W`
+    `],n([ye({attribute:"content-id"})],e.FwPlayer.prototype,"contentId",void 0),n([ye({attribute:"content-type"})],e.FwPlayer.prototype,"contentType",void 0),n([ye({attribute:"gateway-url"})],e.FwPlayer.prototype,"gatewayUrl",void 0),n([ye({attribute:"mist-url"})],e.FwPlayer.prototype,"mistUrl",void 0),n([ye({attribute:"auth-token"})],e.FwPlayer.prototype,"authToken",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"autoplay",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"muted",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"controls",void 0),n([ye({type:Boolean,attribute:"stock-controls"})],e.FwPlayer.prototype,"stockControls",void 0),n([ye({type:Boolean,attribute:"native-controls"})],e.FwPlayer.prototype,"nativeControls",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"debug",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],e.FwPlayer.prototype,"devMode",void 0),n([ye({attribute:"thumbnail-url"})],e.FwPlayer.prototype,"thumbnailUrl",void 0),n([ye({attribute:"playback-mode"})],e.FwPlayer.prototype,"playbackMode",void 0),n([ye({attribute:!1})],e.FwPlayer.prototype,"endpoints",void 0),n([be()],e.FwPlayer.prototype,"_isStatsOpen",void 0),n([be()],e.FwPlayer.prototype,"_isDevPanelOpen",void 0),n([be()],e.FwPlayer.prototype,"_skipDirection",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuOpen",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuMounted",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuState",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuSide",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuActiveLevel",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuOpenSubmenu",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuSubmenuSide",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuX",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuY",void 0),n([ve("#container")],e.FwPlayer.prototype,"_containerEl",void 0),e.FwPlayer=n([pe("fw-player")],e.FwPlayer);let Qt=class extends he{constructor(){super(...arguments),this.playbackMode="auto",this.isContentLive=!1,this.devMode=!1,this.showStatsButton=!1,this.isStatsOpen=!1,this._settingsOpen=!1,this._isNearLiveState=!0,this._buffered=null,this._boundVideo=null,this._onBufferedUpdate=null,this._onWindowClick=e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.classList.contains("fw-settings-anchor")||e.classList.contains("fw-settings-menu")))||(this._settingsOpen=!1)}}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this._unbindVideoEvents(),this._detachWindowClickListener()}updated(e){this._bindVideoEvents(),this._reconcileNearLiveState(),e.has("_settingsOpen")&&(this._settingsOpen?this._attachWindowClickListener():this._detachWindowClickListener())}_bindVideoEvents(){const e=this.pc?.s.videoElement??null;if(e===this._boundVideo)return;if(this._unbindVideoEvents(),this._boundVideo=e,!e)return void(this._buffered=null);const t=()=>{this._buffered=this.pc.getBufferedRanges()??e.buffered};t(),e.addEventListener("progress",t),e.addEventListener("loadeddata",t),this._onBufferedUpdate=t}_unbindVideoEvents(){if(!this._boundVideo)return;const e=this._onBufferedUpdate;e&&(this._boundVideo.removeEventListener("progress",e),this._boundVideo.removeEventListener("loadeddata",e)),this._boundVideo=null,this._onBufferedUpdate=null}_attachWindowClickListener(){window.setTimeout(()=>{this._settingsOpen&&window.addEventListener("click",this._onWindowClick)},0)}_detachWindowClickListener(){window.removeEventListener("click",this._onWindowClick)}_deriveBufferWindowMs(e){if(!e)return;const t=Object.values(e);if(0===t.length)return;const n=t.map(e=>e.firstms).filter(e=>"number"==typeof e),i=t.map(e=>e.lastms).filter(e=>"number"==typeof e);if(0===n.length||0===i.length)return;const r=Math.max(...n),s=Math.min(...i)-r;return!Number.isFinite(s)||s<=0?void 0:s}_getSeekingContext(){const e=this.pc.s,t=this.pc.getController(),n=e.currentSourceInfo?.type,i=e.streamState?.streamInfo,r=function(e,t,n){return void 0!==e?e:t?.type?"live"===t.type:!Number.isFinite(n)}(this.isContentLive,i,e.duration),s=i?.meta?.buffer_window??this._deriveBufferWindowMs(i?.meta?.tracks),a=St(e.videoElement),o=St(e.videoElement)&&void 0!==s&&s>0&&"whep"!==n&&"webrtc"!==n,l=kt({isLive:r,video:e.videoElement,mistStreamInfo:i,currentTime:e.currentTime,duration:e.duration,allowMediaStreamDvr:o}),u=this.pc.getSeekableStart(),d=this.pc.getLiveEdge(),c=Number.isFinite(u)&&Number.isFinite(d)&&d>=u&&(d>0||u>0),h=c?u:l.seekableStart,f=c?d:l.liveEdge,p=r&&Number.isFinite(f)&&Number.isFinite(h)&&f>h;return{mistStreamInfo:i,isLive:r,sourceType:n,seekableStart:h,liveEdge:f,hasDvrWindow:p,canSeek:(t?.canSeekStream?.()??It({video:e.videoElement,isLive:r,duration:e.duration,bufferWindowMs:s}))&&(!r||p),commitOnRelease:r,liveThresholds:At(n,a,s)}}_reconcileNearLiveState(){const e=this._getSeekingContext();if(!e.isLive)return void(this._isNearLiveState||(this._isNearLiveState=!0));const t=Ct(this.pc.s.currentTime,e.liveEdge,e.liveThresholds,this._isNearLiveState);t!==this._isNearLiveState&&(this._isNearLiveState=t)}_handleModeChange(e){const{mode:t}=e.detail;this.dispatchEvent(new CustomEvent("fw-mode-change",{detail:{mode:t},bubbles:!0,composed:!0}))}render(){const e=this.pc.s,t=!e.videoElement,n=this._getSeekingContext(),i=e.shouldShowControls||e.isPaused||!e.hasPlaybackStarted||e.shouldShowIdleScreen||!!e.error||this._settingsOpen,r=$t({isLive:n.isLive,currentTime:e.currentTime,duration:e.duration,liveEdge:n.liveEdge,seekableStart:n.seekableStart,unixoffset:n.mistStreamInfo?.unixoffset}),s=!n.hasDvrWindow||this._isNearLiveState;return W`
       <div
         class=${Se({"fw-player-surface":!0,"fw-controls-wrapper":!0,"fw-controls-wrapper--visible":i,"fw-controls-wrapper--hidden":!i})}
       >
@@ -3263,20 +3280,6 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
                       </button>
                     </div>
                   `:X}
-              ${this.devMode?W`
-                    <div class="fw-control-group">
-                      <button
-                        type="button"
-                        class=${Se({"fw-btn-flush":!0,"fw-btn-flush--active":this.isDevPanelOpen})}
-                        aria-label=${this.isDevPanelOpen?"Hide advanced settings sidebar":"Show advanced settings sidebar"}
-                        title=${this.isDevPanelOpen?"Hide advanced sidebar":"Advanced sidebar"}
-                        @click=${()=>this.dispatchEvent(new CustomEvent("fw-dev-panel-toggle",{bubbles:!0,composed:!0}))}
-                      >
-                        <span class="fw-dev-toggle-label">ADV</span>
-                      </button>
-                    </div>
-                  `:X}
-
               <div class="fw-control-group fw-settings-anchor">
                 <button
                   type="button"
@@ -3344,13 +3347,7 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
       .fw-settings-anchor {
         position: relative;
       }
-
-      .fw-dev-toggle-label {
-        font-size: 10px;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-      }
-    `],n([ye({attribute:!1})],Qt.prototype,"pc",void 0),n([ye({type:String})],Qt.prototype,"playbackMode",void 0),n([ye({type:Boolean,attribute:"is-content-live"})],Qt.prototype,"isContentLive",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],Qt.prototype,"devMode",void 0),n([ye({type:Boolean,attribute:"is-dev-panel-open"})],Qt.prototype,"isDevPanelOpen",void 0),n([ye({type:Boolean,attribute:"show-stats-button"})],Qt.prototype,"showStatsButton",void 0),n([ye({type:Boolean,attribute:"is-stats-open"})],Qt.prototype,"isStatsOpen",void 0),n([be()],Qt.prototype,"_settingsOpen",void 0),n([be()],Qt.prototype,"_isNearLiveState",void 0),n([be()],Qt.prototype,"_buffered",void 0),Qt=n([pe("fw-player-controls")],Qt);
+    `],n([ye({attribute:!1})],Qt.prototype,"pc",void 0),n([ye({type:String})],Qt.prototype,"playbackMode",void 0),n([ye({type:Boolean,attribute:"is-content-live"})],Qt.prototype,"isContentLive",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],Qt.prototype,"devMode",void 0),n([ye({type:Boolean,attribute:"show-stats-button"})],Qt.prototype,"showStatsButton",void 0),n([ye({type:Boolean,attribute:"is-stats-open"})],Qt.prototype,"isStatsOpen",void 0),n([be()],Qt.prototype,"_settingsOpen",void 0),n([be()],Qt.prototype,"_isNearLiveState",void 0),n([be()],Qt.prototype,"_buffered",void 0),Qt=n([pe("fw-player-controls")],Qt);
 /**
      * @license
      * Copyright 2018 Google LLC
@@ -5379,6 +5376,7 @@ const Xt="important",Jt=" !"+Xt,Zt=_e(class extends Ee{constructor(e){if(super(e
       :host {
         display: block;
         height: 100%;
+        min-height: 0;
       }
     `],n([ye({attribute:!1})],_n.prototype,"pc",void 0),n([ye({type:String})],_n.prototype,"playbackMode",void 0),n([be()],_n.prototype,"_activeTab",void 0),n([be()],_n.prototype,"_hoveredComboIndex",void 0),n([be()],_n.prototype,"_tooltipAbove",void 0),n([be()],_n.prototype,"_showDisabledPlayers",void 0),n([be()],_n.prototype,"_playbackScore",void 0),n([be()],_n.prototype,"_qualityScore",void 0),n([be()],_n.prototype,"_stallCount",void 0),n([be()],_n.prototype,"_frameDropRate",void 0),n([be()],_n.prototype,"_videoStats",void 0),n([be()],_n.prototype,"_playerStats",void 0),_n=n([pe("fw-dev-mode-panel")],_n);const En={fontSize:"1.5rem",fontFamily:"system-ui, -apple-system, sans-serif",color:"white",backgroundColor:"rgba(0, 0, 0, 0.75)",textShadow:"2px 2px 4px rgba(0, 0, 0, 0.5)",bottom:"5%",maxWidth:"90%",padding:"0.5em 1em",borderRadius:"4px"};let Sn=class extends he{constructor(){super(...arguments),this.currentTime=0,this.enabled=!0,this.cues=[],this.className="",this._liveCues=[],this._displayedText="",this._unsubscribe=null,this._handleMetaEvent=e=>{if("subtitle"!==e.type)return;const t=this._parseSubtitleCue(e.data);t&&(this._liveCues=(()=>this._liveCues.find(e=>e.id===t.id)?this._liveCues:[...this._liveCues,t].slice(-50))())}}disconnectedCallback(){super.disconnectedCallback(),this._teardownSubscription()}updated(e){(e.has("enabled")||e.has("subscribeToMetaTrack")||e.has("metaTrackId"))&&this._syncSubscription(),(e.has("currentTime")||e.has("_liveCues"))&&this._pruneExpiredLiveCues(),(e.has("enabled")||e.has("currentTime")||e.has("cues")||e.has("_liveCues"))&&this._syncDisplayedCue()}_syncSubscription(){this._teardownSubscription(),this.enabled&&this.subscribeToMetaTrack&&this.metaTrackId&&(this._unsubscribe=this.subscribeToMetaTrack(this.metaTrackId,this._handleMetaEvent))}_teardownSubscription(){this._unsubscribe&&(this._unsubscribe(),this._unsubscribe=null)}_parseSubtitleCue(e){if("object"!=typeof e||null===e)return null;const t=e,n="string"==typeof t.text?t.text:String(t.text??"");if(!n)return null;const i="startTime"in t?Number(t.startTime):"start"in t?Number(t.start):0,r="endTime"in t?Number(t.endTime):"end"in t?Number(t.end):1/0,s=Number.isFinite(i)?i:0,a=Number.isFinite(r)?r:1/0;return{id:"string"==typeof t.id?t.id:String(Date.now()+Math.random()),text:n,startTime:s,endTime:a,lang:"string"==typeof t.lang?t.lang:void 0}}_getAllCues(){return[...this.cues??[],...this._liveCues]}_syncDisplayedCue(){if(!this.enabled)return void(this._displayedText&&(this._displayedText=""));const e=1e3*this.currentTime,t=this._getAllCues().find(t=>e>=t.startTime&&e<t.endTime),n=t?.text??"";n!==this._displayedText&&(this._displayedText=n)}_pruneExpiredLiveCues(){if(0===this._liveCues.length)return;const e=1e3*this.currentTime,t=this._liveCues.filter(t=>(t.endTime===1/0?t.startTime+1e4:t.endTime)>=e-3e4);t.length!==this._liveCues.length&&(this._liveCues=t)}render(){if(!this.enabled||!this._displayedText)return X;const e={...En,...this.subtitleStyle??{}};return W`
       <div

package/dist/types/components/fw-player-controls.d.ts

@@ -10,7 +10,6 @@ export declare class FwPlayerControls extends LitElement {
     playbackMode: PlaybackMode;
     isContentLive: boolean;
     devMode: boolean;
-    isDevPanelOpen: boolean;
     showStatsButton: boolean;
     isStatsOpen: boolean;
     private _settingsOpen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-wc",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "description": "Lit Web Components for FrameWorks streaming player — <fw-player> custom element with full UI",
   "main": "dist/cjs/index.js",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@livepeer-frameworks/player-core": "0.1.3"
+    "@livepeer-frameworks/player-core": "0.1.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",

package/src/components/fw-dev-mode-panel.ts

@@ -69,6 +69,7 @@ export class FwDevModePanel extends LitElement {
       :host {
         display: block;
         height: 100%;
+        min-height: 0;
       }
     `,
   ];

package/src/components/fw-player-controls.ts

@@ -49,7 +49,6 @@ export class FwPlayerControls extends LitElement {
   @property({ type: String }) playbackMode: PlaybackMode = "auto";
   @property({ type: Boolean, attribute: "is-content-live" }) isContentLive = false;
   @property({ type: Boolean, attribute: "dev-mode" }) devMode = false;
-  @property({ type: Boolean, attribute: "is-dev-panel-open" }) isDevPanelOpen = false;
   @property({ type: Boolean, attribute: "show-stats-button" }) showStatsButton = false;
   @property({ type: Boolean, attribute: "is-stats-open" }) isStatsOpen = false;
 
@@ -71,12 +70,6 @@ export class FwPlayerControls extends LitElement {
       .fw-settings-anchor {
         position: relative;
       }
-
-      .fw-dev-toggle-label {
-        font-size: 10px;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-      }
     `,
   ];
 
@@ -468,33 +461,6 @@ export class FwPlayerControls extends LitElement {
                     </div>
                   `
                 : nothing}
-              ${this.devMode
-                ? html`
-                    <div class="fw-control-group">
-                      <button
-                        type="button"
-                        class=${classMap({
-                          "fw-btn-flush": true,
-                          "fw-btn-flush--active": this.isDevPanelOpen,
-                        })}
-                        aria-label=${this.isDevPanelOpen
-                          ? "Hide advanced settings sidebar"
-                          : "Show advanced settings sidebar"}
-                        title=${this.isDevPanelOpen ? "Hide advanced sidebar" : "Advanced sidebar"}
-                        @click=${() =>
-                          this.dispatchEvent(
-                            new CustomEvent("fw-dev-panel-toggle", {
-                              bubbles: true,
-                              composed: true,
-                            })
-                          )}
-                      >
-                        <span class="fw-dev-toggle-label">ADV</span>
-                      </button>
-                    </div>
-                  `
-                : nothing}
-
               <div class="fw-control-group fw-settings-anchor">
                 <button
                   type="button"

package/src/components/fw-player.ts

@@ -82,6 +82,7 @@ export class FwPlayer extends LitElement {
       .player-area--dev {
         flex: 1;
         min-width: 0;
+        min-height: 0;
       }
     `,
   ];
@@ -811,14 +812,10 @@ export class FwPlayer extends LitElement {
                   .playbackMode=${this.playbackMode}
                   .isContentLive=${s.isEffectivelyLive}
                   .devMode=${this.devMode}
-                  .isDevPanelOpen=${this._isDevPanelOpen}
                   .isStatsOpen=${this._isStatsOpen}
                   @fw-stats-toggle=${() => {
                     this._isStatsOpen = !this._isStatsOpen;
                   }}
-                  @fw-dev-panel-toggle=${() => {
-                    this._isDevPanelOpen = !this._isDevPanelOpen;
-                  }}
                   @fw-mode-change=${(event: CustomEvent<{ mode: PlaybackMode }>) => {
                     this.playbackMode = event.detail.mode;
                   }}

package/src/styles/shared-styles.ts

@@ -442,11 +442,20 @@ export const sharedStyles = css`
   .fw-context-menu-item {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition:
@@ -485,11 +494,20 @@ export const sharedStyles = css`
   .fw-context-menu-checkbox {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.5rem 0.5rem 2rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition: