tune media panel

Author: zendive

src/api/const.ts

@@ -49,8 +49,9 @@ export const MEDIA_ELEMENT_EVENTS = [
 ];
 
 export const MEDIA_ELEMENT_PROPS = [
-  'src',
+  'poster',
   'currentSrc',
+  'src',
   'srcObject',
   'error',
   'preload',
@@ -66,14 +67,13 @@ export const MEDIA_ELEMENT_PROPS = [
   'ended',
   'autoplay',
   'loop',
+  'defaultMuted',
   'muted',
   'volume',
-  'preservesPitch',
-  'defaultMuted',
   'crossOrigin',
   'defaultPlaybackRate',
   'playbackRate',
-  'mediaGroup',
+  'preservesPitch',
   'controls',
   'audioTracks',
   'videoTracks',
@@ -84,7 +84,6 @@ export const MEDIA_ELEMENT_PROPS = [
   'height',
   'videoWidth',
   'videoHeight',
-  'poster',
 ];
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/networkState
 export const NETWORK_STATE = [

src/api/mediaMonitor.ts

@@ -67,10 +67,12 @@ export function collectMediaMetrics(
     rv.collection = mediaCollection.map((v) => {
       // refresh props metrics
       for (const prop of MEDIA_ELEMENT_PROPS) {
-        v.metrics.props[prop] = formatPropValue(
-          prop,
-          v.el[prop as keyof HTMLMediaElement]
-        );
+        if (prop in v.el) {
+          v.metrics.props[prop] = formatPropValue(
+            prop,
+            v.el[prop as keyof HTMLMediaElement]
+          );
+        }
       }
       return v.metrics;
     });
@@ -86,6 +88,8 @@ function formatPropValue(prop: string, value: unknown): any {
     rv = `${value} - ${NETWORK_STATE[value as number]}`;
   } else if ('readyState' === prop) {
     rv = `${value} - ${READY_STATE[value as number]}`;
+  } else if ('srcObject' === prop) {
+    rv = value ? `${value}` : value;
   } else if (value instanceof TimeRanges) {
     rv = [];
 
@@ -95,7 +99,7 @@ function formatPropValue(prop: string, value: unknown): any {
 
     rv = rv.join('');
   } else if (value instanceof TextTrackList) {
-    rv = `[${value.length}]`;
+    rv = value.length;
   } else if (value instanceof MediaError) {
     rv = `${value.code}/${value.message}`;
   }

src/view/components/MediaMetrics.svelte

@@ -24,7 +24,13 @@
       <table class="w-full">
         <caption class="bc-invert ta-l">Properties</caption>
         {#each Object.entries(metrics.props) as [label, value] (label)}
-          <tr class:isPassive={null === value} class:isActive={true === value}>
+          <tr
+            class:isPassive={null === value ||
+              false === value ||
+              '' === value ||
+              0 === value}
+            class:isActive={true === value}
+          >
             <td class="item-label">{label}</td>
             <td class="item-value">
               {#if ['networkState', 'readyState'].includes(label)}