Home Explore Help
Sign In
brwong
/
playlist-extension
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fixed bug; formatted

had to remove "defer" from the loaded script (while keeping it for
alpine itself)
Brandon Wong 1 year ago
parent
ac5a827650
commit
598d91e6f6
2 changed files with 98 additions and 100 deletions
Unified View Show Diff Stats
  1. 47 37
      popup/popup.html
  2. 51 63
      popup/popup.js

+ 47 - 37
popup/popup.html
View File 

@@ -1,43 +1,53 @@
 
-<!DOCTYPE html>
 
+<!doctype html>
 
 <html lang="en">
 
 <html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'nonce-a23gbfz9e'">-->
 
-    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-a23gbfz9e'">-->
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>My Playlists</title>
 
     <title>My Playlists</title>
 
-    <link rel="stylesheet" href="popup.css">
 
-    <script nonce="a23gbfz9e" src="alpine.min.js" defer></script>
 
-    <script nonce="a23gbfz9e" src="popup.js" defer></script>
 
-</head>
 
-<body>
 
+    <link rel="stylesheet" href="popup.css" />
 
+    <script src="alpine.min.js" defer></script>
 
+    <script src="popup.js"></script>
 
+  </head>
 
+  <body>
 
     <div id="app" x-data="playlistManager">
 
     <div id="app" x-data="playlistManager">
 
-        <header>
 
-            <h1>My Playlists</h1>
 
-        </header>
 
-        <h1 x-text="temp"></h1>
 
-        
-        <div class="playlists-container">
 
-            <template x-for="(videos, playlistName) in playlists" :key="playlistName">
 
-                <div class="playlist">
 
-                    <h2 x-text="formatPlaylistName(playlistName)"></h2>
 
-                    <div class="video-list">
 
-                        <template x-for="(video, index) in videos" :key="index">
 
-                            <div class="video-item" :title="video.url">
 
-                                <span class="video-title" x-text="video.title || 'Untitled Video'"></span>
 
-                                <div class="video-actions">
 
-                                    <button @click="openVideo(video.url)" class="play-btn">Play</button>
 
-                                    <button @click="removeVideo(playlistName, index)" class="remove-btn">Remove</button>
 
-                                </div>
 
-                            </div>
 
-                        </template>
 
-                        <div x-show="videos.length === 0" class="empty-playlist">
 
-                            No videos in this playlist
 
-                        </div>
 
-                    </div>
 
+      <header>
 
+        <h1>My Playlists</h1>
 
+      </header>
 
+
 
+      <div class="playlists-container">
 
+        <template
 
+          x-for="(videos, playlistName) in playlists"
 
+          :key="playlistName"
 
+        >
 
+          <div class="playlist">
 
+            <h2 x-text="formatPlaylistName(playlistName)"></h2>
 
+            <div class="video-list">
 
+              <template x-for="(video, index) in videos" :key="index">
 
+                <div class="video-item" :title="video.url">
 
+                  <span
 
+                    class="video-title"
 
+                    x-text="video.title || 'Untitled Video'"
 
+                  ></span>
 
+                  <div class="video-actions">
 
+                    <button @click="openVideo(video.url)" class="play-btn">
 
+                      Play
 
+                    </button>
 
+                    <button
 
+                      @click="removeVideo(playlistName, index)"
 
+                      class="remove-btn"
 
+                    >
 
+                      Remove
 
+                    </button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
-            </template>
 
-        </div>
 
+              </template>
 
+              <div x-show="videos.length === 0" class="empty-playlist">
 
+                No videos in this playlist
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </template>
 
+      </div>
 
     </div>
 
     </div>
 
-</body>
 
+  </body>
 
 </html>
 
 </html>

+ 51 - 63
popup/popup.js
View File 

@@ -1,66 +1,54 @@
 
-console.log('popup.js is doing something');
 
-window.tempData = {
 
-    temp: 'howdy temp',
 
+document.addEventListener("alpine:init", () => {
 
+  Alpine.data("playlistManager", () => ({
 
+    playlists: {},
 
+
 
     init() {
 
     init() {
 
-        console.log('temp init function');
 
-        this.temp = 'seeya temp'
 
+      this.loadPlaylists();
 
     },
 
     },
 
-}
 
-console.log('popup.js is CONTINUING');
 
-document.addEventListener('alpine:init', () => {
 
-    console.log('doing MORE');
 
-    console.log('doing MORE', Alpine);
 
-    Alpine.data('playlistManager', () => ({
 
-        temp: "hey temp",
 
-        playlists: {},
 
-        
-        init() {
 
-            this.loadPlaylists();
 
-        },
 
-        
-        async loadPlaylists() {
 
-            try {
 
-                const result = await browser.storage.local.get("playlists");
 
-                console.log('LOAD RESULT', result);
 
-                this.playlists = result.playlists || {};
 
-            } catch (error) {
 
-                console.error("Error loading playlists:", error);
 
-            }
 
-        },
 
-        
-        formatPlaylistName(name) {
 
-            // Convert "listening-1" to "Listening - 1"
 
-            return name
 
-                .split('-')
 
-                .map(part => part.charAt(0).toUpperCase() + part.slice(1))
 
-                .join(' - ');
 
-        },
 
-        
-        openVideo(url) {
 
-            browser.tabs.create({ url });
 
-        },
 
-        
-        async removeVideo(playlistName, index) {
 
-            // Make a copy of the current playlist
 
-            const playlist = [...this.playlists[playlistName]];
 
-            
-            // Remove the video at the specified index
 
-            playlist.splice(index, 1);
 
-            
-            // Create an updated playlists object with the remaining playlists unchanged
 
-            const updatedPlaylists = {
 
-                ...this.playlists,
 
-                [playlistName]: playlist
 
-            };
 
-            
-            // Update the playlists in storage
 
-            try {
 
-                await browser.storage.local.set({ playlists: updatedPlaylists });
 
-                this.playlists = updatedPlaylists;
 
-            } catch (error) {
 
-                console.error("Error removing video:", error);
 
-            }
 
-        }
 
-    }));
 
+
 
+    async loadPlaylists() {
 
+      try {
 
+        const result = await browser.storage.local.get("playlists");
 
+        console.log("LOAD RESULT", result.playlists);
 
+        this.playlists = result.playlists || {};
 
+      } catch (error) {
 
+        console.error("Error loading playlists:", error);
 
+      }
 
+    },
 
+
 
+    formatPlaylistName(name) {
 
+      // Convert "listening-1" to "Listening - 1"
 
+      return name
 
+        .split("-")
 
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
 
+        .join(" - ");
 
+    },
 
+
 
+    openVideo(url) {
 
+      browser.tabs.create({ url });
 
+    },
 
+
 
+    async removeVideo(playlistName, index) {
 
+      // Make a copy of the current playlist
 
+      const playlist = [...this.playlists[playlistName]];
 
+
 
+      // Remove the video at the specified index
 
+      playlist.splice(index, 1);
 
+
 
+      // Create an updated playlists object with the remaining playlists unchanged
 
+      const updatedPlaylists = {
 
+        ...this.playlists,
 
+        [playlistName]: playlist,
 
+      };
 
+
 
+      // Update the playlists in storage
 
+      try {
 
+        await browser.storage.local.set({ playlists: updatedPlaylists });
 
+        this.playlists = updatedPlaylists;
 
+      } catch (error) {
 
+        console.error("Error removing video:", error);
 
+      }
 
+    },
 
+  }));
 
 });
 
 });
 
-console.log('popup.js FINISHED doing something');
 
+console.log("popup.js FINISHED doing something");