What's New for Web

Adds Spotify's What's New feature to the web version
换行
// ==UserScript==
// @name            What's New for Web
// @description     Adds Spotify's What's New feature to the web version
// @version         1.0.0
// @author          j-weatherwax
// @homepageURL     https://github.com/j-weatherwax
// @match           https://open.spotify.com/*
// @license         MIT
// @namespace       https://github.com/j-weatherwax/whats-new-for-web
// @grant           none
// ==/UserScript==

(function() {
    'use strict';

    var mainCss = `
/**** What's New Button ****/
#sidebar { z-index: 9999; position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate(-40px, 64px); top: 0; right: 0; padding: 20px; width: 400px; max-height: 70%; border: 5px solid black; background-color: #121212; overflow: auto; }
`;

    var buttonHtml = `
<button class="Button-sc-1dqy6lx-0 fXEXug encore-over-media-set SFgYidQmrqrFEVh65Zrg" data-testid="user-widget-link" aria-label="What's New" data-encore-id="buttonTertiary" aria-expanded="false">
  <figure class="tp8rO9vtqBGPLOhwcdYv" title="What's New" style="width: 32px; height: 32px;">
    <div class="" style="width: 32px; height: 32px; inset-inline-start: 0px;">
      <div class="KdxlBanhDJjzmHfqhP0X m95Ymx847hCaxHjmyXKX" data-testid="placeholder-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
          <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
        </svg>
      </div>
    </div>
  </figure>
</button>
`;

    // -------------------------- OATH ------------------------------- //

    // Cryptographic helper functions
    function generateRandomString(length) {
        let text = '';
        let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

        for (let i = 0; i < length; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        return text;
    }

    async function generateCodeChallenge(codeVerifier) {
        function base64encode(string) {
            return btoa(String.fromCharCode.apply(null, new Uint8Array(string)))
                .replace(/\+/g, '-')
                .replace(/\//g, '_')
                .replace(/=+$/, '');
        }

        const encoder = new TextEncoder();
        const data = encoder.encode(codeVerifier);
        const digest = await window.crypto.subtle.digest('SHA-256', data);

        return base64encode(digest);
    }

    // ClientID can be public
    const clientId = 'cfeacce0918d4802964bffedd31b22b8';
    const redirectUri = 'https://open.spotify.com/';

    //Finish this later
    async function APIKeyInvalid(accessToken){
        const response = await fetch('https://api.spotify.com/v1/me', {
            headers: {
                Authorization: 'Bearer ' + accessToken
            }
        });

        const data = await response.json();
        //console.log(data)

        if (response.status == 401) {
            return true;
        }
        return false;
    }

    //If token is valid, return token. If it is not valid, request a new token and return that
    async function getAndValidateAccessToken(){
        const token = localStorage.getItem("access_token");
        if (APIKeyInvalid(token)){
            await requestNewAccessToken();
        }
        return localStorage.getItem("access_token");
    }

    async function requestNewAccessToken(){
        await fetch('https://accounts.spotify.com/api/token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            },
            body: new URLSearchParams({
                client_id: clientId,
                grant_type: 'refresh_token',
                refresh_token:localStorage.getItem("refresh_token"),
            }),
        }).then(response=>{
            return response.json();
        })
            .then(data=>{
            localStorage.setItem('access_token', data.access_token);
            localStorage.setItem('refresh_token', data.refresh_token);
        })
    }

    if (localStorage.getItem('access_token') == null) {
        // get the "code" from the URL.
        // After allowing access, the URL will contain a code stored in a URL parameter called "code"
        // Using this code, we can send a POST request to get our access token.
        const urlParams = new URLSearchParams(window.location.search);
        let code = urlParams.get('code');

        // 2 cases
        // case 1: User has just pressed "allow access", in this case the URL will contain the "code" parameter,
        // and we need to use it to fetch the access token.
        // case 2: User has previously granted access and we already generated and stored the access token in local storage.
        // In this case, we don't need to send a request to get the access token, instead we just read the token from local storage.
        if(code != null){
            let codeVerif = localStorage.getItem('code_verifier');

            let body = new URLSearchParams({
                grant_type: 'authorization_code',
                code: code,
                redirect_uri: redirectUri,
                client_id: clientId,
                code_verifier: codeVerif
            });

            const response = fetch('https://accounts.spotify.com/api/token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: body
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('HTTP status ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                localStorage.setItem('access_token', data.access_token);
                localStorage.setItem('refresh_token', data.refresh_token);
                //console.log(data)
                // If user has just authenticated, move on to main logic
                Main();
            })
            .catch(error => {
                console.error('Error:', error);
            });

        } else {
            // generate codeVerifier
            let codeVerifier = generateRandomString(128);

            // Generate CodeChallenge value, and open the spotify popup
            generateCodeChallenge(codeVerifier).then(codeChallenge => {
                let state = generateRandomString(16);
                let scope = 'user-read-private user-read-email user-follow-read';

                localStorage.setItem('code_verifier', codeVerifier);

                let args = new URLSearchParams({
                    response_type: 'code',
                    client_id: clientId,
                    scope: scope,
                    redirect_uri: redirectUri,
                    state: state,
                    code_challenge_method: 'S256',
                    code_challenge: codeChallenge
                });

                window.location = 'https://accounts.spotify.com/authorize?' + args;
            });
        }
    } else {
        //If authenticated sometime in the past, move on to main logic function
        localStorage.removeItem('market');
        Main();
    }

    // function to get user's info
    async function getProfile() {
        let accessToken = await getAndValidateAccessToken();
        const response = await fetch('https://api.spotify.com/v1/me', {
            headers: {
                Authorization: 'Bearer ' + accessToken
            }
        });

        const data = await response.json();
        localStorage.setItem('market', data.country);
    }

    // -------------------------- Logic ------------------------------- //
    // Fetch user's followed artists
    async function getFollowedArtists() {
        let accessToken = await getAndValidateAccessToken();

        const response = await fetch('https://api.spotify.com/v1/me/following?type=artist', {
            headers: {
                Authorization: 'Bearer ' + accessToken
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('HTTP status ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            return data;
        })
        .catch(error => {
            console.error('Error:', error);
        });
        return response;
    }

    // Fetch artist's released from the last two months
    const fetchArtistReleases = async (artistId) => {
        let accessToken = localStorage.getItem('access_token');
        let market = localStorage.getItem('market');

        const date = new Date();
        const twoMonthsAgo = new Date().setMonth(date.getMonth() - 2);

        const response = await fetch(`https://api.spotify.com/v1/artists/${artistId}/albums?include_groups=album,single&market=${market}&limit=50`, {
            headers: {
                'Authorization': `Bearer ${accessToken}`
            }
        });
        const data = await response.json();
        const albums = data.items.filter(album => Date.parse(album.release_date) >= twoMonthsAgo);
        return albums;
    };

    const fetchAlbums = async () => {
        const followedArtists = await getFollowedArtists();

        const newAlbums = [];

        let artistList = Object.values(followedArtists)[0];
        for (const i in artistList.items) {
            const artist = artistList.items[i];
            const albums = await fetchArtistReleases(artist.id);
            newAlbums.push(...albums);
        }

        return newAlbums;
    };

    function setDate(album){
        const releaseDate = document.createElement('p');
        releaseDate.classList.add('Type__TypeElement-sc-goli3j-0', 'ieTwfQ');
        releaseDate.setAttribute("data-encore-id", "type");

        const months = [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ];

        const today = new Date();
        const release = new Date(album.release_date);
        const difference = Math.floor((today - release)/ (1000 * 3600 * 24));
        if (difference < 1){
            releaseDate.innerHTML = "Today";
        } else if (difference == 1) {
            releaseDate.innerHTML = "1 day ago";
        } else if (difference <= 7) {
            releaseDate.innerHTML = `${difference} days ago`;
        } else {
            releaseDate.innerHTML = months[release.getMonth()] + ' ' + release.getDate();
        }
        return releaseDate;
    }

    function setArtists(album){
        const tempDiv = document.createElement('span');
        let counter = 1;
        for (const idx in album.artists){
            const artist = album.artists[idx];
            const artistInfo = document.createElement('a');
            artistInfo.setAttribute("draggable", "true");
            artistInfo.setAttribute("dir", "auto");
            artistInfo.setAttribute("href", artist.external_urls.spotify);
            artistInfo.setAttribute("tabindex", "-1");
            artistInfo.textContent = artist.name;
            tempDiv.appendChild(artistInfo)
            if (counter != album.artists.length){
                const comma = document.createElement('a');
                comma.style.textDecoration = "none";
                comma.innerHTML = ", ";
                tempDiv.appendChild(comma);
            }
            counter += 1;
        }
        return tempDiv;
    }

    function render(data) {
       return fetchAlbums()
            .then(albums => {
            //sort the fetched releases by recency
            albums.sort((a,b) => (Date.parse(a.release_date) < Date.parse(b.release_date)) ? 1 : -1)

            const sidebarContainer = document.createElement('div')

            //make the html for each release to insert into the sidebar
            const albumDivs = albums.map(album => {
                const albumDiv = document.createElement('div');
                var albumDivContainer = `
<div role="row sidebar-row" aria-rowindex="2" aria-selected="false">
    <div data-testid="tracklist-row" class="h4HgbO_Uu1JYg5UGANeQ wTUruPetkKdWAR1dd6w4" draggable="true" role="presentation" style="height: 72px;">
        <div class="gvLrgQXBFVW6m9MscfFA" role="gridcell" aria-colindex="2" tabindex="-1">
            <div class="iCQtmPqY0QvkumAOuCjr sidebar-info-row">
                <div class="CmkY1Ag0tJDfnFXbGgju n1EzbHQahSKztskTUAm3 album-art-div" aria-hidden="true" style="width: 100%; float: left; height: 64px;">
                </div>
                <div class="release-info" style="width: 100%; float: left; margin: 0px 16px; ">
                    <a draggable="false" class="t_yrXoUO3qGsJS4Y6iXX standalone-ellipsis-one-line" data-testid="internal-track-link" tabindex="-1"></a>
                    <span class="artistInfoList Type__TypeElement-sc-goli3j-0 bDHxRN rq2VQ5mb9SDAFWbBIUIn standalone-ellipsis-one-line" data-encore-id="type">

                    </span>
                </div>
            </div>
        </div>
    </div>
</div>`;
                albumDiv.innerHTML = albumDivContainer;
                albumDiv.style.padding = "2px 0px";

                const sidebarInfoRow = albumDiv.querySelector('.iCQtmPqY0QvkumAOuCjr')
                const albumArtDiv = albumDiv.querySelector('.album-art-div')

                const albumImage = document.createElement('img');
                albumImage.src = album.images[2].url;
                albumImage.alt = album.name;
                albumArtDiv.appendChild(albumImage);
                //albumImage.classList.add("mMx2LUixlnN_Fu45JpFB", "FqmFsMhuF4D0s35Z62Js", "Yn2Ei5QZn19gria6LjZj")

                const albumName = albumDiv.querySelector('.t_yrXoUO3qGsJS4Y6iXX')
                albumName.setAttribute("href", album.external_urls.spotify)
                albumName.textContent = album.name;

                const artistList = albumDiv.querySelector('.artistInfoList');
                artistList.appendChild(setArtists(album));

                //add release date for each album
                const release_info = albumDiv.querySelector('.release-info');
                //release_info.style.height = "64px";

                release_info.insertBefore(setDate(album), release_info.firstElementChild);
                //sidebarInfoRow.appendChild(albumName);

                return albumDiv;
            });
            albumDivs.forEach(albumDiv => {
                sidebarContainer.appendChild(albumDiv);
            })
            return sidebarContainer;
        })
            .catch(error => {
            console.error(error);
        });
    }

    // -------------------------- User interface ------------------------------- //
    function insertCss(css) {
        const style = document.createElement('style');
        style.appendChild(document.createTextNode(css));
        document.head.appendChild(style);
        return style;
    }
    async function createUI(buttonHtml) {
        let sidebarOpen = false
        const mainContainer = document.createElement('div');
        mainContainer.innerHTML = buttonHtml;
        // Get the button element within the div
        const whatsnewBtn = mainContainer.querySelector('button');
        whatsnewBtn.setAttribute('id','whats-new-btn');
        whatsnewBtn.addEventListener('mouseover', function () {
            whatsnewBtn.setAttribute('data-context-menu-open', 'true');
        });
        whatsnewBtn.addEventListener('mouseout', function () {
            whatsnewBtn.removeAttribute('data-context-menu-open');
        });

        //Create the sidebar
        const sidebar = document.createElement('div');
        sidebar.setAttribute('id','sidebar');
        sidebar.classList.add('EZFyDnuQnx5hw78phLqP');
        sidebar.style.display = 'none';
        document.body.appendChild(sidebar);

        // Add content to the sidebar
        render()
            .then(result => {
            sidebar.appendChild(result);
        })
            .catch(error => {
            console.error('Error:', error);
        });

        function toggleSidebar() {
            if (sidebarOpen) {
                // Close the sidebar
                sidebar.style.display = 'none';
                sidebarOpen = false;
            } else {
                // Open the sidebar
                sidebar.style.display = 'block';
                sidebarOpen = true;
            }
        }

        whatsnewBtn.addEventListener('click', toggleSidebar);

        let header = document.getElementsByClassName("facDIsOQo9q7kiWc4jSg")[0];
        header.insertBefore(mainContainer, header.lastElementChild);
    };

    // -------------------------- Main ------------------------------- //
    //Creates button for sidebar. If header div for button does not exist yet, wait 100ms before trying again.
    function Init() {
        if (document.getElementsByClassName("facDIsOQo9q7kiWc4jSg")[0] != null){
            createUI(buttonHtml);
        } else {
            setTimeout(() => {Init();}, 100);
        }
    }

    function Main() {
        insertCss(mainCss);
        Init();
        getProfile();
    }

})();
欢迎访问Greasy Fork镜像
