From cf2b54e0253dcd47b83ff549b6ea410360a87cbb Mon Sep 17 00:00:00 2001 From: Dan Niles <56271899+dan-niles@users.noreply.github.com> Date: Wed, 10 Jul 2024 20:16:09 +0530 Subject: [PATCH 1/4] Save main and secondary color in config.json --- scraper/src/youtube2zim/schemas.py | 7 +++++++ scraper/src/youtube2zim/scraper.py | 12 ++++++++++++ 2 files changed, 19 insertions(+) diff --git a/scraper/src/youtube2zim/schemas.py b/scraper/src/youtube2zim/schemas.py index 70b23740..9b061f65 100644 --- a/scraper/src/youtube2zim/schemas.py +++ b/scraper/src/youtube2zim/schemas.py @@ -100,3 +100,10 @@ class Channel(CamelModel): joined_date: str collection_type: str main_playlist: str | None = None + + +class Config(CamelModel): + """Class to serialize configuration data for the ZIM.""" + + main_color: str | None = "#000000" + secondary_color: str | None = "#FFFFFF" diff --git a/scraper/src/youtube2zim/scraper.py b/scraper/src/youtube2zim/scraper.py index 1f08fda3..a1c13b7c 100644 --- a/scraper/src/youtube2zim/scraper.py +++ b/scraper/src/youtube2zim/scraper.py @@ -54,6 +54,7 @@ from youtube2zim.schemas import ( Author, Channel, + Config, Playlist, PlaylistPreview, Playlists, @@ -1182,6 +1183,17 @@ def get_playlist_slug(playlist) -> str: is_front=False, ) + # write config.json file + self.zim_file.add_item_for( + path="config.json", + title="Config", + content=Config( + main_color=self.main_color, secondary_color=self.secondary_color + ).model_dump_json(by_alias=True, indent=2), + mimetype="application/json", + is_front=False, + ) + # clean videos left out in videos directory remove_unused_videos(videos) From 8d9eb72f1e4d2b574ea25b85c4ac8092c5ca0ecd Mon Sep 17 00:00:00 2001 From: Dan Niles <56271899+dan-niles@users.noreply.github.com> Date: Wed, 10 Jul 2024 20:34:54 +0530 Subject: [PATCH 2/4] Update Vuetify initialization to load primary and secondary colors from config.json --- zimui/src/main.ts | 20 +++++++++------- zimui/src/plugins/vuetify.ts | 44 +++++++++++++++++++++++++++++++++++- zimui/src/types/Channel.ts | 5 ++++ 3 files changed, 60 insertions(+), 9 deletions(-) diff --git a/zimui/src/main.ts b/zimui/src/main.ts index ce961ff1..d619d6ba 100644 --- a/zimui/src/main.ts +++ b/zimui/src/main.ts @@ -5,12 +5,16 @@ import { createPinia } from 'pinia' import App from './App.vue' import router from './router' -import vuetify from './plugins/vuetify' +import loadVuetify from './plugins/vuetify' -const app = createApp(App) - -app.use(createPinia()) -app.use(vuetify) -app.use(router) - -app.mount('#app') +loadVuetify() + .then((vuetify) => { + const app = createApp(App) + app.use(createPinia()) + app.use(vuetify) + app.use(router) + app.mount('#app') + }) + .catch((error) => { + console.error('Error initializing app:', error) + }) diff --git a/zimui/src/plugins/vuetify.ts b/zimui/src/plugins/vuetify.ts index 0037db93..386e75f8 100644 --- a/zimui/src/plugins/vuetify.ts +++ b/zimui/src/plugins/vuetify.ts @@ -1,5 +1,47 @@ import 'vuetify/styles' import '@mdi/font/css/materialdesignicons.css' import { createVuetify } from 'vuetify' +import type { Config } from '@/types/Channel' -export default createVuetify() +async function loadVuetify() { + let primaryColor = '#000000' + let secondaryColor = '#FFFFFF' + + // Load primary and secondary colors from config.json + try { + const response = await fetch('./config.json') + if (response.ok) { + const config: Config = await response.json() + primaryColor = config.mainColor || primaryColor + secondaryColor = config.secondaryColor || secondaryColor + } else { + console.error('Failed to fetch config.json') + } + } catch (error) { + console.error('Error loading config:', error) + } + + const zimuiTheme = { + colors: { + background: secondaryColor, + surface: secondaryColor, + primary: primaryColor + } + } + + return createVuetify({ + theme: { + defaultTheme: 'zimuiTheme', + variations: { + colors: ['background', 'primary'], + lighten: 2, + darken: 2 + }, + themes: { + zimuiTheme + } + } + }) +} + +export default loadVuetify diff --git a/zimui/src/types/Channel.ts b/zimui/src/types/Channel.ts index c040f730..35111e13 100644 --- a/zimui/src/types/Channel.ts +++ b/zimui/src/types/Channel.ts @@ -11,6 +11,11 @@ export interface Channel { mainPlaylist?: string } +export interface Config { + mainColor: string + secondaryColor: string +} + export interface Author { channelId: string channelTitle: string From b5c417e68951bfac46a60ce1daf27b00a7027661 Mon Sep 17 00:00:00 2001 From: Dan Niles <56271899+dan-niles@users.noreply.github.com> Date: Wed, 10 Jul 2024 20:37:05 +0530 Subject: [PATCH 3/4] Update UI to support different background colors from config.json --- zimui/src/assets/images/banner-placeholder.jpg | Bin 29893 -> 0 bytes zimui/src/components/channel/ChannelHeader.vue | 14 +++++++++++--- .../components/playlist/panel/PlaylistPanel.vue | 2 +- .../playlist/panel/PlaylistPanelPreview.vue | 2 +- zimui/src/views/PlaylistView.vue | 4 ++-- 5 files changed, 15 insertions(+), 7 deletions(-) delete mode 100644 zimui/src/assets/images/banner-placeholder.jpg diff --git a/zimui/src/assets/images/banner-placeholder.jpg b/zimui/src/assets/images/banner-placeholder.jpg deleted file mode 100644 index 5493de3e8ffbf2b400bc0e0689b0c5da0894b539..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 29893 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[0].id) @@ -97,4 +95,14 @@ const tab = ref(tabs[0].id) border-top-right-radius: 0 !important; } } + +.banner-bg { + background: rgb(var(--v-theme-primary)); + background: linear-gradient( + 120deg, + rgba(var(--v-theme-primary-darken-1)) 0%, + rgba(var(--v-theme-primary)) 50%, + rgba(var(--v-theme-primary-lighten-1)) 100% + ); +} diff --git a/zimui/src/components/playlist/panel/PlaylistPanel.vue b/zimui/src/components/playlist/panel/PlaylistPanel.vue index 7b42e79c..3809355e 100644 --- a/zimui/src/components/playlist/panel/PlaylistPanel.vue +++ b/zimui/src/components/playlist/panel/PlaylistPanel.vue @@ -57,7 +57,7 @@ const emit = defineEmits(['shuffle', 'loop', 'hide-panel'])