Merge pull request #263 from openzim/configure-ui-colors

Add support for color CLI arguments in new UI

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 UI."""
+
+    main_color: str | None
+    secondary_color: str | None

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)
 

zimui/src/components/channel/ChannelHeader.vue

@@ -6,7 +6,6 @@ import AboutDialogButton from '@/components/channel/AboutDialogButton.vue'
 import { useMainStore } from '@/stores/main'
 
 import profilePlaceholder from '@/assets/images/profile-placeholder.jpg'
-import bannerPlaceholder from '@/assets/images/banner-placeholder.jpg'
 
 const { mdAndDown } = useDisplay()
 
@@ -43,8 +42,7 @@ const tab = ref<number>(tabs[0].id)
       <v-parallax
         :scale="1"
         height="120"
-        class="rounded-lg rounded-t-0"
-        :lazy-src="bannerPlaceholder"
+        class="banner-bg rounded-lg rounded-t-0"
         :src="main.channel?.bannerPath"
       ></v-parallax>
 
@@ -97,4 +95,14 @@ const tab = ref<number>(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%
+  );
+}
 </style>

zimui/src/components/playlist/panel/PlaylistPanel.vue

@@ -57,7 +57,7 @@ const emit = defineEmits(['shuffle', 'loop', 'hide-panel'])
 
 <template>
   <v-card class="border-thin rounded-lg" flat>
-    <v-card-item class="border-b-thin bg-grey-lighten-5 px-2">
+    <v-card-item class="border-b-thin px-2">
       <v-row class="px-2">
         <v-col :cols="showToggle ? 9 : 12">
           <v-card-title class="panel-title">{{ props.playlist.title }}</v-card-title>

zimui/src/components/playlist/panel/PlaylistPanelPreview.vue

@@ -11,7 +11,7 @@ const emit = defineEmits(['click'])
 
 <template>
   <v-card
-    class="mx-auto border-thin rounded-lg"
+    class="mx-auto border-thin rounded-lg bg-background-darken-1"
     prepend-icon="mdi-playlist-play"
     append-icon="mdi-chevron-down"
     link

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)
+  })

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

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

zimui/src/views/PlaylistView.vue

@@ -64,7 +64,7 @@ const { mdAndDown } = useDisplay()
     <v-row>
       <v-spacer />
       <v-col cols="12" md="5" lg="4" xl="3" xxl="2">
-        <v-card flat class="header-card rounded-lg pa-5 bg-grey-lighten-4">
+        <v-card flat class="header-card rounded-lg border-thin pa-5">
           <v-img
             :lazy-src="thumbnailPlaceholder"
             :src="playlist.thumbnailPath"
@@ -93,7 +93,7 @@ const { mdAndDown } = useDisplay()
               Play All
             </v-btn>
             <v-btn
-              class="border-thin bg-grey-lighten-4 flex-fill"
+              class="border-thin flex-fill"
               rounded="lg"
               prepend-icon="mdi-shuffle"
               variant="flat"