Spotify embed player

Author: Dean Sofer

.env.example

@@ -1,2 +1,4 @@
 APIFY_TOKEN=apify_api_1234567890
-GOOGLE_TOKEN=your_google_maps_api_key_here
+GOOGLE_TOKEN=your_google_maps_api_key_here
+SPOTIFY_CLIENT_ID=your_spotify_client_id_here
+SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here

.github/workflows/deploy.yml

@@ -29,9 +29,13 @@ jobs:
         env:
           APIFY_TOKEN: ${{ secrets.APIFY_TOKEN }}
           GOOGLE_TOKEN: ${{ secrets.GOOGLE_TOKEN }}
+          SPOTIFY_CLIENT_ID: ${{ secrets.SPOTIFY_CLIENT_ID }}
+          SPOTIFY_CLIENT_SECRET: ${{ secrets.SPOTIFY_CLIENT_SECRET }}
         run: |
           sed -i "s/__APIFY_TOKEN__/${APIFY_TOKEN}/g" map.js
           sed -i "s/__GOOGLE_TOKEN__/${GOOGLE_TOKEN}/g" index.html
+          sed -i "s/YOUR_SPOTIFY_CLIENT_ID/${SPOTIFY_CLIENT_ID}/g" 19hz/map.js
+          sed -i "s/YOUR_SPOTIFY_CLIENT_SECRET/${SPOTIFY_CLIENT_SECRET}/g" 19hz/map.js
 
       - name: Setup Pages
         uses: actions/configure-pages@v4

19hz/map.js

@@ -2,6 +2,18 @@
 // Delimiter for multiple category selections (must not appear in category names and not require URI encoding)
 const CATEGORY_DELIMITER = '~';
 
+// Spotify API configuration
+// For production, these should be loaded from environment variables or a secure backend
+const SPOTIFY_CLIENT_ID = 'YOUR_SPOTIFY_CLIENT_ID';
+const SPOTIFY_CLIENT_SECRET = 'YOUR_SPOTIFY_CLIENT_SECRET';
+
+// Cache for Spotify access token
+let spotifyAccessToken = null;
+let spotifyTokenExpiry = null;
+
+// Cache for artist IDs to avoid repeated API calls
+const artistIdCache = new Map();
+
 const intersectionObserver = new IntersectionObserver((entries) => {
   for (const entry of entries) {
     if (entry.isIntersecting) {
@@ -11,6 +23,90 @@ const intersectionObserver = new IntersectionObserver((entries) => {
   }
 });
 
+/**
+ * Gets a Spotify access token using client credentials flow
+ * @returns {Promise<string>} Access token
+ */
+async function getSpotifyAccessToken() {
+  if (SPOTIFY_CLIENT_ID === 'YOUR_SPOTIFY_CLIENT_ID' || 
+      SPOTIFY_CLIENT_SECRET === 'YOUR_SPOTIFY_CLIENT_SECRET') {
+    console.warn('Spotify API credentials not configured. Please add SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET.');
+    return null;
+  }
+  
+  if (spotifyAccessToken && spotifyTokenExpiry && Date.now() < spotifyTokenExpiry) {
+    return spotifyAccessToken;
+  }
+  
+  try {
+    const response = await fetch('https://accounts.spotify.com/api/token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Authorization': 'Basic ' + btoa(SPOTIFY_CLIENT_ID + ':' + SPOTIFY_CLIENT_SECRET)
+      },
+      body: 'grant_type=client_credentials'
+    });
+    
+    if (!response.ok) {
+      throw new Error(`Spotify auth failed: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    spotifyAccessToken = data.access_token;
+    spotifyTokenExpiry = Date.now() + (data.expires_in * 1000) - 60000;
+    
+    return spotifyAccessToken;
+  } catch (error) {
+    console.error('Failed to get Spotify access token:', error);
+    return null;
+  }
+}
+
+/**
+ * Searches Spotify for an artist and returns their ID
+ * @param {string} artistName - Name of the artist to search for
+ * @returns {Promise<string|null>} Spotify artist ID or null if not found
+ */
+async function searchSpotifyArtist(artistName) {
+  if (artistIdCache.has(artistName)) {
+    return artistIdCache.get(artistName);
+  }
+  
+  const token = await getSpotifyAccessToken();
+  if (!token) {
+    return null;
+  }
+  
+  try {
+    const response = await fetch(
+      `https://api.spotify.com/v1/search?q=${encodeURIComponent(artistName)}&type=artist&limit=1`,
+      {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      }
+    );
+    
+    if (!response.ok) {
+      throw new Error(`Spotify search failed: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    if (data.artists && data.artists.items && data.artists.items.length > 0) {
+      const artistId = data.artists.items[0].id;
+      artistIdCache.set(artistName, artistId);
+      return artistId;
+    }
+    
+    return null;
+  } catch (error) {
+    console.error(`Failed to search for artist "${artistName}":`, error);
+    return null;
+  }
+}
+
 // Global variable to track user location marker
 let userLocationMarker = null;
 
@@ -369,10 +465,57 @@ window.viewEventDetails = function(eventIndex) {
  * Updates the Spotify player to search for a specific artist
  * @param {string} artistName - The artist name to search for
  */
-window.updateSpotifyPlayer = function(artistName) {
+window.updateSpotifyPlayer = async function(artistName) {
   const spotifyPlayer = document.getElementById('spotify-player');
-  if (spotifyPlayer) {
-    spotifyPlayer.src = `https://open.spotify.com/embed/search/${encodeURIComponent(artistName)}`;
+  if (!spotifyPlayer) {
+    return;
+  }
+  
+  const container = spotifyPlayer.parentElement;
+  
+  // Show loading state
+  spotifyPlayer.style.display = 'none';
+  if (!container.querySelector('.spotify-loading')) {
+    const loadingDiv = document.createElement('div');
+    loadingDiv.className = 'spotify-loading';
+    loadingDiv.style.cssText = 'text-align: center; padding: 20px; color: #666; font-size: 14px;';
+    loadingDiv.textContent = `Loading ${artistName}...`;
+    container.appendChild(loadingDiv);
+  }
+  
+  try {
+    const artistId = await searchSpotifyArtist(artistName);
+    
+    const loadingDiv = container.querySelector('.spotify-loading');
+    if (loadingDiv) {
+      loadingDiv.remove();
+    }
+    
+    if (artistId) {
+      // Use the proper artist embed URL with the artist ID
+      spotifyPlayer.src = `https://open.spotify.com/embed/artist/${artistId}`;
+      spotifyPlayer.style.display = 'block';
+    } else {
+      console.warn(`Could not find Spotify artist ID for: ${artistName}`);
+      spotifyPlayer.style.display = 'none';
+      
+      // Show error message
+      const errorDiv = document.createElement('div');
+      errorDiv.className = 'spotify-error';
+      errorDiv.style.cssText = 'text-align: center; padding: 20px; color: #999; font-size: 12px;';
+      errorDiv.textContent = `Artist "${artistName}" not found on Spotify`;
+      container.appendChild(errorDiv);
+      
+      // Remove error after 3 seconds
+      setTimeout(() => errorDiv.remove(), 3000);
+    }
+  } catch (error) {
+    console.error(`Error updating Spotify player for ${artistName}:`, error);
+    const loadingDiv = container.querySelector('.spotify-loading');
+    if (loadingDiv) {
+      loadingDiv.remove();
+    }
+    spotifyPlayer.style.display = 'none';
   }
 };
 
@@ -692,11 +835,11 @@ class Events {
           return `<a href="https://open.spotify.com/search/${encodeURIComponent(artist)}" target="_blank">${artist}</a>${speakerIcon}`;
         }).join(', ');
 
-        // Create Spotify embed player
+        // Create Spotify embed player placeholder
         spotifyPlayerHTML = `
           <iframe id="spotify-player" 
             style="border-radius: 12px; margin-top: 10px;" 
-            src="https://open.spotify.com/embed/search/${encodeURIComponent(firstArtist)}" 
+            src="" 
             width="100%" 
             height="152" 
             frameBorder="0" 
@@ -712,14 +855,19 @@ class Events {
           <p><strong>Genres:</strong> ${event.categories.map(category => `<a onclick="filter({category:'${category}'})">${category}</a>`).join(', ')}</p>
           ${hasValidArtists ? `<p><strong>Artists:</strong> ${artistsHTML}</p>` : ''}
           <p><strong>Age:</strong> ${ageInfo}</p>
-          ${spotifyPlayerHTML}
         </div>
         <div class="info-body">
           ${spotifyPlayerHTML}
         </div>
       `;
 
       this.cachedInfoWindow.setContent(content);
+      
+      // Load first artist after content is set
+      if (hasValidArtists) {
+        const artists = artistsInfo.split(',').map(artist => artist.trim());
+        updateSpotifyPlayer(artists[0]);
+      }
     }
     return this.cachedInfoWindow;
   }

AGENTS.md

@@ -4,4 +4,5 @@ The website is entirely static files
 The site is hosted on github on the branch gh-pages branch The site is hosted at funcheapsfmap.com
 Do not add comments, use full variable names instead of single letters, leave out optional characters when possible, only target the latest (evergreen) browsers on computer and mobile.
 The website javascript downloads a json payload from an apify endpoint which is updated every other day by crawling funcheapsf.com and contains roughly 1500 blog pages crawled including event metadata and html.
+The 19hz subdirectory includes Spotify integration that requires SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET to be configured. The integration queries the Spotify API to get artist IDs and embeds the Spotify artist player in event info windows.
 Use screenshots to demonstrate changes. 

README.md

@@ -17,11 +17,20 @@ Latest version has a button to quickly add events to your calendar of choice
    cp .env.example .env
    ```
 
-2. Add your Apify API token and Google Maps API key to `.env`:
+2. Add your API keys to `.env`:
    ```
    APIFY_TOKEN=your_actual_apify_token_here
    GOOGLE_TOKEN=your_actual_google_maps_api_key_here
+   SPOTIFY_CLIENT_ID=your_spotify_client_id_here
+   SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here
    ```
+   
+   **To get Spotify API credentials:**
+   - Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
+   - Log in with your Spotify account
+   - Click "Create app"
+   - Fill in app name and description
+   - Copy the Client ID and Client Secret
 
 3. Open `index.html` in your browser directly, or use a local server:
    ```bash
@@ -36,14 +45,16 @@ The site automatically deploys to GitHub Pages when you push to the `gh-pages` b
 
 **Required GitHub Secrets:**
 
-You need to add your Apify API token and Google Maps API key as GitHub secrets:
+You need to add your API tokens as GitHub secrets:
 
 1. Go to your repository on GitHub
 2. Navigate to **Settings** → **Secrets and variables** → **Actions**
 3. Click **New repository secret**
 4. Add the following secrets:
    - Name: `APIFY_TOKEN`, Value: Your Apify API token
    - Name: `GOOGLE_TOKEN`, Value: Your Google Maps API key
+   - Name: `SPOTIFY_CLIENT_ID`, Value: Your Spotify Client ID
+   - Name: `SPOTIFY_CLIENT_SECRET`, Value: Your Spotify Client Secret
 5. Click **Add secret** for each
 
 The GitHub Actions workflow will automatically inject these tokens into the JavaScript files at build time.

style.css

@@ -136,6 +136,10 @@ html, body, #map-canvas {
       transform: scale(0.95);
     }
   }
+  #spotify-player {
+    min-height: 152px;
+    background: #f5f5f5;
+  }
 }
 
 /* google.maps.InfoWindow Body */