mirror of
https://codeberg.org/SafeTwitch/safetwitch.git
synced 2024-12-21 21:03:00 -05:00
feat(theatremode): added new action buttons
This commit is contained in:
Seraph91P
parent
467f16824c
commit
ad0578d2c0
3 changed files with 51 additions and 62 deletions
|
|
@ -1,28 +1,16 @@
|
|||
<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)
|
||||
<button @click="toggleTheatreMode" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="fa-expand"></v-icon>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
function toggleTheatreMode() {
|
||||
isTheatreMode.value = !isTheatreMode.value
|
||||
emit('toggle', isTheatreMode.value)
|
||||
}
|
||||
|
||||
return {
|
||||
isTheatreMode,
|
||||
toggleTheatreMode
|
||||
}
|
||||
<script lang="ts">
|
||||
export default {
|
||||
emits: ['toggle'],
|
||||
methods: {
|
||||
toggleTheatreMode() {
|
||||
this.$emit('toggle')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
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 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">
|
||||
<follow-button :username="data.login"></follow-button>
|
||||
<div class="flex justify-between items-center">
|
||||
<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">
|
||||
{{ abbreviate(data.followers) }} {{ $t('main.followers') }}
|
||||
</p>
|
||||
|
||||
<button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="fa-share-alt"></v-icon>
|
||||
</button>
|
||||
<button @click="toggleTheatreMode" class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="fa-expand"></v-icon>
|
||||
</button>
|
||||
<action-buttons
|
||||
:showDownload="false"
|
||||
:showTheatreMode="true"
|
||||
:showShare="true"
|
||||
@toggleTheatreMode="toggleTheatreMode"
|
||||
@toggleShareModal="toggleShareModal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue