pamphlet service for ads

6 files changed, 142 insertions, 13 deletions

diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index 06e571f3..f69b0c03 100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -160,18 +160,55 @@ img {
   border-top-left-radius: 14px;
 }
 
+#main-content {
+  width: 800px;
+  padding: 0 0px 0px 20px;
+  border-top: 1px solid #fff;
+}
+
+#right-sidebar {
+  width: 200px;
+  border-top: 1px solid #fff;
+}
+
+#footer {
+  width: 1200px;
+  padding: 8px 0;
+  text-align: center;
+  border-top: 1px solid #fff;
+}
+
+.right-sidebar {
+  position: relative;
+  left: 20px;
+}
+
 .left-sidebar {
   position: relative;
   top: -65px;
 }
 
-#main-content {
+.pamphlet-big {
+  width: 200px;
+  height: auto;
+}
+
+.pamphlet-banner {
   width: 780px;
-  padding: 0 20px;
-  border-top: 1px solid #fff;
+  height: 100px;
+  padding: 4px;
+  border: 1px solid #fff;
+  margin: 8px 0px;
 }
 
-#right-sidebar {
-  width: 200px;
-  border-top: 1px solid #fff;
+.pamphlet-button {
+  width: 88px;
+  height: 31px;
+  display: inline-block;
+}
+
+.footer-buttons,
+.footer-copyright,
+.footer-credits {
+  margin: 8px 0px;
 }
\ No newline at end of file
diff --git a/static/css/shared/kawaiibeats.css b/static/css/shared/kawaiibeats.css
index ca4ce155..68e5ee8e 100644
--- a/static/css/shared/kawaiibeats.css
+++ b/static/css/shared/kawaiibeats.css
@@ -3,8 +3,7 @@
     width: 200px;
     height: 320px;
     position: relative;
-    left: 20px;
-    top: 6px;
+    margin-top: 8px;
     background-image: url("../../images/kawaiibeats/kawaii_beats.gif");
     background-size: 200px 320px;
     background-repeat: no-repeat;
diff --git a/static/images/core/icons/anime.png b/static/images/core/icons/anime.png
new file mode 100644
index 00000000..adfde393
--- /dev/null
+++ b/static/images/core/icons/anime.png
diff --git a/static/images/core/icons/calendar.png b/static/images/core/icons/calendar.png
new file mode 100644
index 00000000..fc024771
--- /dev/null
+++ b/static/images/core/icons/calendar.png
diff --git a/static/js/libs/pamphlet.js b/static/js/libs/pamphlet.js
new file mode 100644
index 00000000..880f6c2e
--- /dev/null
+++ b/static/js/libs/pamphlet.js
@@ -0,0 +1,95 @@
+(function (window) {
+    'use strict';
+
+    class Pamphlet {
+        constructor(config = {}) {
+            this.config = {
+                server: config.server || '/services/pamphlet',
+                refreshInterval: config.refreshInterval || 3600000,
+                ...config
+            };
+
+            this.slots = new Map();
+
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => this.init());
+            } else {
+                this.init();
+            }
+        }
+
+        init() {
+            this.scanForSlots();
+
+            if (this.config.refreshInterval > 0) {
+                setInterval(() => this.refreshAll(), this.config.refreshInterval);
+            }
+        }
+
+        scanForSlots() {
+            const elements = document.querySelectorAll('.pamphlet');
+            elements.forEach(element => {
+                const style = this.getStyle(element);
+                if (style) {
+                    this.setupSlot(element, style);
+                }
+            });
+        }
+
+        getStyle(element) {
+            const classes = element.classList;
+            if (classes.contains('pamphlet-banner')) return 'banner';
+            if (classes.contains('pamphlet-big')) return 'big';
+            if (classes.contains('pamphlet-button')) return 'button';
+            return null;
+        }
+
+        setupSlot(element, style) {
+            const slotId = `slot-${Math.random().toString(36).substring(2, 9)}`;
+            element.setAttribute('data-pamphlet-id', slotId);
+
+            this.slots.set(slotId, {
+                element,
+                style
+            });
+
+            this.loadPamphlet(slotId);
+        }
+
+        loadPamphlet(slotId) {
+            const slot = this.slots.get(slotId);
+            if (!slot) return;
+
+            try {
+                const img = document.createElement('img');
+                const seed = Math.random().toString(36).substring(7);
+                img.src = `${this.config.server}?style=${slot.style}&seed=${seed}`;
+                img.alt = 'Pamphlet';
+                img.style.width = '100%';
+                img.style.height = '100%';
+
+                slot.element.innerHTML = '';
+                slot.element.appendChild(img);
+
+            } catch (error) {
+                slot.element.innerHTML = '<!-- Failed to load pamphlet -->';
+            }
+        }
+
+        refreshAll() {
+            this.slots.forEach((slot, slotId) => {
+                this.loadPamphlet(slotId);
+            });
+        }
+
+        refresh(element) {
+            const slotId = element.getAttribute('data-pamphlet-id');
+            if (slotId) {
+                this.loadPamphlet(slotId);
+            }
+        }
+    }
+
+    window.Pamphlet = Pamphlet;
+
+})(window);
diff --git a/static/js/shared/kawaiiBeatsPlayer.js b/static/js/shared/kawaiiBeatsPlayer.js
index d6f7674c..c43d770a 100644
--- a/static/js/shared/kawaiiBeatsPlayer.js
+++ b/static/js/shared/kawaiiBeatsPlayer.js
@@ -42,7 +42,6 @@ let isPlaying = false;
 let currentSong = null;
 let isLoading = true;
 let isDragging = false;
-let Debugging = true;
 
 // DOM Elements
 const elements = {
@@ -182,7 +181,7 @@ class SongStore {
 
     async fetchNewSong(nextSongId = null) {
         try {
-            const url = nextSongId ? `/stream/random-song?next=${nextSongId}` : '/stream/random-song';
+            const url = nextSongId ? `/services/stream/random-song?next=${nextSongId}` : '/services/stream/random-song';
             const response = await fetch(url);
             const data = await response.json();
             return data;
@@ -373,7 +372,6 @@ function drawVisualizer() {
 // State Management Functions
 function savePlaybackState() {
     if (!currentSong) return;
-    if (Debugging) return;
 
     const currentTime = isPlaying ? audioContext.currentTime - startTime : pauseTime;
     const state = {
@@ -406,7 +404,7 @@ async function loadNewSong(autoplay = false, direction = 'next') {
         currentSong = nextSong;
         updateSongInfo(); // This will now use the cached artwork
 
-        await fetchAudio(`/stream/song/${currentSong.id}`);
+        await fetchAudio(`/services/stream/song/${currentSong.id}`);
         pauseTime = 0; // Reset seek position for new song
 
         if (wasPlaying) {
@@ -519,7 +517,7 @@ async function init() {
             };
 
             updateSongInfo();
-            await fetchAudio(`/stream/song/${state.songId}`);
+            await fetchAudio(`/services/stream/song/${state.songId}`);
             pauseTime = state.timeStamp || 0;
 
             if (state.isPlaying) {