ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

feat(theatremode): added new action buttons

Browse Source
This commit is contained in:
Seraph91P
2024-08-10 13:28:46 +02:00
parent 467f16824c
commit ad0578d2c0
3 changed files with 51 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/ClipView.vue
View File

@ -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',
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]'
'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
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">
<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>
</div>
<action-buttons
:showDownload="true"
:showTheatreMode="true"
:showShare="true"
@toggleTheatreMode="toggleTheatreMode"
@toggleShareModal="toggleShareModal"
:downloadUrl="srcUrl"
/>
</div>
</div>
@ -157,4 +153,4 @@ export default {
<about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>
</div>
</div>
</template>
</template>