feat(theatremode): added new action buttons

src/components/TheatreModeToggle.vue

@@ -1,28 +1,16 @@
 <template>
-    <button @click="toggleTheatreMode" class="px-2 py-1.5 rounded-lg bg-purple">
+  <button @click="toggleTheatreMode" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
-      <v-icon name="fa-expand"></v-icon>
+    <v-icon name="fa-expand"></v-icon>
-      <span>{{ isTheatreMode ? 'Exit Theatre Mode' : 'Theatre Mode' }}</span>
+  </button>
-    </button>
+</template>
-  </template>
-  
-  <script lang="ts">
-  import { ref } from 'vue'
-  
-  export default {
-    emits: ['toggle'],
-    setup(props, { emit }) {
-        const isTheatreMode = ref(false)
 
-        function toggleTheatreMode() {
+<script lang="ts">
-            isTheatreMode.value = !isTheatreMode.value
+export default {
-            emit('toggle', isTheatreMode.value)
+  emits: ['toggle'],
-        }
+  methods: {
-
+    toggleTheatreMode() {
-        return {
+      this.$emit('toggle')
-            isTheatreMode,
-            toggleTheatreMode
-        }
     }
   }
-  </script>
+}
-  
+</script>

src/views/ClipView.vue

@@ -9,7 +9,7 @@ import LoadingScreen from '@/components/LoadingScreen.vue'
 import AboutTab from '@/components/user/AboutTab.vue'
 import ShareModal from '@/components/popups/ShareButtonModal.vue'
 import VueTitle from '@/components/VueTitle.vue'
-import TheatreModeToggle from '@/components/TheatreModeToggle.vue'
+import ActionButtons from '@/components/ActionButtons.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -21,6 +21,7 @@ export default {
     const clipSlug = route.params.slug
     const data = ref<Video>()
     const status = ref<'ok' | 'error'>()
+    const isTheatreMode = ref(false)
 
     let srcUrl
     await getEndpoint(`api/clips/cliplink/${clipSlug}`)
@@ -31,8 +32,6 @@ export default {
         status.value = 'error'
       })
 
-    console.log(srcUrl)
-
     const videoOptions = {
       autoplay: true,
       controls: true,
@@ -52,7 +51,7 @@ export default {
       time: ref(0),
       srcUrl,
       shareModalVisible: ref(false),
-      isTheatreMode: ref(false)
+      isTheatreMode
     }
   },
   async mounted() {
@@ -74,7 +73,7 @@ export default {
     AboutTab,
     ShareModal,
     VueTitle,
-    TheatreModeToggle
+    ActionButtons
   },
   methods: {
     truncate,
@@ -101,8 +100,10 @@ export default {
     <VueTitle :title=" 'Clip - ' + data.title"></VueTitle>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-[99vw] text-contrast',
+        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
-        isTheatreMode ? 'md:max-w-[95rem] lg:max-w-[100rem] xl:max-w-[120rem] 2x:max-w-[140rem]'  : 'md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] xl:max-w-[80rem] 2x:max-w-[90rem]'
+        isTheatreMode 
+          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
+          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
       ]"
     >
       <div class="w-full mx-auto rounded-lg mb-5">
@@ -137,19 +138,14 @@ export default {
             </p>
           </div>
 
-          <div class="space-x-1">
+          <action-buttons
-            <button @click="toggleTheatreMode" class="px-2 py-1.5 rounded-lg bg-purple">
+            :showDownload="true"
-              <v-icon name="fa-expand"></v-icon>
+            :showTheatreMode="true"
-            </button>
+            :showShare="true"
-            <a :href="srcUrl" download>
+            @toggleTheatreMode="toggleTheatreMode"
-              <button class="px-2 py-1.5 rounded-lg bg-purple">
+            @toggleShareModal="toggleShareModal"
-                <v-icon name="md-download-round"></v-icon>
+            :downloadUrl="srcUrl"
-              </button>
+          />
-            </a>
-            <button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
-              <v-icon name="fa-share-alt"></v-icon>
-            </button>
-          </div>
         </div>
       </div>
 
@@ -157,4 +153,4 @@ export default {
       <about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>
     </div>
   </div>
-</template>
+</template>

src/views/UserView.vue

@@ -12,7 +12,7 @@ import AudioPlayer from '@/components/AudioPlayer.vue'
 import AboutTab from '@/components/user/AboutTab.vue'
 import ShareModal from '@/components/popups/ShareButtonModal.vue'
 import VueTitle from '@/components/VueTitle.vue'
-import TheatreModeToggle from '@/components/TheatreModeToggle.vue'
+import ActionButtons from '@/components/ActionButtons.vue'
 
 import type { StreamerData } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -26,6 +26,7 @@ export default {
     const data = ref<StreamerData>()
     const status = ref<'ok' | 'error'>()
     const rootBackendUrl = inject('rootBackendUrl')
+    const isTheatreMode = ref(false)
     const videoOptions = {
       autoplay: getSetting('autoplay'),
       controls: true,
@@ -45,7 +46,7 @@ export default {
       videoOptions,
       audioOptions,
       shareModalVisible: ref(false),
-      isTheatreMode: ref(false)
+      isTheatreMode
     }
   },
   async mounted() {
@@ -76,7 +77,7 @@ export default {
     AboutTab,
     ShareModal,
     VueTitle,
-    TheatreModeToggle
+    ActionButtons
   },
   methods: {
     truncate,
@@ -109,8 +110,10 @@ export default {
     <vue-title :title="data.username"></vue-title>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-[99vw] text-contrast',
+        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
-        isTheatreMode ? 'md:max-w-[95rem] lg:max-w-[100rem] xl:max-w-[120rem] 2x:max-w-[140rem]'  : 'md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] xl:max-w-[80rem] 2x:max-w-[90rem]'
+        isTheatreMode 
+          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
+          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
       ]"
     >
       <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
@@ -184,19 +187,21 @@ export default {
           </div>
         </div>
 
-        <div class="pt-2 space-x-2 items-center inline-flex">
+        <div class="flex justify-between items-center">
-          <follow-button :username="data.login"></follow-button>
+          <div class="pt-2 inline-flex">
+            <follow-button :username="data.login"></follow-button>
+            <p class="align-baseline font-bold ml-3">
+              {{ abbreviate(data.followers) }} {{ $t('main.followers') }}
+            </p>
+          </div>
 
-          <p class="align-baseline font-bold ml-3">
+          <action-buttons
-            {{ abbreviate(data.followers) }} {{ $t('main.followers') }}
+            :showDownload="false"
-          </p>
+            :showTheatreMode="true"
-
+            :showShare="true"
-          <button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
+            @toggleTheatreMode="toggleTheatreMode"
-            <v-icon name="fa-share-alt"></v-icon>
+            @toggleShareModal="toggleShareModal"
-          </button>
+          />
-          <button @click="toggleTheatreMode" class="px-2 py-1.5 rounded-lg bg-purple">
-              <v-icon name="fa-expand"></v-icon>
-          </button>
         </div>
       </div>