From 4dd94d4af10172644da59a74d7b828c2105c585a Mon Sep 17 00:00:00 2001 From: dragongoose Date: Sat, 4 Nov 2023 19:52:55 -0400 Subject: [PATCH] Format --- src/App.vue | 4 +- src/assets/qualitySelector.ts | 10 +- src/components/AudioPlayer.vue | 101 +++--- src/components/CategoryPreview.vue | 7 +- src/components/FollowButton.vue | 2 +- src/components/FooterView.vue | 4 +- src/components/NavbarView.vue | 18 +- src/components/StreamPreview.vue | 12 +- src/components/VideoPlayer.vue | 2 +- src/components/popups/ShareButtonModal.vue | 213 +++++++------ src/components/user/AboutTab.vue | 83 ++--- src/i18n.ts | 3 +- src/mixins.ts | 4 +- src/settingsManager.ts | 339 +++++++++++---------- src/views/CategoryView.vue | 14 +- src/views/ClipView.vue | 35 ++- src/views/HomepageView.vue | 6 +- src/views/SettingsView.vue | 61 ++-- src/views/UserView.vue | 19 +- src/views/VodView.vue | 15 +- 20 files changed, 509 insertions(+), 443 deletions(-) diff --git a/src/App.vue b/src/App.vue index 662f1f6..c8266e7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,9 +15,9 @@ const dev = import.meta.env.DEV - + - + diff --git a/src/assets/qualitySelector.ts b/src/assets/qualitySelector.ts index 14a6152..6d4c8e9 100644 --- a/src/assets/qualitySelector.ts +++ b/src/assets/qualitySelector.ts @@ -72,12 +72,12 @@ export const createQualitySelector = (player: any) => { qualityLevels.on('addqualitylevel', () => { formatedQualities = qualityLevels.levels_.map((quality: QualityLevel) => { - let qualityFramerate = "" + let qualityFramerate = '' if (quality.frameRate > 30) { qualityFramerate = quality.frameRate } - + return { name: quality.height?.toString() + 'p' + qualityFramerate, index: quality.id[0], @@ -86,9 +86,9 @@ export const createQualitySelector = (player: any) => { }) // remove audio only - const audioOnlyQuality = formatedQualities[formatedQualities.length-1] - if (audioOnlyQuality.name === "undefinedp") { - formatedQualities.splice(formatedQualities.length-1, 1) + const audioOnlyQuality = formatedQualities[formatedQualities.length - 1] + if (audioOnlyQuality.name === 'undefinedp') { + formatedQualities.splice(formatedQualities.length - 1, 1) } formattedLevels.push(formatedQualities) diff --git a/src/components/AudioPlayer.vue b/src/components/AudioPlayer.vue index f31a8d2..1ed443f 100644 --- a/src/components/AudioPlayer.vue +++ b/src/components/AudioPlayer.vue @@ -1,7 +1,7 @@ - \ No newline at end of file diff --git a/src/components/CategoryPreview.vue b/src/components/CategoryPreview.vue index bf2f1b9..ce3b398 100644 --- a/src/components/CategoryPreview.vue +++ b/src/components/CategoryPreview.vue @@ -39,10 +39,9 @@ export default { diff --git a/src/components/FollowButton.vue b/src/components/FollowButton.vue index 31f70ed..3aa5347 100644 --- a/src/components/FollowButton.vue +++ b/src/components/FollowButton.vue @@ -18,7 +18,7 @@ export default { methods: { followStreamer() { const username = this.$props.username - const follows = localStorage.getItem('following') || "[]" + const follows = localStorage.getItem('following') || '[]' let parsedFollows: string[] = JSON.parse(follows) diff --git a/src/components/FooterView.vue b/src/components/FooterView.vue index 96984f1..f5c0499 100644 --- a/src/components/FooterView.vue +++ b/src/components/FooterView.vue @@ -4,12 +4,12 @@ export default { return { version: `${import.meta.env.SAFETWITCH_TAG}-${import.meta.env.SAFETWITCH_COMMIT_HASH}` } - }, + } } diff --git a/src/components/NavbarView.vue b/src/components/NavbarView.vue index 0a84e7f..fbba82c 100644 --- a/src/components/NavbarView.vue +++ b/src/components/NavbarView.vue @@ -17,7 +17,7 @@ export default { }, mounted() { const savedLocale = localStorage.getItem('language') - if(savedLocale) { + if (savedLocale) { this.$i18n.locale = savedLocale } } @@ -33,18 +33,12 @@ export default { - +
@@ -63,7 +57,7 @@ export default { {{ $t('nav.code') }} Twitch {{ $t('nav.privacy') }} - {{ $t("nav.settings") }} + {{ $t('nav.settings') }}
diff --git a/src/components/StreamPreview.vue b/src/components/StreamPreview.vue index ee22ef7..a300a19 100644 --- a/src/components/StreamPreview.vue +++ b/src/components/StreamPreview.vue @@ -24,9 +24,9 @@ export default { login: streamData.streamer.name, followers: 0, isLive: true, - about: "", + about: '', pfp: streamData.streamer.pfp, - banner: "", + banner: '', isPartner: false, colorHex: streamData.streamer.colorHex, id: 0, @@ -34,13 +34,13 @@ export default { title: streamData.title, tags: streamData.tags, startedAt: 0, - topic: "", + topic: '', viewers: streamData.viewers, preview: streamData.preview } } } else { - data = await getEndpoint("api/users/" + props.name) + data = await getEndpoint('api/users/' + props.name) } const frontend_url = protocol + import.meta.env.SAFETWITCH_INSTANCE_DOMAIN @@ -68,7 +68,9 @@ export default {
-

{{ data.stream.title }}

+

+ {{ data.stream.title }} +

{{ data.username }}

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue index 6609b06..60a9100 100644 --- a/src/components/VideoPlayer.vue +++ b/src/components/VideoPlayer.vue @@ -37,7 +37,7 @@ export default { createQualitySelector(this.player) if (this.$route.query['t']) { - const timeQuery = this.$route.query['t'].toString() || "" + const timeQuery = this.$route.query['t'].toString() || '' const time = getTimeFromQuery(timeQuery) this.player.currentTime(time) } diff --git a/src/components/popups/ShareButtonModal.vue b/src/components/popups/ShareButtonModal.vue index d2c09a0..51938c5 100644 --- a/src/components/popups/ShareButtonModal.vue +++ b/src/components/popups/ShareButtonModal.vue @@ -1,108 +1,129 @@ \ No newline at end of file +

+ diff --git a/src/components/user/AboutTab.vue b/src/components/user/AboutTab.vue index 79e868a..0363fc6 100644 --- a/src/components/user/AboutTab.vue +++ b/src/components/user/AboutTab.vue @@ -1,51 +1,54 @@ \ No newline at end of file + +

{{ about || $t('streamer.noAbout') }}

+ +
+ + + +

{{ $t('streamer.noSocials') }}

+
+ diff --git a/src/i18n.ts b/src/i18n.ts index 150a22d..9ae829f 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -14,7 +14,6 @@ import fr from '@/locales/fr.json' import uk from '@/locales/uk.json' import de from '@/locales/de.json' - export default createI18n({ legacy: false, locale: import.meta.env.VUE_APP_I18N_LOCALE || 'en-US', @@ -34,6 +33,6 @@ export default createI18n({ 'it-IT': it, 'fr-FR': fr, 'uk-UA': uk, - 'de-DE': de, + 'de-DE': de } }) diff --git a/src/mixins.ts b/src/mixins.ts index 6638e5a..5ef1471 100644 --- a/src/mixins.ts +++ b/src/mixins.ts @@ -3,7 +3,6 @@ const https = import.meta.env.SAFETWITCH_HTTPS.slice() === 'true' const protocol = https ? 'https://' : 'http://' const rootBackendUrl = `${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/` - export function truncate(value: string, length: number) { if (value.length > length) { return value.substring(0, length) + '...' @@ -53,7 +52,7 @@ export async function getEndpoint(endpoint: string) { */ export function getTimeFromQuery(query: string) { // H, M, S - const x = query.split(/[^0-9.]/g); + const x = query.split(/[^0-9.]/g) const times = x.map(Number) let time = 0 @@ -62,4 +61,3 @@ export function getTimeFromQuery(query: string) { time += times[2] return time } - diff --git a/src/settingsManager.ts b/src/settingsManager.ts index 2205b5f..ebb879e 100644 --- a/src/settingsManager.ts +++ b/src/settingsManager.ts @@ -1,30 +1,60 @@ -const locales = ['en-US', 'es-ES', 'nl-NL', 'pt-PT', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR', 'cs-CZ', 'pl-PL', 'it-IT', 'fr-FR', 'uk-UA', 'de-DE'] -const languages = ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어', 'Česky', 'Polski', 'Italia', 'Français', 'Українська', 'Deutsch'] +const locales = [ + 'en-US', + 'es-ES', + 'nl-NL', + 'pt-PT', + 'fa-IR', + 'he-IL', + 'ru-RU', + 'ko-KR', + 'cs-CZ', + 'pl-PL', + 'it-IT', + 'fr-FR', + 'uk-UA', + 'de-DE' +] +const languages = [ + 'English', + 'Español', + 'Nederlands', + 'Português', + 'فارسی', + 'עִבְרִית', + 'Русский', + '한국어', + 'Česky', + 'Polski', + 'Italia', + 'Français', + 'Українська', + 'Deutsch' +] export interface SettingsCheckbox { - name: string - selected: boolean, - type: 'checkbox' + name: string + selected: boolean + type: 'checkbox' } export interface SettingsOptions { - name: string - options: string[] - selected: string - type: 'option' + name: string + options: string[] + selected: string + type: 'option' } export interface Settings { - version: string - settings: { - audioOnly: SettingsCheckbox - defaultQuality: SettingsOptions - language: SettingsOptions - chatVisible: SettingsCheckbox - streamTagsVisible: SettingsCheckbox - streamerAboutSectionVisible: SettingsCheckbox - autoplay: SettingsCheckbox - } + version: string + settings: { + audioOnly: SettingsCheckbox + defaultQuality: SettingsOptions + language: SettingsOptions + chatVisible: SettingsCheckbox + streamTagsVisible: SettingsCheckbox + streamerAboutSectionVisible: SettingsCheckbox + autoplay: SettingsCheckbox + } } /** @@ -33,10 +63,10 @@ export interface Settings { * @param i18n the i18n class in use */ export const setLanguage = (selectedLanguage: string, i18n: any) => { - // Locales and languages in arrays to match them - const locale = locales[languages.indexOf(selectedLanguage)] - localStorage.setItem("language", locale) - i18n.locale = locale + // Locales and languages in arrays to match them + const locale = locales[languages.indexOf(selectedLanguage)] + localStorage.setItem('language', locale) + i18n.locale = locale } /** @@ -44,48 +74,48 @@ export const setLanguage = (selectedLanguage: string, i18n: any) => { * @returns Settings */ export function getDefaultSettings(): Settings { - return { - version: import.meta.env.SAFETWITCH_TAG, - settings: { - audioOnly: { - name: 'audioOnly', - selected: false, - type: 'checkbox' - }, - defaultQuality: { - name: 'defaultQuality', - options: ['160p', '360p', '480p', '720p', '1080p'], - selected: '480p', - type: 'option' - }, - language: { - name: 'language', - options: languages, - selected: 'English', - type: 'option' - }, - chatVisible: { - name: 'chatVisible', - selected: false, - type: 'checkbox' - }, - streamTagsVisible: { - name: 'streamTagsVisible', - selected: true, - type: 'checkbox' - }, - streamerAboutSectionVisible: { - name: 'streamerAboutSectionVisible', - selected: true, - type: 'checkbox' - }, - autoplay: { - name: 'autoplay', - selected: false, - type: 'checkbox' - } - } + return { + version: import.meta.env.SAFETWITCH_TAG, + settings: { + audioOnly: { + name: 'audioOnly', + selected: false, + type: 'checkbox' + }, + defaultQuality: { + name: 'defaultQuality', + options: ['160p', '360p', '480p', '720p', '1080p'], + selected: '480p', + type: 'option' + }, + language: { + name: 'language', + options: languages, + selected: 'English', + type: 'option' + }, + chatVisible: { + name: 'chatVisible', + selected: false, + type: 'checkbox' + }, + streamTagsVisible: { + name: 'streamTagsVisible', + selected: true, + type: 'checkbox' + }, + streamerAboutSectionVisible: { + name: 'streamerAboutSectionVisible', + selected: true, + type: 'checkbox' + }, + autoplay: { + name: 'autoplay', + selected: false, + type: 'checkbox' + } } + } } /** @@ -93,50 +123,51 @@ export function getDefaultSettings(): Settings { * @param settings Settings of the Settings type * @returns The synced settings and a boolean stating if the settings were modified */ -export function syncUserSettings(settings: Settings): {settings: Settings, changed: boolean}{ - const defaultSettings = getDefaultSettings() - let userSettings = settings +export function syncUserSettings(settings: Settings): { settings: Settings; changed: boolean } { + const defaultSettings = getDefaultSettings() + let userSettings = settings - // converting settings storage from versions older - // than 2.4.1 - let oldMigration = false + // converting settings storage from versions older + // than 2.4.1 + let oldMigration = false - - if (userSettings.version === import.meta.env.SAFETWITCH_TAG) { - console.log('Settings up to date!') - return { settings: userSettings, changed: false } - } else { - console.log('Settings outdated... Migrating') - // converts v2.4.1 to 241 - const settingsVersion = Number(userSettings.version.slice(1, defaultSettings.version.length).split(".").join("")) + if (userSettings.version === import.meta.env.SAFETWITCH_TAG) { + console.log('Settings up to date!') + return { settings: userSettings, changed: false } + } else { + console.log('Settings outdated... Migrating') + // converts v2.4.1 to 241 + const settingsVersion = Number( + userSettings.version.slice(1, defaultSettings.version.length).split('.').join('') + ) - if (settingsVersion < 241) { - oldMigration = true - } + if (settingsVersion < 241) { + oldMigration = true + } + } + + if (oldMigration) { + const oldSettings: any = userSettings + delete oldSettings.version + const migrated: Settings = { + version: defaultSettings.version, + settings: { + ...oldSettings + } } - if (oldMigration) { - const oldSettings: any = userSettings - delete oldSettings.version - const migrated: Settings = { - version: defaultSettings.version, - settings: { - ...oldSettings - } - } + userSettings = migrated + } + console.log(userSettings) - userSettings = migrated - } - console.log(userSettings) + const synced = { ...defaultSettings, ...userSettings } - const synced = { ...defaultSettings, ...userSettings } - - // update avaliable languages - synced.settings.language.options = defaultSettings.settings.language.options - synced.version = import.meta.env.SAFETWITCH_TAG - localStorage.setItem('settings', JSON.stringify(synced)) - console.log('Migrated!') - return { settings: synced, changed: true } + // update avaliable languages + synced.settings.language.options = defaultSettings.settings.language.options + synced.version = import.meta.env.SAFETWITCH_TAG + localStorage.setItem('settings', JSON.stringify(synced)) + console.log('Migrated!') + return { settings: synced, changed: true } } /** @@ -147,15 +178,15 @@ export function syncUserSettings(settings: Settings): {settings: Settings, chang * getSetting("audioOnly") // false */ export function getSetting(key: string): boolean | string { - const storage = localStorage.getItem('settings') - let parsed - if (!storage) { - parsed = getDefaultSettings() - } else { - parsed = JSON.parse(storage) - } + const storage = localStorage.getItem('settings') + let parsed + if (!storage) { + parsed = getDefaultSettings() + } else { + parsed = JSON.parse(storage) + } - return parsed[key].selected + return parsed[key].selected } /** @@ -164,53 +195,53 @@ export function getSetting(key: string): boolean | string { * @default string light */ export function getTheme() { - return localStorage.getItem('theme') || "light" + return localStorage.getItem('theme') || 'light' } // every avaliable theme export const themeList = [ - { - // name your theme anything that could be a valid css class name - // remember what you named your theme because you will use it as a class to enable the theme - name: 'dark', - // put any overrides your theme has here - // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme - extend: { - colors: { - "primary": '#141515', - "secondary": '#1e1f1f', - "overlay0": '#282a2a', - "overlay1": '#323434', - "surface0": '#393B3B', - "surface1": '#3F4242', - "crust": '#0C0C0C', - "purple": '#D946EF', - "red": "#980C0C", - "neutral": "#bdbdbd", - "contrast": "white", - } - } - }, - { - // name your theme anything that could be a valid css class name - // remember what you named your theme because you will use it as a class to enable the theme - name: 'light', - // put any overrides your theme has here - // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme - extend: { - colors: { - "primary": '#ebeaea', - "secondary": '#e1e0e0', - "overlay0": '#d7d5d5', - "overlay1": '#cdcbcb', - "surface0": '#c6c4c4', - "surface1": '#c0bdbd', - "crust": '#fafafa', - "purple": '#D946EF', - "red": "#e81304", - "neutral": "gray", - "contrast": "black", - } - } + { + // name your theme anything that could be a valid css class name + // remember what you named your theme because you will use it as a class to enable the theme + name: 'dark', + // put any overrides your theme has here + // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme + extend: { + colors: { + primary: '#141515', + secondary: '#1e1f1f', + overlay0: '#282a2a', + overlay1: '#323434', + surface0: '#393B3B', + surface1: '#3F4242', + crust: '#0C0C0C', + purple: '#D946EF', + red: '#980C0C', + neutral: '#bdbdbd', + contrast: 'white' + } } -] \ No newline at end of file + }, + { + // name your theme anything that could be a valid css class name + // remember what you named your theme because you will use it as a class to enable the theme + name: 'light', + // put any overrides your theme has here + // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme + extend: { + colors: { + primary: '#ebeaea', + secondary: '#e1e0e0', + overlay0: '#d7d5d5', + overlay1: '#cdcbcb', + surface0: '#c6c4c4', + surface1: '#c0bdbd', + crust: '#fafafa', + purple: '#D946EF', + red: '#e81304', + neutral: 'gray', + contrast: 'black' + } + } + } +] diff --git a/src/views/CategoryView.vue b/src/views/CategoryView.vue index ed88efc..7196385 100644 --- a/src/views/CategoryView.vue +++ b/src/views/CategoryView.vue @@ -98,10 +98,9 @@ export default {
@@ -125,10 +124,9 @@ export default { diff --git a/src/views/ClipView.vue b/src/views/ClipView.vue index 736b56f..a954c91 100644 --- a/src/views/ClipView.vue +++ b/src/views/ClipView.vue @@ -30,7 +30,7 @@ export default { status.value = 'error' }) - console.log(srcUrl) + console.log(srcUrl) const videoOptions = { autoplay: true, @@ -96,8 +96,7 @@ export default { 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" >
- - +
@@ -122,28 +121,28 @@ export default {
- -

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

-
+ +

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

+
-
- - - + + - -
+ +
- + diff --git a/src/views/HomepageView.vue b/src/views/HomepageView.vue index 8271270..38b7ff0 100644 --- a/src/views/HomepageView.vue +++ b/src/views/HomepageView.vue @@ -102,11 +102,7 @@ export default {

Following

Streamers you follow

diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue index f66ae83..28c64a7 100644 --- a/src/views/SettingsView.vue +++ b/src/views/SettingsView.vue @@ -18,7 +18,7 @@ export default { settings = syncResp.settings } - let selectedTheme = localStorage.getItem('theme') || "light" + let selectedTheme = localStorage.getItem('theme') || 'light' return { settings, @@ -35,7 +35,7 @@ export default { this.setTheme() // Reload needed - location.href = "/" + location.href = '/' }, setTheme() { localStorage.setItem('theme', this.selectedTheme) @@ -44,15 +44,15 @@ export default { if (this.selectedTheme == theme) { return 'border-purple' } - return "border-none" + return 'border-none' }, download() { - var hiddenElement = document.createElement('a'); + var hiddenElement = document.createElement('a') - hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings)); - hiddenElement.target = '_blank'; - hiddenElement.download = 'safetwitch_prefs.json'; - hiddenElement.click(); + hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings)) + hiddenElement.target = '_blank' + hiddenElement.download = 'safetwitch_prefs.json' + hiddenElement.click() }, async handleImport(event: any) { const file = await event.target.files[0].text() @@ -68,14 +68,14 @@ export default { this.settings = settings this.save() - }, + } } } diff --git a/src/views/UserView.vue b/src/views/UserView.vue index 907800f..5fe4042 100644 --- a/src/views/UserView.vue +++ b/src/views/UserView.vue @@ -12,7 +12,6 @@ import AudioPlayer from '@/components/AudioPlayer.vue' import AboutTab from '@/components/user/AboutTab.vue' import ShareModal from '@/components/popups/ShareButtonModal.vue' - import type { StreamerData } from '@/types' import { truncate, abbreviate, getEndpoint } from '@/mixins' import { chatVisible, getSetting } from '@/settingsManager' @@ -26,7 +25,7 @@ export default { const status = ref<'ok' | 'error'>() const rootBackendUrl = inject('rootBackendUrl') const videoOptions = { - autoplay: getSetting("autoplay"), + autoplay: getSetting('autoplay'), controls: true, sources: [ { @@ -48,9 +47,9 @@ export default { }, async mounted() { // check if audio only - const audioOnly = getSetting("audioOnly") + const audioOnly = getSetting('audioOnly') if (audioOnly) { - this.$router.push({ query: { "audio-only": "true" } }) + this.$router.push({ query: { 'audio-only': 'true' } }) } const username = this.$route.params.username @@ -87,7 +86,12 @@ export default {