{section === RoundSection.START ? (
diff --git a/src/components/Title/index.tsx b/src/components/Title/index.tsx
index 80860ca..ae5d8e3 100644
--- a/src/components/Title/index.tsx
+++ b/src/components/Title/index.tsx
@@ -1,5 +1,4 @@
import { useState } from "react";
-
import { motion } from "framer-motion";
import useGame, { progressGameFlow } from "@/modules/state";
diff --git a/src/config.ts b/src/config.ts
index 306f97c..ce5ebf9 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,5 @@
interface Configuration {
+ SPOTIFY_APP_CLIENT_ID: string;
SPOTIFY_WEB_PLAYBACK_DEVICE_NAME: string;
SPOTIFY_WEB_PLAYBACK_VOLUME: number;
SPOTIFY_WEB_PLAYBACK_VOLUME_DECREASED: number;
@@ -8,7 +9,8 @@ interface Configuration {
}
const config: Configuration = {
- SPOTIFY_WEB_PLAYBACK_DEVICE_NAME: "Remix Internal Player",
+ SPOTIFY_APP_CLIENT_ID: "449cdfc9cf4f43a1a5c709315fde8bd3",
+ SPOTIFY_WEB_PLAYBACK_DEVICE_NAME: "Remix Internal Player", // This will show in all Spotify clients when the player is active.
SPOTIFY_WEB_PLAYBACK_VOLUME: 0.75, // Must be between 0 and 1
SPOTIFY_WEB_PLAYBACK_VOLUME_DECREASED: 0.1, // Plays between rounds
ROUND_INDICATOR_DISPLAY_TIME_IN_SECONDS: 2,
diff --git a/src/modules/spotify/auth.ts b/src/modules/spotify/auth.ts
new file mode 100644
index 0000000..922fa92
--- /dev/null
+++ b/src/modules/spotify/auth.ts
@@ -0,0 +1,53 @@
+import config from "@/config";
+
+const clientId = config.SPOTIFY_APP_CLIENT_ID;
+const redirectUri = "http://localhost:8080"; // @TODO Change me
+
+function generateRandomString(length: number) {
+ let text = "";
+ let possible =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+ for (let i = 0; i < length; i++) {
+ text += possible.charAt(Math.floor(Math.random() * possible.length));
+ }
+ return text;
+}
+
+let codeVerifier = generateRandomString(128);
+
+async function generateCodeChallenge(codeVerifier: string) {
+ function base64encode(string: any) {
+ 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);
+}
+
+export const authenticate = () => {
+ generateCodeChallenge(codeVerifier).then(codeChallenge => {
+ let state = generateRandomString(16);
+ let scope = "user-read-private user-read-email"; // @TODO Change me
+
+ 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;
+ });
+}
diff --git a/src/modules/spotify/index.ts b/src/modules/spotify/index.ts
index c8332e8..ffbe576 100644
--- a/src/modules/spotify/index.ts
+++ b/src/modules/spotify/index.ts
@@ -10,7 +10,7 @@ const prepareSpotifyWebPlaybackSDKReadyCallback = (): void => {
// Create a global callback called onSpotifyWebPlaybackSDKReady
// This will be called when the SDK is ready and Spotify.Player is available
//
skips type checking on window
- (window).onSpotifyWebPlaybackSDKReady = () => {
+ (window as any).onSpotifyWebPlaybackSDKReady = () => {
// You can now initialize Spotify.Player and use the SDK
useSpotify.setState({ sdkReady: true });
@@ -23,7 +23,7 @@ const prepareSpotifyWebPlaybackSDKReadyCallback = (): void => {
}
};
- const player: SpotifyPlayer = new (window).Spotify.Player(
+ const player: SpotifyPlayer = new (window as any).Spotify.Player(
spotifyPlayerConstructorOptions
);
diff --git a/src/modules/spotify/web-api.ts b/src/modules/spotify/web-api.ts
index ee969db..0a0768a 100644
--- a/src/modules/spotify/web-api.ts
+++ b/src/modules/spotify/web-api.ts
@@ -60,14 +60,14 @@ export const requestTracksData = async (ids: string[]): Promise => {
export const playTrack = async (
uri: string,
- offset?: number
+ offsetMs?: number
): Promise => {
const body: Record = {
uris: [uri]
};
- if (offset) {
- body["position_ms"] = offset;
+ if (offsetMs) {
+ body["position_ms"] = offsetMs;
}
const response = await fetch(
diff --git a/src/util.ts b/src/util.ts
index 4c48fa3..b7aa023 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -34,3 +34,7 @@ export const splitArrayIntoChunks = (
}
return chunks;
};
+
+export const getLastElementOfArray = (array: T[]): T => {
+ return array[array.length - 1];
+}
\ No newline at end of file
From 1aabc0d5f36eb4f2645ba57ee0092c2287340c32 Mon Sep 17 00:00:00 2001
From: Jakub <34782021+jakub-studio@users.noreply.github.com>
Date: Fri, 21 Apr 2023 15:29:03 +0100
Subject: [PATCH 3/3] ImageBackdrop refactor
---
src/components/Config/index.tsx | 9 +++--
src/components/ImageBackdrop.tsx | 25 ------------
.../ImageBackdrop/backdrop.module.css | 13 +++++++
src/components/ImageBackdrop/index.tsx | 39 +++++++++++++++++++
src/components/Title/index.tsx | 2 +-
5 files changed, 59 insertions(+), 29 deletions(-)
delete mode 100644 src/components/ImageBackdrop.tsx
create mode 100644 src/components/ImageBackdrop/backdrop.module.css
create mode 100644 src/components/ImageBackdrop/index.tsx
diff --git a/src/components/Config/index.tsx b/src/components/Config/index.tsx
index f56cc6a..343e1c9 100644
--- a/src/components/Config/index.tsx
+++ b/src/components/Config/index.tsx
@@ -6,16 +6,19 @@ import useSpotify from "@/modules/spotify/state";
import { setSpotifyToken } from "@/modules/spotify/token";
import { connectSpotifyPlayer } from "@/modules/spotify";
import { progressGameFlow } from "@/modules/state";
+import ImageBackdrop from "../ImageBackdrop";
const ConfigWrapper: React.FC = ({ children }) => {
return (
-
+
+
-
Remix Icebreaker Game
+ Remix
{children}
-
+
-
- {children}
-