Merge branch 'main' into oyvind/catalogue

tidal-music · May 10, 2024 · 05e12d4 · 05e12d4
2 parents f7bde71 + 0538ab8
commit 05e12d4
Show file tree

Hide file tree

Showing 44 changed files with 7,225 additions and 5,502 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -4,5 +4,5 @@
 
 /packages/ @tidal-music/tidal-web-platform
 /packages/auth/ @MathiasTim
-/packages/event-producer @TheHaff
+/packages/event-producer @tidal-music/tidal-web-platform
 /packages/player @enjikaka
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -7,7 +7,7 @@ runs:
     - name: Install package manager
       uses: pnpm/action-setup@v3
       with:
-        version: 8.15.4
+        version: 9.1.0
     - name: Set up Node.js w/ version from .nvmrc
       uses: actions/setup-node@v4
       with:

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -14,6 +14,11 @@ on:
     paths:
       - packages/true-time/**
       - packages/player/**
+  merge_group:
+    types: [checks_requested]
+    paths:
+      - packages/true-time/**
+      - packages/player/**
 
 concurrency:
   group: cypress-${{ github.event.pull_request.number || github.ref }}

diff --git a/.github/workflows/fossa-scan.yml b/.github/workflows/fossa-scan.yml
@@ -1,6 +1,7 @@
 name: FOSSA Scans
 
 on:
+  push:
   workflow_call:
 
 jobs:
@@ -14,6 +15,7 @@ jobs:
             uses: fossas/[email protected]
             with:
               api-key: ${{secrets.FOSSAAPIKEY}}
+              debug: true
 
           - name: "FOSSA Tests"
             id: fossa-tests

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -2,6 +2,8 @@ name: Pull Request
 
 on:
   pull_request:
+  merge_group:
+    type: [checks_requested]
 
 jobs:
   fossa-scans:

diff --git a/.github/workflows/trigger-releases.yml b/.github/workflows/trigger-releases.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - name: Get changed files
         id: changed-files 
-        uses: tj-actions/changed-files@v42
+        uses: tj-actions/changed-files@v44
         with:
           files: packages/**/package.json
       - name: Build matrix input

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.11.1
+20.12.2
diff --git a/eslint.config.js b/eslint.config.js
@@ -48,7 +48,7 @@ export default [
       'no-restricted-syntax': [
         'error',
         {
-          message: 'Never use Date.now! always use TrueTime',
+          message: 'Never use Date.now! always use trueTime.now()',
           selector:
             'CallExpression[callee.object.name="Date"][callee.property.name="now"]',
         },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tidal-music/tidal-sdk-web",
-  "packageManager": "pnpm@8.15.4",
+  "packageManager": "pnpm@9.1.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,13 +17,14 @@
   "devDependencies": {
     "eslint": "8.57.0",
     "eslint-config-tidal": "3.2.0",
-    "eslint-plugin-disable-autofix": "4.2.0",
-    "eslint-plugin-jsdoc": "48.2.0",
-    "typedoc": "0.25.10"
+    "eslint-plugin-disable-autofix": "4.3.0",
+    "eslint-plugin-jsdoc": "48.2.3",
+    "typedoc": "0.25.13",
+    "vitest": "1.6.0"
   },
   "engines": {
     "node": ">=20.11.1",
-    "pnpm": ">=8.6.7"
+    "pnpm": ">=9.1.0"
   },
   "prettier": {
     "arrowParens": "avoid",
@@ -35,7 +36,7 @@
   ],
   "pnpm": {
     "patchedDependencies": {
-      "shaka-player@4.7.11": "patches/shaka-player@4.7.11.patch"
+      "shaka-player@4.8.2": "patches/shaka-player@4.8.2.patch"
     }
   }
 }
diff --git a/packages/auth/README.md b/packages/auth/README.md
@@ -25,7 +25,7 @@ This authentication method uses `clientId` and `clientSecret`, e.g. when utilizi
 ## Authorization Code Flow (user login)
 (Only available for TIDAL internally developed applications for now)
 
-To implement the login redirect flow, follow these steps or refer to our example for ["login redirect"](./examples/login-redirect.html).
+To implement the login redirect flow, follow these steps or refer to our example for ["authorization code"](./examples/authorization-code.html).
 
 1. Initiate the process by calling the `init` function.
 2. For the first login:

diff --git a/packages/auth/examples/login-redirect.html → ...ges/auth/examples/authorization-code.html b/packages/auth/examples/login-redirect.html → ...ges/auth/examples/authorization-code.html
@@ -12,12 +12,16 @@
     #forceRefreshBtn {
       max-width: 300px;
     }
+
+    #searchField {
+      margin-top: 20px;
+    }
   </style>
 </head>
 
 <body>
   <a href="../">Back to all examples</a>
-  <h1>Login redirect</h1>
+  <h1>Authorization code</h1>
   <p>
     This example showcases how to login through login.tidal.com and get redirected back to your app.
     You need a properly configured clientId, which is tied to a secure redirect uri.
@@ -26,7 +30,7 @@ <h1>Login redirect</h1>
   </p>
 
 
-  <form id="loginRedirectForm">
+  <form id="authorizationCodeForm">
     <label>
       <span>Client Id</span>
       <input type="text" name="clientId" required />
@@ -42,10 +46,15 @@ <h1>Login redirect</h1>
   <div id="userInfo"></div>
 
   <button id="logoutBtn">Logout</button>
-  <button id="getUserBtn">Get user</button>
   <button id="forceRefreshBtn">Force Refresh (sub status)</button>
 
-  <script type="module" src="./login-redirect.js"></script>
+  <label>
+    <input type="search" name="search" placeholder="search for artists" id="searchField" />
+  </label>
+
+  <ul id="searchResults"></ul>
+
+  <script type="module" src="./authorization-code.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/packages/auth/examples/login-redirect.js → packages/auth/examples/authorization-code.js b/packages/auth/examples/login-redirect.js → packages/auth/examples/authorization-code.js
@@ -1,10 +1,11 @@
 import { finalizeLogin, init, initializeLogin, logout } from '../dist';
 
-import { getUserInfo } from './shared';
+import { debounce, getUserInfo, searchForArtist } from './shared';
 
 window.addEventListener('load', () => {
-  const form = document.getElementById('loginRedirectForm');
+  const form = document.getElementById('authorizationCodeForm');
   const logoutButton = document.getElementById('logoutBtn');
+  const searchField = document.getElementById('searchField');
 
   form?.addEventListener('submit', event => {
     submitHandler(event).catch(error => console.error(error));
@@ -17,6 +18,17 @@ window.addEventListener('load', () => {
   });
 
   loadHandler().catch(error => console.error(error));
+
+  searchField?.addEventListener(
+    'keyup',
+    debounce(event => {
+      if (event.target.value.length > 0) {
+        searchForArtist(event.target.value).catch(error =>
+          console.error(error),
+        );
+      }
+    }, 500),
+  );
 });
 
 const submitHandler = async event => {
@@ -34,7 +46,7 @@ const submitHandler = async event => {
   await init({
     clientId,
     clientUniqueKey: 'test',
-    credentialsStorageKey: 'loginRedirect',
+    credentialsStorageKey: 'authorizationCode',
   });
 
   const loginUrl = await initializeLogin({
@@ -47,35 +59,28 @@ const submitHandler = async event => {
 const loadHandler = async () => {
   const clientId = localStorage.getItem('clientId');
   const redirectUri = localStorage.getItem('redirectUri');
-  const form = document.getElementById('loginRedirectForm');
+  const form = document.getElementById('authorizationCodeForm');
 
   if (clientId && redirectUri) {
     form.style.display = 'none';
 
     await init({
       clientId,
       clientUniqueKey: 'test',
-      credentialsStorageKey: 'loginRedirect',
+      credentialsStorageKey: 'authorizationCode',
     });
 
     if (window.location.search.length > 0) {
       await finalizeLogin(window.location.search);
-      window.location.replace('/examples/login-redirect.html');
+      window.location.replace('/examples/authorization-code.html');
     } else {
       await getUserInfo();
-      document.getElementById('getUserBtn').style.display = 'block';
+      document.getElementById('searchField').style.display = 'block';
       document.getElementById('forceRefreshBtn').style.display = 'block';
     }
   }
 };
 
-document.getElementById('getUserBtn')?.addEventListener('click', () => {
-  const userInfo = document.getElementById('userInfo');
-  // clear userInfo to make sure its filled again
-  userInfo.innerHTML = '';
-  getUserInfo().catch(error => console.error(error));
-});
-
 document.getElementById('forceRefreshBtn')?.addEventListener('click', () => {
   const userInfo = document.getElementById('userInfo');
   // clear userInfo to make sure its filled again

diff --git a/packages/auth/examples/shared.js b/packages/auth/examples/shared.js
@@ -1,41 +1,37 @@
 import { credentialsProvider } from '../dist';
 
 /**
- * fetch user info and display in DOM
+ * Gets the token from the SDK, extracts the user id and displays it
  *
  * @param {string?} apiSubStatus
  */
 export const getUserInfo = async apiSubStatus => {
   const credentials = await credentialsProvider.getCredentials(apiSubStatus);
 
-  const headers = new Headers({
-    Accept: 'application/json',
-    Authorization: `Bearer ${credentials.token}`,
-  });
-  const response = await window.fetch('https://login.tidal.com/oauth2/me', {
-    headers,
-  });
-  const userJson = await response.json();
-  const userInfo = document.getElementById('userInfo');
+  try {
+    const decodedToken = base64UrlDecode(credentials.token);
+    const userInfo = document.getElementById('userInfo');
 
-  if (userInfo && response.ok) {
-    userInfo.innerHTML = `<h3>User id: ${userJson.userId}</h3>`;
-    userInfo.innerHTML += `<h3>Email: ${userJson.email}</h3>`;
+    if (userInfo && decodedToken) {
+      userInfo.innerHTML = `<h3>User id: ${decodedToken.uid}</h3>`;
 
-    const logoutBtn = document.getElementById('logoutBtn');
-    logoutBtn.style.display = 'block';
+      const logoutBtn = document.getElementById('logoutBtn');
+      logoutBtn.style.display = 'block';
+    }
+  } catch (error) {
+    console.error(error);
   }
 };
 
 /**
  * Search for an artist and display the results in the DOM.
  *
- * @param {string} artistId
+ * @param {string} query
  */
-export const searchForArtist = async artistId => {
+export const searchForArtist = async query => {
   const searchResults = document.getElementById('searchResults');
   const credentials = await credentialsProvider.getCredentials();
-  const searchResult = await search(credentials.token, artistId, 'ARTISTS');
+  const searchResult = await search(credentials.token, query, 'ARTISTS');
 
   searchResults.innerHTML = '';
 
@@ -53,7 +49,8 @@ export const searchForArtist = async artistId => {
  * Fetches an artists and adds it name to DOM.
  *
  * @param {string} token
- * @param {string} artistId
+ * @param {string} query
+ * @param {string} type
  */
 export const search = async (token, query, type) => {
   const queryString = new URLSearchParams({
@@ -90,3 +87,18 @@ export function debounce(func, timeout = 300) {
     }, timeout);
   };
 }
+
+/**
+ * Decodes a base64 url encoded access token.
+ *
+ * @param {string} token
+ * @returns {{uid:number}}
+ */
+const base64UrlDecode = token => {
+  try {
+    const [, body] = token.split('.');
+    return JSON.parse(globalThis.atob(body));
+  } catch (error) {
+    console.error(error);
+  }
+};
diff --git a/packages/auth/index.html b/packages/auth/index.html
@@ -13,11 +13,11 @@
   <h1>Auth module examples</h1>
   <ul>
     <li><a href="./examples/client-credentials.html">Client Credentials</a></li>
-    <li><a href="./examples/login-redirect.html">Login redirect</a></li>
+    <li><a href="./examples/authorization-code.html">Authorization code</a></li>
     <li><a href="./examples/limited-input-device.html">Limited input device (e.g. TVs)</a></li>
     <li><a href="./examples/setting-credentials.html">Setting credentials</a></li>
   </ul>
 
 </body>
 
-</html>
+</html>
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tidal-music/auth",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "type": "module",
   "files": [
     "dist"
@@ -40,11 +40,11 @@
     "@tidal-music/true-time": "workspace:^"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "1.3.1",
-    "@vitest/ui": "1.3.1",
-    "typescript": "5.3.3",
-    "vite": "5.1.4",
-    "vite-plugin-dts": "3.7.3",
-    "vitest": "1.3.1"
+    "@vitest/coverage-v8": "1.6.0",
+    "@vitest/ui": "1.6.0",
+    "typescript": "5.4.5",
+    "vite": "5.2.11",
+    "vite-plugin-dts": "3.9.1",
+    "vitest": "1.6.0"
   }
 }
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -38,11 +38,11 @@
     "@tidal-music/common": "workspace:*"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "1.3.1",
-    "@vitest/ui": "1.3.1",
-    "typescript": "5.3.3",
-    "vite": "5.1.4",
-    "vite-plugin-dts": "3.7.3",
-    "vitest": "1.3.1"
+    "@vitest/coverage-v8": "1.6.0",
+    "@vitest/ui": "1.6.0",
+    "typescript": "5.4.5",
+    "vite": "5.2.11",
+    "vite-plugin-dts": "3.9.1",
+    "vitest": "1.6.0"
   }
 }