Merge pull request #630 from arabcoders/dev

Minor WebUI design update to include random background

Author: arabcoders

README.md

@@ -9,6 +9,11 @@ out of the box, this tool support `Jellyfin`, `Plex` and `Emby` media servers.
 
 ## Updates
 
+### 2025-03-13
+
+We have recently added support for plex webhooks via tautulli which you can use if you don't have PlexPass. This should help
+close the gap with other media servers.
+
 ### 2025-02-19
 
 We have introduced new experimental feature to allow syncing watch progress for played items. This feature is still in

composer.lock

@@ -14,8 +14,7 @@
     border-radius: 15px;
 }
 
-html,
-body {
+html {
     background-color: #eaeaea;
 }
 
@@ -60,8 +59,7 @@ body {
         border-radius: 15px;
     }
 
-    html,
-    body {
+    html {
         background-color: #000000;
     }
 
@@ -81,6 +79,7 @@ body {
     .is-full-mask :not(figure) {
         text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
     }
+
     .has-tooltip {
         border-bottom-color: rgba(255, 255, 255, 0.3);
     }
@@ -163,19 +162,18 @@ body {
     color: #5f00d1;
 }
 
-@media screen and (min-width: 769px),
-print {
+@media screen and (min-width: 769px), print {
     .field.is-grouped-tablet {
         display: flex;
         gap: 0.75rem;
         justify-content: flex-start;
     }
 
-    .field.is-grouped-tablet>.control {
+    .field.is-grouped-tablet > .control {
         flex-shrink: 0;
     }
 
-    .field.is-grouped-tablet>.control.is-expanded {
+    .field.is-grouped-tablet > .control.is-expanded {
         flex-grow: 1;
         flex-shrink: 1;
     }
@@ -214,3 +212,15 @@ print {
 .page-leave-to {
     opacity: 0;
 }
+
+.transparent-bg {
+    opacity: 0.8;
+}
+
+.bg-fanart {
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-blend-mode: darken;
+}

frontend/assets/css/style.css

@@ -84,6 +84,26 @@
               </div>
             </div>
 
+            <div class="field">
+              <label class="label" for="random_bg">Backgrounds</label>
+              <div class="control">
+                <input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
+                <label for="random_bg">Enable</label>
+                <p class="help">Use random background image from your media backends.</p>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label" for="random_bg_opacity">
+                Background Visibility: (<code>{{ bg_opacity }}</code>)
+              </label>
+              <div class="control">
+                <input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.60"
+                       max="1.00" step="0.05">
+                <p class="help">How visible the background image should be.</p>
+              </div>
+            </div>
+
             <div class="field has-text-right">
               <div class="control">
                 <button type="submit" class="button is-primary" :disabled="!api_url || !api_token">
@@ -148,13 +168,16 @@ const real_api_url = useStorage('api_url', window.location.origin)
 const real_api_path = useStorage('api_path', '/v1/api')
 const real_api_token = useStorage('api_token', '')
 
+
 const api_url = ref(toRaw(real_api_url.value))
 const api_path = ref(toRaw(real_api_path.value))
 const api_user = ref(toRaw(real_api_user.value))
 const api_token = ref(toRaw(real_api_token.value))
-
 const exposeToken = ref(false)
 
+const bg_enable = useStorage('bg_enable', true)
+const bg_opacity = useStorage('bg_opacity', 0.95)
+
 const testApi = async () => {
   try {
     const response = await fetch(`${api_url.value}${api_path.value}/system/version`, {

frontend/components/Connection.vue

@@ -96,7 +96,7 @@
           <span>{{ !toggleData ? 'Show' : 'Hide' }} attached data</span>
         </h2>
         <div v-if="toggleData" class="is-relative">
-          <code class="text-container is-block" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
+          <code class="text-container is-block p-4" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
             {{ JSON.stringify(item.event_data, null, 2) }}
           </code>
           <button class="button m-4" v-tooltip="'Copy event data'"
@@ -115,7 +115,7 @@
           <span>{{ !toggleLogs ? 'Show' : 'Hide' }} event logs</span>
         </h2>
         <div v-if="toggleLogs" class="is-relative">
-          <code class="is-block text-container" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
+          <code class="is-block text-container p-4" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
             <span class="is-log-line is-block pt-1" v-for="(item, index) in filteredRows" :key="'log_line-' + index"
                   v-text="item"/>
           </code>
@@ -134,7 +134,7 @@
           <span>{{ !toggleOptions ? 'Show' : 'Hide' }} attached options</span>
         </h2>
         <div v-if="toggleOptions" class="is-relative">
-          <code class="is-block text-container" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
+          <code class="is-block text-container p-4" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
             {{ JSON.stringify(item.options, null, 2) }}
           </code>
           <button class="button m-4" v-tooltip="'Copy options'"