feat(video): added theatre mode

src/components/TheatreModeToggle.vue

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

src/main.ts

@@ -36,7 +36,8 @@ import {
   FaShareAlt,
   IoCloseSharp,
   MdDownloadRound,
-  IoPerson
+  IoPerson,
+  FaExpand
 } from 'oh-vue-icons/icons'
 
 addIcons(
@@ -55,7 +56,8 @@ addIcons(
   FaShareAlt,
   IoCloseSharp,
   MdDownloadRound,
-  IoPerson
+  IoPerson,
+  FaExpand
 )
 
 app.component('v-icon', OhVueIcon)

src/views/ClipView.vue

@@ -9,11 +9,11 @@ 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 type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
 
-
 export default {
   inject: ['rootBackendUrl'],
   async setup() {
@@ -51,7 +51,8 @@ export default {
       videoOptions,
       time: ref(0),
       srcUrl,
-      shareModalVisible: ref(false)
+      shareModalVisible: ref(false),
+      isTheatreMode: ref(false)
     }
   },
   async mounted() {
@@ -72,13 +73,17 @@ export default {
     LoadingScreen,
     AboutTab,
     ShareModal,
-    VueTitle
+    VueTitle,
+    TheatreModeToggle
   },
   methods: {
     truncate,
     abbreviate,
     toggleShareModal() {
       this.shareModalVisible = !this.shareModalVisible
+    },
+    toggleTheatreMode() {
+      this.isTheatreMode = !this.isTheatreMode
     }
   }
 }
@@ -95,7 +100,10 @@ export default {
   >
     <VueTitle :title=" 'Clip - ' + data.title"></VueTitle>
     <div
-      class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
+      :class="[
+        'flex bg-crust flex-col p-6 rounded-lg w-[99vw] 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]'
+      ]"
     >
       <div class="w-full mx-auto rounded-lg mb-5">
         <video-player :options="videoOptions"> </video-player>
@@ -130,12 +138,14 @@ export default {
           </div>
 
           <div class="space-x-1">
+            <button @click="toggleTheatreMode" class="px-2 py-1.5 rounded-lg bg-purple">
+              <v-icon name="fa-expand"></v-icon>
+            </button>
             <a :href="srcUrl" download>
               <button class="px-2 py-1.5 rounded-lg bg-purple">
                 <v-icon name="md-download-round"></v-icon>
               </button>
             </a>
-
             <button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
               <v-icon name="fa-share-alt"></v-icon>
             </button>

src/views/UserView.vue

@@ -102,7 +102,10 @@ export default {
   >
     <vue-title :title="data.username"></vue-title>
     <div
-      class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
+      :class="[
+        'flex bg-crust flex-col p-6 rounded-lg w-[99vw] 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]'
+      ]"
     >
       <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
         <video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions">

src/views/VodView.vue

@@ -98,11 +98,13 @@ export default {
   >
     <vue-title :title="'VOD - ' + data.title"></vue-title>
     <div
-      class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
+      :class="[
+        'flex bg-crust flex-col p-6 rounded-lg w-[99vw] 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]'
+      ]"
     >
       <div class="w-full mx-auto rounded-lg mb-5">
-        <video-player :options="videoOptions" @PlayerTimeUpdate="handlePlayerTimeUpdate">
+        <video-player :options="videoOptions"> </video-player>
-        </video-player>
       </div>
 
       <div class="w-full flex-wrap md:p-3">