Type fixing

frontend/src/components/AlbumCover.vue

@@ -19,18 +19,15 @@ const imagesObj = computed(() => useFragment(ImagesFragment, props.fragment));
 
 const albumUrl = computed(() => {
   const imageValue = imagesObj.value.images;
-  if (imageValue && imageValue.length > 0 && imageValue[0]) {
-    const image = imageValue[0];
-    if (image.url) {
-      return image.url;
-    }
+  if (imageValue.length > 0) {
+    return imageValue[0].url;
   }
 
   return 'https://i.scdn.co/image/ab67616d0000b273a545e3a3e6cf0cc009297553';
 });
 
 const spotifyUrl = computed(() => {
-  return imagesObj.value.external_urls?.spotify;
+  return imagesObj.value.external_urls.spotify;
 });
 </script>
 

frontend/src/components/Controls.vue

@@ -13,14 +13,12 @@ const props = defineProps<{
 }>();
 
 const controlObj = computed(() => useFragment(ControlFragment, props.fragment));
-const isPlaying = computed(() => controlObj.value.is_playing || false);
+const isPlaying = computed(() => controlObj.value.is_playing);
 </script>
 
 <template>
   <div>
-    <button
-      class="w-16 h-16"
-    >
+    <button class="w-16 h-16">
       <svg
         v-if="isPlaying"
         xmlns="http://www.w3.org/2000/svg"

frontend/src/components/Player.vue

@@ -42,15 +42,11 @@ const imagesObj = computed(() => trackObj.value?.album);
         />
         <Controls
           class="ml-auto"
-          v-if="trackObj"
           :fragment="playerStateObj"
         />
       </div>
 
-      <ProgressBar
-        v-if="playerStateObj"
-        :fragment="playerStateObj"
-      />
+      <ProgressBar :fragment="playerStateObj" />
     </div>
   </div>
 </template>

frontend/src/components/ProgressBar.vue

@@ -20,8 +20,8 @@ const props = defineProps<{
 
 const progressObj = computed(() => useFragment(ProgressFragment, props.fragment));
 const timestamp = useTimestamp({ interval: 1000 });
-const timeAgo = computed(() => timestamp.value - (progressObj.value.timestamp || 0));
-const progressMs = computed(() => progressObj.value.progress_ms || 0);
+const timeAgo = computed(() => timestamp.value - (progressObj.value.timestamp));
+const progressMs = computed(() => progressObj.value.progress_ms);
 const durationMs = computed(() => progressObj.value.item?.duration_ms || 0);
 const actualProgressMs = computed(() => {
   let prog = progressMs.value;
@@ -37,10 +37,6 @@ const progressPercentage = computed(() => {
 });
 
 const formatTime = (ms: number) => {
-  if (!ms) {
-    return '0:00';
-  }
-
   const seconds = Math.floor(ms / 1000);
   const minutes = Math.floor(seconds / 60);
   const remainingSeconds = seconds % 60;

frontend/src/components/TrackInfo.vue

@@ -19,12 +19,12 @@ const props = defineProps<{
 
 const trackObj = computed(() => useFragment(TrackFragment, props.fragment));
 const artists = computed(() => {
-  return trackObj.value.artists?.map((artist) => {
+  return trackObj.value.artists.map((artist) => {
     return {
-      name: artist?.name,
-      link: artist?.external_urls?.spotify,
+      name: artist.name,
+      link: artist.external_urls.spotify,
     };
-  }).filter((artist) => artist.name);
+  });
 });
 
 const trackLink = computed(() => {

frontend/src/views/PlayerView.vue

@@ -14,6 +14,7 @@ const { result, loading, error } = useSubscription(graphql(/* GraphQL */ `
     }
   }
 `));
+
 const playerState = computed(() => result?.value?.playerState);
 </script>
 
@@ -25,7 +26,10 @@ const playerState = computed(() => result?.value?.playerState);
       <UpNext />
       <Context />
     </div>
-    <div class="text-center" v-else-if="error">
+    <div
+      class="text-center"
+      v-else-if="error"
+    >
       {{ error.message }}
     </div>
     <div

graph/spotifyLib.graphql

@@ -1,78 +1,75 @@
 type PlayerDevice {
-  id: String
-  is_active: Boolean
-  is_restricted: Boolean
-  name: String
-  type: String
-  volume_percent: Int
+  id: String!
+  is_active: Boolean!
+  is_restricted: Boolean!
+  name: String!
+  type: String!
+  volume_percent: Int!
 }
 
 type PlayerState {
-  timestamp: Int
+  device: PlayerDevice!
+  repeat_state: String!
+  shuffle_state: Boolean!
   context: PlaybackContext
-  progress_ms: Int
-  is_playing: Boolean
-
+  timestamp: Int!
+  progress_ms: Int!
+  is_playing: Boolean!
   item: FullTrack
-
-  device: PlayerDevice
-  shuffle_state: Boolean
-  repeat_state: String
 }
 
 type PlaybackContext {
-  type: String
-  href: String
-  uri: String
-  external_urls: StringMap
+  type: String!
+  href: String!
+  external_urls: StringMap!
+  uri: String!
 }
 
 type SimpleArtist {
-  href: String
-  id: String
-  name: String
-  uri: String
-  external_urls: StringMap
+  external_urls: StringMap!
+  href: String!
+  id: String!
+  name: String!
+  uri: String!
 }
 
 type Image {
-  url: String
-  height: Int
-  width: Int
+  url: String!
+  height: Int!
+  width: Int!
 }
 
 type SimpleAlbum {
-  album_type: String
-  href: String
-  id: String
-  name: String
-  release_date: String
-  release_date_precision: String
-  uri: String
-  artists: [SimpleArtist]
-  images: [Image]
-  external_urls: StringMap
-  available_markets: [String]
+  album_type: String!
+  available_markets: [String!]!
+  external_urls: StringMap!
+  href: String!
+  id: String!
+  images: [Image!]!
+  name: String!
+  release_date: String!
+  release_date_precision: String!
+  uri: String!
+  artists: [SimpleArtist!]!
 }
 
 type FullTrack {
-  album: SimpleAlbum
-  artists: [SimpleArtist]
-  external_ids: StringMap
-  popularity: Int
-  is_playable: Boolean
-
-  disc_number: Int
-  duration_ms: Int
-  explicit: Boolean
-  href: String
-  id: String
-  name: String
-  preview_url: String
-  track_number: Int
-  type: String
-  uri: String
-  external_urls: StringMap
+  album: SimpleAlbum!
+  artists: [SimpleArtist!]!
   available_markets: [String]
+  disc_number: Int!
+  duration_ms: Int!
+  explicit: Boolean!
+  external_ids: StringMap!
+  external_urls: StringMap!
+  href: String!
+  id: String!
+  is_playable: Boolean!
+  name: String!
+  popularity: Int!
+  preview_url: String
+  track_number: Int!
+  type: String!
+  uri: String!
 }