Switched to single embedded Spotify player using Javascript

dnaeye · Jan 11, 2021 · 6540acf · 6540acf
1 parent a0fcedb
commit 6540acf
Show file tree

Hide file tree

Showing 32 changed files with 3,635 additions and 296 deletions.
diff --git a/.idea/aggro-gator.iml b/.idea/aggro-gator.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/boomkat.py b/boomkat.py
@@ -47,8 +47,12 @@ def get_page(year):
         album = release.find(class_='release__title').text.strip()
 
         # Create Boomkat review URL
-        review_url = "https://boomkat.com" + result.find('div', class_='chart-item-link chart-item-link--fulldetails')\
-            .find('a', href=True)['href']
+        try:
+            review_url = "https://boomkat.com" + \
+                         result.find('div', class_='chart-item-link chart-item-link--fulldetails')\
+                             .find('a', href=True)['href']
+        except:
+            review_url = "https://boomkat.com"
 
         # Get album images
         # try:

diff --git a/css/style.css b/css/style.css
diff --git a/data/boomkat_2015.csv b/data/boomkat_2015.csv
diff --git a/data/boomkat_2019_album-ids.csv b/data/boomkat_2019_album-ids.csv
diff --git a/data/boomkat_2020.csv b/data/boomkat_2020.csv
diff --git a/data/boomkat_2020_album-ids.csv b/data/boomkat_2020_album-ids.csv
diff --git a/data/pitchfork_2019_album-ids.csv b/data/pitchfork_2019_album-ids.csv
diff --git a/data/pitchfork_2020_album-ids.csv b/data/pitchfork_2020_album-ids.csv
diff --git a/html/boomkat-2019.html b/html/boomkat-2019.html
diff --git a/html/boomkat-2020.html b/html/boomkat-2020.html
diff --git a/html/css/style.css b/html/css/style.css
@@ -0,0 +1,82 @@
+table.center {
+  margin-left: auto; 
+  margin-right: auto;
+}
+
+th, td {
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	padding: 8px;
+}
+
+th {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	text-align: left;
+	background-color: #4CAF50;
+	position: sticky;
+	top: 0;
+	box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.4);
+}
+
+#tr:nth-child(even){background-color: #f2f2f2;}
+
+tr:hover {background-color: #ddd;}
+
+h1 {
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 50px;
+	color: black;
+	text-shadow: 2px 2px dimgrey;
+	text-align: center;
+}
+
+footer {
+	position: sticky;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 120px;
+	padding: 3px;
+	width: 100%;
+	background-color: #4CAF50;
+/*	align-items:center;*/
+	font-family: Helvetica, Arial, sans-serif;
+	text-align: center;
+	box-shadow: 0 -3px 2px -1px rgba(0, 0, 0, 0.4);
+}
+
+.container {
+	position: relative;
+	text-align: center;
+	color: white;
+	width: 100%;
+	margin-left: auto; 
+	margin-right: auto;
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.column {
+	float: left;
+	width: 33.33%;
+	padding: 5px;
+}
+
+/* Clearfix (clear floats) */
+.row::after {
+	content: "";
+	clear: both;
+	display: table;
+}
+
+.centered {
+	position: relative;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
diff --git a/html/images/Andy Stott - It Should Be Us.jpg b/html/images/Andy Stott - It Should Be Us.jpg
diff --git a/html/images/Beyonce - Homecoming.jpg b/html/images/Beyonce - Homecoming.jpg
diff --git a/html/images/Bon Iver - i, i.jpg b/html/images/Bon Iver - i, i.jpg
diff --git a/html/images/DJ Python - Mas Amable.jpg b/html/images/DJ Python - Mas Amable.jpg
diff --git a/html/images/Fennesz - Agora.jpg b/html/images/Fennesz - Agora.jpg
diff --git a/html/images/Fiona Apple - Fetch the Bolt Cutters.jpg b/html/images/Fiona Apple - Fetch the Bolt Cutters.jpg
diff --git a/html/images/Kali Malone - The Sacrificial Code.jpg b/html/images/Kali Malone - The Sacrificial Code.jpg
diff --git a/html/images/Kelly Lee Owens - Inner Song.jpg b/html/images/Kelly Lee Owens - Inner Song.jpg
diff --git a/html/images/Lana Del Rey - The Greatest.jpg b/html/images/Lana Del Rey - The Greatest.jpg
diff --git a/html/images/Mark Fell and Will Guthrie - Infoldings.jpg b/html/images/Mark Fell and Will Guthrie - Infoldings.jpg
diff --git a/html/images/Regis - Hidden In This Is The Light That You Miss.jpg b/html/images/Regis - Hidden In This Is The Light That You Miss.jpg
diff --git a/html/images/Run the Jewels - RTJ4.jpg b/html/images/Run the Jewels - RTJ4.jpg
diff --git a/html/images/Sunn O - Life Metal.jpg b/html/images/Sunn O - Life Metal.jpg
diff --git a/html/pitchfork-2019.html b/html/pitchfork-2019.html
diff --git a/html/pitchfork-2019_orig.html b/html/pitchfork-2019_orig.html
diff --git a/html/pitchfork-2020.html b/html/pitchfork-2020.html
diff --git a/html/pitchfork-2020_orig.html b/html/pitchfork-2020_orig.html
diff --git a/html_table_creator.py b/html_table_creator.py
@@ -28,7 +28,7 @@ def get_input():
 
 year = user_input.year
 
-filename = site + "_" + year + "_html.csv"
+filename = site + "_" + year + "_album-ids.csv"
 
 # Import album data
 df = pd.read_csv("data/" + filename)
@@ -45,13 +45,32 @@ def get_input():
 # Create webpage header and footer content
 html_head = '''
 <html>
-    <head><title>''' + site.title() + ''''s Top Albums of ''' + year + '''</title></head>
+    <head>
+        <title>''' + site.title() + ''''s Top Albums of ''' + year + '''</title>
+    </head>
     <link rel="stylesheet" href="css/style.css"/>
+    
     <body>
-    <h1>''' + site.title() + ''''s Top Albums of ''' + year + '''</h1>
+        <div class="container">
+            <div class="centered">
+                <h1>''' + site.title() + ''''s Top Albums of ''' + year + '''</h1>
+            </div>
+        </div>
+    
+    <script type="text/javascript">
+    function getSpotfiyPlayer(album_id) {
+        var player_prefix = "<iframe src=\\\'https://open.spotify.com/embed/album/";
+        var player_suffix = "\\\' width=\\\"300\\\" height=\\\"80\\\" frameborder=\\\"0\\\" allowtransparency=\\\"true\\\" allow=\\\"encrypted-media\\\"></iframe>";
+        document.getElementById("player").innerHTML = player_prefix.concat(album_id, player_suffix);
+    }
+    </script>
 '''
+
 html_end = '''
     </body>
+    <footer>
+        <p id="player"></p>
+    </footer>
 </html>
 '''
 
@@ -60,16 +79,16 @@ def get_input():
 
 with open("html/" + outfile, 'w', encoding="utf-8-sig") as f:
     f.write(html_head)
-    f.write('<table width=1280px class="center">')
-    f.write('<col style = "width:5%">')
+    f.write('<table class="center">')
     f.write('<col style = "width:5%">')
     f.write('<col style = "width:15%">')
-    f.write('<col style = "width:50%">')
-    f.write('<col style = "width:25%">')
+    f.write('<col style = "width:15%">')
+    f.write('<col style = "width:30%">')
+    f.write('<col style = "width:10%">')
     f.write('<thead>')
     f.write('<tr>')
     for header in df.columns:
-        if header == 'html':
+        if header == 'album_id':
             f.write('<th>' + "Play Album" + '</th>')
         else:
             f.write('<th>' + str(header).title() + '</th>')
@@ -80,9 +99,18 @@ def get_input():
         f.write('<tr>')
         for col in df.columns:
             value = df.iloc[i][col]
-            f.write('<td>' + str(value) + '</td>')
-        f.write('<tr>')
-    f.write('</table>')
+            if col == 'rank':
+                f.write('<td align="center">' + str(value) + '</td>')
+            elif col == 'album_id':
+                if value == 'Not available':
+                    f.write('<td align="center">' + str(value) + '</td>')
+                else:
+                    f.write('<td align="center"><button onclick="getSpotfiyPlayer(\'' \
+                            + value + '\')">Load Player</button></td>')
+            else:
+                f.write('<td>' + str(value) + '</td>')
+        f.write('\t\t</tr>')
+    f.write('\t</table>')
     f.write(html_end)
 
 

diff --git a/spotify.py b/spotify.py
@@ -48,7 +48,7 @@ def get_input():
 # Import album data
 df = pd.read_csv("data/" + filename)
 
-html = []
+album_ids = []
 
 # Get Spotify ID for each album and create HTML code for embeddable Spotify player
 for i in range(len(df)):
@@ -80,24 +80,24 @@ def get_input():
             album_data = data.json()
             album_id = album_data['albums']['items'][0]['id']
 
-            width = '"300"'
-            height = '"80"'
-            base = '<iframe src="https://open.spotify.com/embed/album/'
-            frame_border = '"0"'
-            allow_transparency = '"true"'
-            allow = '"encrypted-media'
-            code = base + album_id + '"' + ' width=' + width + ' height=' + height + ' frameborder=' + frame_border \
-                + ' allowtransparency=' + allow_transparency + ' allow=' + allow + '"></iframe>'
+            # width = '"300"'
+            # height = '"80"'
+            # base = '<iframe src="https://open.spotify.com/embed/album/'
+            # frame_border = '"0"'
+            # allow_transparency = '"true"'
+            # allow = '"encrypted-media'
+            # code = base + album_id + '"' + ' width=' + width + ' height=' + height + ' frameborder=' + frame_border \
+            #     + ' allowtransparency=' + allow_transparency + ' allow=' + allow + '"></iframe>'
         else:
             print(str(i + 1), ':', 'artist:', artist, 'album:', album, 'available: No')
-            code = "Not available"
+            album_id = "Not available"
     else:
         print(str(i + 1), ':', 'artist:', artist, 'album:', album, 'available: No')
-        code = 'Not available'
+        album_id = 'Not available'
 
-    html.append(code)
+    album_ids.append(album_id)
 
-df['html'] = pd.Series(html)
+df['album_id'] = pd.Series(album_ids)
 
 # Output data to file
-df.to_csv("data/" + site + "_" + year + "_html.csv", index=False)
+df.to_csv("data/" + site + "_" + year + "_album-ids.csv", index=False)