Spaces:

ToKnow-ai
/

shazam-playlist-to-youtube-playlist

Running

App Files Files Community

mckabue commited on Jun 22, 2024

Commit

584c24c

1 Parent(s): 6a5bc2f

Read details at

Browse files

Files changed (2) hide show

app.py +7 -2
index.html +28 -15

app.py CHANGED Viewed

@@ -1,10 +1,15 @@
 """Shazam Playlist to Youtube Playlist"""
 from typing import Optional
 import pandas as pd
 from pytube import Search, YouTube
 from flask import Flask, request, send_from_directory
 app = Flask(__name__)
 @app.route('/')
@@ -21,7 +26,7 @@ def video_id() -> str:
     try:
         title: str = request.json.get('title')
         artist: str = request.json.get('artist')
-        youtube: YouTube = _get_youtube_song(title, artist)
         return youtube.video_id
     except Exception as e:
         return str(e)
@@ -38,7 +43,7 @@ def parse_csv():
     except Exception as e:
         return str(e)
-def _get_youtube_song(title: str, artist: str) -> Optional[YouTube]:
     """Searches for a YouTube video based on the given title and artist"""
     search_result = Search(f'{title} by {artist}')
     return search_result.results[0] if search_result.results else None

 """Shazam Playlist to Youtube Playlist"""
 from typing import Optional
+import logging
 import pandas as pd
 from pytube import Search, YouTube
 from flask import Flask, request, send_from_directory
+# https://github.com/pytube/pytube/issues/1270#issuecomment-2100372834
+pytube_logger = logging.getLogger('pytube')
+pytube_logger.setLevel(logging.ERROR)
 app = Flask(__name__)
 @app.route('/')
     try:
         title: str = request.json.get('title')
         artist: str = request.json.get('artist')
+        youtube: YouTube = get_youtube_song(title, artist)
         return youtube.video_id
     except Exception as e:
         return str(e)
     except Exception as e:
         return str(e)
+def get_youtube_song(title: str, artist: str) -> Optional[YouTube]:
     """Searches for a YouTube video based on the given title and artist"""
     search_result = Search(f'{title} by {artist}')
     return search_result.results[0] if search_result.results else None

index.html CHANGED Viewed

@@ -15,20 +15,19 @@
             height: 100%;
         }
-        .playlist tbody tr {
-            cursor: pointer;
         }
     </style>
 </head>
 <body>
     <div class="container my-4">
-        <h1 class="text-center">Shazam Playlist to Youtube Playlist</h1>
-        <em>
             <i>
-                This is an idea from <a href="https://toknow.ai/">ToKnow.ai</a>
-                <a href="https://toknow.ai/posts/shazam-playlist-to-youtube-playlist/">blog post</a>.
-                This service is free of charge and does not require any payment or subscription to use.
             </i>
         </em>
         <p class="text-center">
@@ -60,7 +59,8 @@
         const playlistTable = document.querySelector('.playlist');
         const uploaForm = document.querySelector('.upload-form');
         let songsPlaylist = []
-        let videoIndex = 0;
         uploaForm.addEventListener('input', e => {
             e.preventDefault();
@@ -87,7 +87,13 @@
                 }
             })
         }
         async function getVideoId(song) {
             const response = await fetch(
                 '/video_id',
@@ -99,7 +105,7 @@
             return await response.text()
         }
         async function nextVideo(callback, newIndex = undefined) {
-            newIndex = (newIndex || (videoIndex + 1))
             videoIndex = newIndex < songsPlaylist.length ? newIndex : 0;
             let video_id = await getVideoId(songsPlaylist[videoIndex]);
             callback(video_id);
@@ -117,7 +123,7 @@
                                     <th>${i.Title}</th>
                                     <th>${i.Artist}</th>
                                 </tr>`
-                            ).join('')
                 playlistTable.innerHTML = `
                     <table class="table table-striped table-hover table-bordered rounded">
                         <thead>
@@ -133,7 +139,6 @@
                 playlistTable.innerHTML = error;
             }
         }
-        let youtubePlayer;
         function onYouTubeIframeAPIReady() {
             const youtubePlayerElement = document.querySelector('.youtube-player');
             youtubePlayer = window.youtubePlayer = new YT.Player(youtubePlayerElement, {
@@ -149,7 +154,8 @@
                             onContinue(event?.target);
                         }
                     },
-                    'onError': function(event) {
                         onContinue(event?.target);
                     }
                 }
@@ -162,13 +168,20 @@
                 }
             }, 500);
         };
         function onContinue(player = undefined, newIndex = undefined) {
             if (songsPlaylist.length > 0) {
                 nextVideo((value) => {
                     player = player || youtubePlayer
                     player.loadVideoById(value);
-                    player.playVideo();
                 }, newIndex);
             }
         }

             height: 100%;
         }
+        .playlist tbody tr {
+            cursor: pointer;
         }
     </style>
 </head>
 <body>
     <div class="container my-4">
+        <h1 class="text-center">Convert Your Shazam Playlist to YouTube Playlist</h1>
+        <em class="text-center">
             <i>
+                Read details at
+                <a href="https://toknow.ai/posts/shazam-playlist-to-youtube-playlist/"><b>ToKnow.ai</b> blog post</a>.
             </i>
         </em>
         <p class="text-center">
         const playlistTable = document.querySelector('.playlist');
         const uploaForm = document.querySelector('.upload-form');
         let songsPlaylist = []
+        let videoIndex = -1;
+        let youtubePlayer;
         uploaForm.addEventListener('input', e => {
             e.preventDefault();
                 }
             })
         }
+        function addErrorToCurrentIndex() {
+            playlistTable.querySelectorAll('tbody tr').forEach(row => {
+                if (Number(row.dataset.index) == videoIndex) {
+                    row.classList.add('bg-danger');
+                }
+            })
+        }
         async function getVideoId(song) {
             const response = await fetch(
                 '/video_id',
             return await response.text()
         }
         async function nextVideo(callback, newIndex = undefined) {
+            newIndex = newIndex >= 0 ? newIndex : (videoIndex + 1)
             videoIndex = newIndex < songsPlaylist.length ? newIndex : 0;
             let video_id = await getVideoId(songsPlaylist[videoIndex]);
             callback(video_id);
                                     <th>${i.Title}</th>
                                     <th>${i.Artist}</th>
                                 </tr>`
+                ).join('')
                 playlistTable.innerHTML = `
                     <table class="table table-striped table-hover table-bordered rounded">
                         <thead>
                 playlistTable.innerHTML = error;
             }
         }
         function onYouTubeIframeAPIReady() {
             const youtubePlayerElement = document.querySelector('.youtube-player');
             youtubePlayer = window.youtubePlayer = new YT.Player(youtubePlayerElement, {
                             onContinue(event?.target);
                         }
                     },
+                    'onError': function (event) {
+                        addErrorToCurrentIndex();
                         onContinue(event?.target);
                     }
                 }
                 }
             }, 500);
         };
         function onContinue(player = undefined, newIndex = undefined) {
             if (songsPlaylist.length > 0) {
                 nextVideo((value) => {
                     player = player || youtubePlayer
                     player.loadVideoById(value);
+                    setTimeout(() => {
+                        player.playVideo();
+                        setTimeout(() => {
+                            if (player.getPlayerState() != YT.PlayerState.PLAYING) {
+                                player.playVideo();
+                            }
+                        }, 10);
+                    }, 10);
                 }, newIndex);
             }
         }