Code

.github/actions/setup/action.yml

@@ -0,0 +1,19 @@
+name: Setup repo and pnpm
+description: Gets pnpm and runs commands necessary before executing other steps
+runs:
+  using: composite
+  steps:
+    # https://pnpm.io/continuous-integration
+    - name: Install package manager
+      uses: pnpm/action-setup@v3
+      with:
+        version: 8.15.4
+    - name: Set up Node.js w/ version from .nvmrc
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        registry-url: 'https://registry.npmjs.org'
+        cache: 'pnpm'
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install --frozen-lockfile

.github/workflows/cypress.yml

@@ -0,0 +1,45 @@
+name: Cypress
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - 'src/'
+      - 'cypress/'
+      - 'cypress.config.cjs'
+      - 'pnpm-lock.yaml'
+  pull_request:
+    branches: [ "main" ]
+    paths:
+      - 'src/'
+      - 'cypress/'
+      - 'cypress.config.cjs'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: cypress-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Set up Cypress binary cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        env:
+          EMBED_API_TOKEN: ${{ secrets.EMBED_API_TOKEN }}
+        with:
+          install: false
+          browser: chrome
+          build: pnpm gh-action:build
+          start: pnpm gh-action:start
+          wait-on: 'http://localhost:3000/tracks/1766030'
+          command: pnpm cypress:run

.github/workflows/lint-css.yml

@@ -0,0 +1,23 @@
+name: Linting CSS
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - '**.css'
+      - 'pnpm-lock.yaml'
+  pull_request:
+    branches: [ "main" ]
+    paths:
+      - '**.css'
+      - 'pnpm-lock.yaml'
+
+jobs:
+  lint-css:
+    runs-on: ubuntu-latest
+    name: Stylelint
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Run Lint Checks
+        run: pnpm lint:css

.github/workflows/lint-js.yml

@@ -0,0 +1,31 @@
+name: Linting JS
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - '**.js'
+      - 'pnpm-lock.yaml'
+  pull_request:
+    branches: [ "main" ]
+    paths:
+      - '**.js'
+      - 'pnpm-lock.yaml'
+
+jobs:
+  lint-js:
+    runs-on: ubuntu-latest
+    name: Eslint
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Run Lint Checks
+        run: pnpm lint:js
+  type-check:
+    runs-on: ubuntu-latest
+    name: TypeScript
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Run Type Checks
+        run: pnpm typecheck

.github/workflows/web-test-runner.yml

@@ -0,0 +1,29 @@
+name: Web Test Runner
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - '**.js'
+      - 'pnpm-lock.yaml'
+  pull_request:
+    branches: [ "main" ]
+    paths:
+      - '**.js'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: wtr-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  web-test-runner:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Install Playwright Browsers
+        run: pnpm dlx playwright install --with-deps
+      - name: Run unit tests
+        run: pnpm test

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.env
+dist/
+.DS_Store
+cypress/downloads
+cypress/screenshots
+cypress/videos

.nvmrc

@@ -0,0 +1 @@
+20.12.2

.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "declaration-empty-line-before": null,
+    "selector-class-pattern": null,
+    "alpha-value-notation": "number",
+    "color-function-notation": "legacy",
+    "at-rule-allowed-list": [
+      "media",
+      "keyframes",
+      "nest",
+      "import"
+    ]
+  }
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "[javascript][typescript][typescriptreact][json]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.experimental.useFlatConfig": true,
+  "cSpell.words": [
+    "Retryable",
+    "typecheck"
+  ]
+}

README.md

@@ -0,0 +1,12 @@
+# TIDAL Embed Player
+
+[![Linting CSS](https://github.com/tidal-music/embed-player/actions/workflows/lint-css.yml/badge.svg?branch=main)](https://github.com/tidal-music/embed-player/actions/workflows/lint-css.yml) [![Linting JS](https://github.com/tidal-music/embed-player/actions/workflows/lint-js.yml/badge.svg?branch=main)](https://github.com/tidal-music/embed-player/actions/workflows/lint-js.yml) [![Web Test Runner](https://github.com/tidal-music/embed-player/actions/workflows/web-test-runner.yml/badge.svg?branch=main)](https://github.com/tidal-music/embed-player/actions/workflows/web-test-runner.yml) [![Cypress](https://github.com/tidal-music/embed-player/actions/workflows/cypress.yml/badge.svg?branch=main)](https://github.com/tidal-music/embed-player/actions/workflows/cypress.yml)
+
+## Environment Variables
+
+| Variable Name | Description |
+| ------------- | ----------- |
+| EMBED_API_TOKEN | Your TIDAL API token |
+| TRACK_JS_TOKEN | Specify along with TRACK_JS_APPLICATION to include TrackJS |
+| TRACK_JS_APPLICATION | Specify along with TRACK_JS_TOKEN to include TrackJS |
+

cypress.config.cjs

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    supportFile: false
+  },
+  video: false
+});

cypress/e2e/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "env": {
+    "cypress/globals": true
+  }
+}

cypress/e2e/external-link.cy.js

@@ -0,0 +1,20 @@
+import { bootIntoVideo, bootIntoGridPlaylist } from './helpers.js';
+
+const selectors = {
+  externalLinkFinishedDialog: '.dialog--finished .external-link',
+  externalLinkMediaItemList: '.media-item-list-wrapper .external-link'
+};
+
+describe('External link', () => {
+  it('exists in finished dialog', () => {
+    bootIntoVideo();
+
+    cy.get(selectors.externalLinkFinishedDialog).should('exist');
+  });
+
+  it('exists in media item list', () => {
+    bootIntoGridPlaylist();
+
+    cy.get(selectors.externalLinkMediaItemList).should('exist');
+  });
+});

cypress/e2e/fullscreen.cy.js

@@ -0,0 +1,57 @@
+import { bootIntoVideo } from './helpers.js';
+
+const selectors = {
+  wrapper: '.embed-player',
+  playPauseButton: '.play-pause-button',
+  toggleFullscreenButton: '.toggle-fullscreen',
+  hidingVictim: '.ui-hide-cleaning-victim'
+};
+
+const stateClasses = {
+  fullscreenEnabled: '.fullscreen-enabled',
+  fullscreenActive: '.fullscreen-active',
+  mediaIsPlayingClass: '.media-is-playing'
+};
+
+describe('Fullscreen', () => {
+  it('has toggle fullscreen button if fullscreen is supported', () => {
+    bootIntoVideo();
+    cy.get(stateClasses.fullscreenEnabled).should('exist');
+    cy.get(selectors.toggleFullscreenButton).should('exist');
+  });
+
+  // User gesture enforcement blocking cypress from opening full screen,
+  it.skip('opens fullscreen when clicking toggle fullscreen button', () => {
+    bootIntoVideo();
+
+    cy.get(selectors.playPauseButton).click();
+    cy.get(stateClasses.mediaIsPlayingClass).should('exist');
+
+    // Cypress does not have "hover", need to force click of hidden element.
+    cy.get(selectors.toggleFullscreenButton).click({ force: true });
+    cy.get(stateClasses.fullscreenActive).should('exist');
+  });
+});
+
+/*
+'Closes fullscreen when clicking toggle fullscreen button in fullscreen' (browser) {
+    bootIntoVideo(browser)
+      .click(playPauseButton)
+      .waitForElementPresent(mediaIsPlayingClass)
+      .click(toggleFullscreenButton)
+      .waitForElementPresent(fullscreenActive)
+      .click(toggleFullscreenButton)
+      .waitForElementNotPresent(fullscreenActive);
+  },
+
+  'Hides the UI after some seconds of inactivity after mouse move' (browser) {
+    bootIntoVideo(browser)
+      .click(playPauseButton)
+      .waitForElementPresent(mediaIsPlayingClass)
+      .click(toggleFullscreenButton)
+      .waitForElementPresent(fullscreenActive)
+      .click(toggleFullscreenButton)
+      .pause(3000)
+      .assert.hidden(hidingVictim);
+  }
+*/