From 2681bfe10f74a7d807707efa1d88b2f9d5011d35 Mon Sep 17 00:00:00 2001 From: Seraph91P Date: Tue, 6 Aug 2024 19:16:46 +0200 Subject: [PATCH 1/7] feat(video): added theatre mode --- src/components/TheatreModeToggle.vue | 28 ++++++++++++++++++++++++++++ src/main.ts | 6 ++++-- src/views/ClipView.vue | 20 +++++++++++++++----- src/views/UserView.vue | 5 ++++- src/views/VodView.vue | 8 +++++--- 5 files changed, 56 insertions(+), 11 deletions(-) create mode 100644 src/components/TheatreModeToggle.vue diff --git a/src/components/TheatreModeToggle.vue b/src/components/TheatreModeToggle.vue new file mode 100644 index 0000000..a8824ef --- /dev/null +++ b/src/components/TheatreModeToggle.vue @@ -0,0 +1,28 @@ + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index fed9702..4998057 100644 --- a/src/main.ts +++ b/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) diff --git a/src/views/ClipView.vue b/src/views/ClipView.vue index cca72cd..69d3d3c 100644 --- a/src/views/ClipView.vue +++ b/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 { >
@@ -130,12 +138,14 @@ export default {
+ - diff --git a/src/views/UserView.vue b/src/views/UserView.vue index 8293dc4..ca04db4 100644 --- a/src/views/UserView.vue +++ b/src/views/UserView.vue @@ -102,7 +102,10 @@ export default { >
diff --git a/src/views/VodView.vue b/src/views/VodView.vue index 9c0c835..eb1ef20 100644 --- a/src/views/VodView.vue +++ b/src/views/VodView.vue @@ -98,11 +98,13 @@ export default { >
- - +
From ca7b639a45e933410a12519b3a595bf5826e7034 Mon Sep 17 00:00:00 2001 From: Seraph91P Date: Tue, 6 Aug 2024 19:57:04 +0200 Subject: [PATCH 2/7] feat(video): added button to actuall call theatre mode --- src/views/UserView.vue | 13 +++++++++++-- src/views/VodView.vue | 13 +++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/views/UserView.vue b/src/views/UserView.vue index ca04db4..d9ff04c 100644 --- a/src/views/UserView.vue +++ b/src/views/UserView.vue @@ -12,6 +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 type { StreamerData } from '@/types' import { truncate, abbreviate, getEndpoint } from '@/mixins' @@ -43,7 +44,8 @@ export default { status, videoOptions, audioOptions, - shareModalVisible: ref(false) + shareModalVisible: ref(false), + isTheatreMode: ref(false) } }, async mounted() { @@ -73,7 +75,8 @@ export default { AudioPlayer, AboutTab, ShareModal, - VueTitle + VueTitle, + TheatreModeToggle }, methods: { truncate, @@ -81,6 +84,9 @@ export default { getSetting, toggleShareModal() { this.shareModalVisible = !this.shareModalVisible + }, + toggleTheatreMode() { + this.isTheatreMode = !this.isTheatreMode } } } @@ -188,6 +194,9 @@ export default { +
diff --git a/src/views/VodView.vue b/src/views/VodView.vue index eb1ef20..81d1e6e 100644 --- a/src/views/VodView.vue +++ b/src/views/VodView.vue @@ -9,6 +9,7 @@ import FollowButton from '@/components/FollowButton.vue' import LoadingScreen from '@/components/LoadingScreen.vue' import AboutTab from '@/components/user/AboutTab.vue' import ShareModal from '@/components/popups/ShareButtonModal.vue' +import TheatreModeToggle from '@/components/TheatreModeToggle.vue' import type { Video } from '@/types' import { truncate, abbreviate, getEndpoint } from '@/mixins' @@ -41,7 +42,8 @@ export default { status: ref<'ok' | 'error'>(), videoOptions, time: ref(0), - shareModalVisible: ref(false) + shareModalVisible: ref(false), + isTheatreMode: ref(false) } }, async mounted() { @@ -63,7 +65,8 @@ export default { LoadingScreen, AboutTab, ShareModal, - VueTitle + VueTitle, + TheatreModeToggle }, methods: { truncate, @@ -77,6 +80,9 @@ export default { getSetting, toggleShareModal() { this.shareModalVisible = !this.shareModalVisible + }, + toggleTheatreMode() { + this.isTheatreMode = !this.isTheatreMode } } } @@ -138,6 +144,9 @@ export default { +
From 43739a3537732c833944b819c27a32838178eb98 Mon Sep 17 00:00:00 2001 From: Seraph91P Date: Sat, 10 Aug 2024 13:27:08 +0200 Subject: [PATCH 3/7] feat(action-buttons): added new component for all action buttons --- src/components/ActionButtons.vue | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/ActionButtons.vue diff --git a/src/components/ActionButtons.vue b/src/components/ActionButtons.vue new file mode 100644 index 0000000..ee353b2 --- /dev/null +++ b/src/components/ActionButtons.vue @@ -0,0 +1,28 @@ + + + + \ No newline at end of file From 467f16824c535081ea45f5f5145a21ca73e904ae Mon Sep 17 00:00:00 2001 From: Seraph91P Date: Sat, 10 Aug 2024 13:28:13 +0200 Subject: [PATCH 4/7] feat(vod): added handlePlayerTimeUpdate back --- src/views/VodView.vue | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/views/VodView.vue b/src/views/VodView.vue index 81d1e6e..62bbaa5 100644 --- a/src/views/VodView.vue +++ b/src/views/VodView.vue @@ -9,12 +9,12 @@ import FollowButton from '@/components/FollowButton.vue' import LoadingScreen from '@/components/LoadingScreen.vue' import AboutTab from '@/components/user/AboutTab.vue' import ShareModal from '@/components/popups/ShareButtonModal.vue' -import TheatreModeToggle from '@/components/TheatreModeToggle.vue' +import VueTitle from '@/components/VueTitle.vue' +import ActionButtons from '@/components/ActionButtons.vue' import type { Video } from '@/types' import { truncate, abbreviate, getEndpoint } from '@/mixins' import { getSetting } from '@/settingsManager' -import VueTitle from '@/components/VueTitle.vue' interface ChatComponent { updateVodComments: (time: number) => void @@ -66,7 +66,7 @@ export default { AboutTab, ShareModal, VueTitle, - TheatreModeToggle + ActionButtons }, methods: { truncate, @@ -105,12 +105,15 @@ export default {
- + +
@@ -141,12 +144,13 @@ export default {

- - +
From ad0578d2c0f3f543f13ba2bdb8fe227054e28ec5 Mon Sep 17 00:00:00 2001 From: Seraph91P Date: Sat, 10 Aug 2024 13:28:46 +0200 Subject: [PATCH 5/7] feat(theatremode): added new action buttons --- src/components/TheatreModeToggle.vue | 36 +++++++++---------------- src/views/ClipView.vue | 38 ++++++++++++--------------- src/views/UserView.vue | 39 ++++++++++++++++------------ 3 files changed, 51 insertions(+), 62 deletions(-) diff --git a/src/components/TheatreModeToggle.vue b/src/components/TheatreModeToggle.vue index a8824ef..2ce869c 100644 --- a/src/components/TheatreModeToggle.vue +++ b/src/components/TheatreModeToggle.vue @@ -1,28 +1,16 @@ - - - \ No newline at end of file +} + diff --git a/src/views/ClipView.vue b/src/views/ClipView.vue index 69d3d3c..7f9a64c 100644 --- a/src/views/ClipView.vue +++ b/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
@@ -157,4 +153,4 @@ export default { - + \ No newline at end of file diff --git a/src/views/UserView.vue b/src/views/UserView.vue index d9ff04c..a03ed0a 100644 --- a/src/views/UserView.vue +++ b/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() 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 {
@@ -184,19 +187,21 @@ export default {
-
- +
+
+ +

+ {{ abbreviate(data.followers) }} {{ $t('main.followers') }} +

+
-

- {{ abbreviate(data.followers) }} {{ $t('main.followers') }} -

- - - +
From 4985f3084e00ba03ca0a01cf77ea9ec2b4d1f266 Mon Sep 17 00:00:00 2001 From: Seraph91P Date: Tue, 13 Aug 2024 11:29:36 +0200 Subject: [PATCH 6/7] feat(user): changed tags to be more responisve and made room for the action buttons --- src/views/UserView.vue | 98 +++++++++++++++++++----------------------- 1 file changed, 44 insertions(+), 54 deletions(-) diff --git a/src/views/UserView.vue b/src/views/UserView.vue index a03ed0a..2df393b 100644 --- a/src/views/UserView.vue +++ b/src/views/UserView.vue @@ -130,71 +130,60 @@ export default { />
-
-
- - - {{ $t('main.live') }} -
- -
-
-

{{ data.username }}

- - - - - - +
+
+
+
+ + {{ $t('main.live') }} +
+
+
+

{{ data.username }}

+ + + + + + +
+
+

+ {{ truncate(data.stream.title, 130) }} +

+
+
-
-

- {{ truncate(data.stream.title, 130) }} +

+
+
+

+ OFFLINE

+
+
    +
  • + {{ tag }} +
    • +
+
- -
-
-

- OFFLINE -

-
-
-
    -
  • - {{ tag }} -
    • -
-
-
- -
+

{{ abbreviate(data.followers) }} {{ $t('main.followers') }}

-
+ From 7b7b51a9f54a2bae33aadef8a7211fea92f6ac77 Mon Sep 17 00:00:00 2001 From: Seraph91P Date: Wed, 14 Aug 2024 09:29:59 +0200 Subject: [PATCH 7/7] (theatre mode): moved styling to css file --- src/assets/index.css | 12 ++++++++++++ src/components/ActionButtons.vue | 2 +- src/components/TheatreModeToggle.vue | 16 ---------------- src/views/ClipView.vue | 6 ++---- src/views/UserView.vue | 6 ++---- src/views/VodView.vue | 6 ++---- 6 files changed, 19 insertions(+), 29 deletions(-) delete mode 100644 src/components/TheatreModeToggle.vue diff --git a/src/assets/index.css b/src/assets/index.css index b5c61c9..00b5c41 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1,3 +1,15 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.content-container { + @apply flex bg-crust flex-col p-6 rounded-lg w-full text-contrast; + } + + .content-container-theatre { + @apply md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]; + } + + .content-container-normal { + @apply md:w-[70vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]; + } \ No newline at end of file diff --git a/src/components/ActionButtons.vue b/src/components/ActionButtons.vue index ee353b2..5f823bf 100644 --- a/src/components/ActionButtons.vue +++ b/src/components/ActionButtons.vue @@ -5,7 +5,7 @@ -