Update share endpoint to return playback session, add get share file endpoint

client/pages/share/_slug.vue

@@ -1,12 +1,20 @@
 <template>
   <div id="page-wrapper" class="w-full h-screen overflow-y-auto">
     <div class="w-full h-full flex items-center justify-center">
-      <p class="text-xl">{{ mediaItemShare.mediaItem.title }}</p>
+      <div>
+        <p class="text-3xl font-semibold text-center mb-6">{{ mediaItemShare.playbackSession?.displayTitle || 'N/A' }}</p>
+
+        <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-4 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-auto" :class="!hasLoaded ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+          <span class="material-icons text-5xl">{{ !hasLoaded ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import LocalAudioPlayer from '../../players/LocalAudioPlayer'
+
 export default {
   layout: 'blank',
   async asyncData({ params, error, app }) {
@@ -23,12 +31,43 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      localAudioPlayer: new LocalAudioPlayer(),
+      playerState: null,
+      hasLoaded: false
+    }
+  },
+  computed: {
+    audioTracks() {
+      return (this.mediaItemShare.playbackSession?.audioTracks || []).map((track) => {
+        if (process.env.NODE_ENV === 'development') {
+          track.contentUrl = `${process.env.serverUrl}${track.contentUrl}`
+        }
+        track.relativeContentUrl = track.contentUrl
+        return track
+      })
+    },
+    paused() {
+      return this.playerState !== 'PLAYING'
+    }
+  },
+  methods: {
+    playPause() {
+      if (!this.localAudioPlayer || this.mediaLoading) return
+      this.localAudioPlayer.playPause()
+    },
+    playerStateChange(state) {
+      console.log('Player state change', state)
+      this.playerState = state
+      if (state === 'LOADED') {
+        this.hasLoaded = true
+      }
+    }
   },
-  computed: {},
-  methods: {},
   mounted() {
     console.log('Loaded media item share', this.mediaItemShare)
+    this.localAudioPlayer.set(null, this.audioTracks, false, 0, false)
+    this.localAudioPlayer.on('stateChange', this.playerStateChange.bind(this))
   }
 }
 </script>