brwong
/
playlist-extension


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344
							<!DOCTYPE html>
<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'">-->
    <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>
    <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>
                </div>
            </template>
        </div>
    </div>
</body>
</html>