feat: basic connection between frontend and backend

web/src/components/player/PlayerControls.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
+    import {
+        computed,
+        ref
+    } from 'vue';
     import ProgressBar from './ProgressBar.vue';
+    import ShareManagement from './ShareManagement.vue';
     import {
         beautifyTime
     } from '@/ts/util/time';
-    import {
-        computed
-    } from 'vue';
     import player from '@/ts/player';
 
     const playbackPercentage = player.playbackPercentage;
     const repeatMode = player.repeat;
     const shuffleMode = player.shuffle;
+    const showShareMenu = ref( false );
 
     const seek = () => {
         player.seekTo( playbackPercentage.value );
@@ -30,7 +33,7 @@
     };
 
     const openShareMenu = () => {
-        alert( 'Share menu not yet implemented' );
+        showShareMenu.value = true;
     };
 
     const current = computed( () => {
@@ -39,13 +42,11 @@
     const duration = computed( () => {
         return beautifyTime( player.duration.value );
     } );
-
-
-    // TODO: Button availability
 </script>
 
 <template>
     <div class="mp-player">
+        <ShareManagement v-model="showShareMenu" />
         <div class="controls">
             <i class="fa-solid fa-backward-step" @click="player.prev"></i>
             <i class="fa-solid fa-arrow-rotate-left quick-seek" @click="player.back10"></i>

web/src/components/player/QueueViewer.vue

@@ -63,11 +63,6 @@
                 <i class="fa-solid fa-save"></i>
                 Save
             </button>
-            <!-- TODO: Should only appear when sharing -->
-            <button>
-                <i class="fa-solid fa-paper-plane"></i>
-                Transmit
-            </button>
         </div>
         <SongEditor v-model="showEditSong" editing-song="" />
         <AddSong v-model="showAddSong" />

web/src/components/player/ShareManagement.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+    import messages, {
+        isConnected
+    } from '@/ts/messages';
+    import PopupElement from '../popups/PopupElement.vue';
+    import {
+        ref
+    } from 'vue';
+
+    const showPopup = defineModel<boolean>( {
+        'required': true
+    } );
+    const shareName = ref( '' );
+    const useAntiTamper = ref( false );
+    const errorMessage = ref( '' );
+
+    const startShare = async () => {
+        if ( !await messages.createRoom( shareName.value, useAntiTamper.value ) ) {
+            errorMessage.value = 'Invalid room name';
+        }
+    };
+
+    const stopShare = () => {
+        messages.closeRoom();
+    };
+</script>
+
+<template>
+    <div>
+        <PopupElement v-model="showPopup" show-close>
+            <h2>Share</h2>
+            <div v-if="!isConnected">
+                <p>
+                    You can use a share to show what you are currently listening to (and the progress) on a page.
+                </p>
+                <p>{{ errorMessage }}</p>
+                <input v-model="shareName" type="text">
+                <button @click="startShare">
+                    Create Share
+                </button>
+            </div>
+            <div v-else>
+                <!-- TODO: Need to explain and add controls -->
+                <!-- TODO: How to handle anti-tamper? -->
+                <p>Connected</p>
+                <button @click="stopShare">
+                    End share
+                </button>
+            </div>
+        </PopupElement>
+    </div>
+</template>

web/src/components/shared/SharedQueue.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+    import {
+        computed,
+        ref
+    } from 'vue';
+    import type {
+        Song
+    } from '@/ts/dtype/playlist';
+
+    const props = defineProps<{
+        'songs': Song[],
+        'idx': number
+    }>();
+    const songs = computed( () => props.songs?.slice( props.idx + 1 ) ?? [] );
+    // TODO: Move this out of this file
+    const showArtworks = ref( false );
+</script>
+
+<template>
+    <div class="queue-container">
+        <div v-for="(song, index) in songs" :key="index" class="song-list-element">
+            <div class="song-cover-wrapper">
+                <img
+                    v-if="song.artwork && showArtworks"
+                    :src="song.artwork"
+                    alt="Song cover"
+                    class="song-cover"
+                >
+                <i v-else class="fa-solid fa-music song-cover"></i>
+            </div>
+            <div class="song-details">
+                <h3>{{ song.name }}</h3>
+                <p>{{ song.artist }}</p>
+                <p>{{ song['additional-info'] }}</p>
+            </div>
+            <div class="song-actions">
+                <p>In {{ song.duration }}min</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    @use '@/scss/components/queue.scss';
+</style>