Hide metadata and control if not available

badaix · Jan 7, 2024 · a3b361f · a3b361f
1 parent 25f275c
commit a3b361f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 47 deletions.
diff --git a/src/components/Group.tsx b/src/components/Group.tsx
@@ -226,9 +226,9 @@ export default function Group(props: GroupProps) {
     return (<div>{snackbar()}</div>);
 
   let stream = props.server.getStream(props.group.stream_id);
-  let artUrl = stream?.properties.metadata.artUrl || logo;
-  let title = stream?.properties.metadata.title || "Unknown Title";
-  let artist: string = (stream?.properties.metadata.artist) ? stream!.properties.metadata.artist!.join(', ') : "Unknown Artist";
+  let artUrl = stream?.properties.metadata?.artUrl || logo;
+  let title = stream?.properties.metadata?.title || "Unknown Title";
+  let artist: string = (stream?.properties.metadata?.artist) ? stream!.properties.metadata.artist.join(', ') : "Unknown Artist";
 
   console.debug("Art URL: " + artUrl);
 
@@ -273,36 +273,39 @@ export default function Group(props: GroupProps) {
               </FormControl>
             </Stack>
 
-            <Stack direction="row" justifyContent="center" alignItems="center" >
-              <IconButton aria-label="previous" onClick={() => { props.snapcontrol.control(props.group.stream_id, 'previous') }}>
-                <SkipPreviousIcon />
-              </IconButton>
-              <IconButton aria-label="play/pause" onClick={() => { handlePlayPauseClicked(); }}>
-                {props.server.getStream(props.group.stream_id)?.properties.playbackStatus === "playing" ? <PauseIcon /> : <PlayArrowIcon />}
-                {/* sx={{ height: 32, width: 32 }} /> */}
-              </IconButton>
-              <IconButton aria-label="next" onClick={() => { props.snapcontrol.control(props.group.stream_id, 'next') }}>
-                <SkipNextIcon />
-              </IconButton>
-            </Stack>
-
+            {stream?.properties.canControl &&
+              <Stack direction="row" justifyContent="center" alignItems="center" >
+                <IconButton aria-label="previous" onClick={() => { props.snapcontrol.control(props.group.stream_id, 'previous') }}>
+                  <SkipPreviousIcon />
+                </IconButton>
+                <IconButton aria-label="play/pause" onClick={() => { handlePlayPauseClicked(); }}>
+                  {props.server.getStream(props.group.stream_id)?.properties.playbackStatus === "playing" ? <PauseIcon /> : <PlayArrowIcon />}
+                  {/* sx={{ height: 32, width: 32 }} /> */}
+                </IconButton>
+                <IconButton aria-label="next" onClick={() => { props.snapcontrol.control(props.group.stream_id, 'next') }}>
+                  <SkipNextIcon />
+                </IconButton>
+              </Stack>
+            }
           </Grid>
-          <Stack spacing={2} direction="row" alignItems="center" >
-            <CardMedia
-              component="img"
-              sx={{ width: 48 }}
-              image={artUrl}
-              alt={title + " cover"}
-            />
-            <Stack spacing={0} direction="column" justifyContent="center" sx={{ flexGrow: 1, overflow: 'hidden' }}>
-              <Typography noWrap variant="subtitle1" align="left">
-                {title}
-              </Typography>
-              <Typography noWrap variant="body1" align="left">
-                {artist}
-              </Typography>
+          {stream?.properties.metadata &&
+            <Stack spacing={2} direction="row" alignItems="center" >
+              <CardMedia
+                component="img"
+                sx={{ width: 48 }}
+                image={artUrl}
+                alt={title + " cover"}
+              />
+              <Stack spacing={0} direction="column" justifyContent="center" sx={{ flexGrow: 1, overflow: 'hidden' }}>
+                <Typography noWrap variant="subtitle1" align="left">
+                  {title}
+                </Typography>
+                <Typography noWrap variant="body1" align="left">
+                  {artist}
+                </Typography>
+              </Stack>
             </Stack>
-          </Stack>
+          }
           {groupClients.length > 1 &&
             <Stack spacing={2} direction="row" alignItems="center">
               <IconButton aria-label="Mute" onClick={() => { handleMuteClicked() }}>

diff --git a/src/components/SnapWeb.tsx b/src/components/SnapWeb.tsx
@@ -120,18 +120,18 @@ export default function SnapWeb(props: SnapWebProps) {
       let streamId = getMyStreamId();
       let properties = props.snapcontrol.getStream(streamId).properties;
       let metadata = properties.metadata;
-      let title: string = metadata.title || "Unknown Title";
-      let artist: string = (metadata.artist !== undefined) ? metadata.artist.join(', ') : "Unknown Artist";
-      let album: string = metadata.album || "";
+      let title: string = metadata?.title || "Unknown Title";
+      let artist: string = (metadata?.artist !== undefined) ? metadata?.artist.join(', ') : "Unknown Artist";
+      let album: string = metadata?.album || "";
       let artwork: Array<MediaImage> = [{ src: snapcast512, sizes: '512x512', type: 'image/png' }];
-      if (metadata.artUrl !== undefined) {
+      if (metadata?.artUrl !== undefined) {
         artwork = [
-          { src: metadata.artUrl!, sizes: '96x96', type: 'image/png' },
-          { src: metadata.artUrl!, sizes: '128x128', type: 'image/png' },
-          { src: metadata.artUrl!, sizes: '192x192', type: 'image/png' },
-          { src: metadata.artUrl!, sizes: '256x256', type: 'image/png' },
-          { src: metadata.artUrl!, sizes: '384x384', type: 'image/png' },
-          { src: metadata.artUrl!, sizes: '512x512', type: 'image/png' },
+          { src: metadata.artUrl, sizes: '96x96', type: 'image/png' },
+          { src: metadata.artUrl, sizes: '128x128', type: 'image/png' },
+          { src: metadata.artUrl, sizes: '192x192', type: 'image/png' },
+          { src: metadata.artUrl, sizes: '256x256', type: 'image/png' },
+          { src: metadata.artUrl, sizes: '384x384', type: 'image/png' },
+          { src: metadata.artUrl, sizes: '512x512', type: 'image/png' },
         ]
       } // || 'snapcast-512.png';
       console.info('Metadata title: ' + title + ', artist: ' + artist + ', album: ' + album + ", artwork: " + artwork);
@@ -183,27 +183,27 @@ export default function SnapWeb(props: SnapWebProps) {
 
       mediaSession.setActionHandler('seekforward', properties.canSeek ? (event: MediaSessionActionDetails) => {
         let offset: number = event.seekOffset || defaultSkipTime;
-        if ((metadata.duration !== undefined) && (properties.position !== undefined))
+        if ((metadata?.duration !== undefined) && (properties.position !== undefined))
           Math.min(properties.position! + offset, metadata.duration!);
         props.snapcontrol.control(streamId, 'seek', { 'offset': offset })
       } : null);
 
       try {
         mediaSession.setActionHandler('seekto', properties.canSeek ? (event: MediaSessionActionDetails) => {
           let position: number = event.seekTime || 0;
-          if (metadata.duration !== undefined)
+          if (metadata?.duration !== undefined)
             Math.min(position, metadata.duration!);
           props.snapcontrol.control(streamId, 'setPosition', { 'position': position })
         } : null);
       } catch (error) {
         console.debug('Warning! The "seekto" media session action is not supported.');
       }
 
-      if ((metadata.duration !== undefined) && (properties.position !== undefined) && (properties.position! <= metadata.duration!)) {
+      if ((metadata?.duration !== undefined) && (properties.position !== undefined) && (properties.position! <= metadata.duration!)) {
         if ('setPositionState' in mediaSession) {
           console.debug('Updating position state: ' + properties.position! + '/' + metadata.duration!);
           mediaSession.setPositionState!({
-            duration: metadata.duration!,
+            duration: metadata.duration,
             playbackRate: 1.0,
             position: properties.position!
           });

diff --git a/src/snapcontrol.ts b/src/snapcontrol.ts
@@ -141,7 +141,7 @@ namespace Snapcast {
             if (json.metadata !== undefined) {
                 this.metadata = new Metadata(json.metadata);
             } else {
-                this.metadata = new Metadata({});
+                this.metadata = undefined;
             }
         }
 
@@ -159,7 +159,7 @@ namespace Snapcast {
         canPause: boolean = false;
         canSeek: boolean = false;
         canControl: boolean = false;
-        metadata!: Metadata;
+        metadata?: Metadata;
     }
 
     export class Stream {