Switch to npm

.ci/azure-pipelines.yml

@@ -34,22 +34,22 @@ jobs:
           - task: Cache@2
             displayName: 'Check Cache'
             inputs:
-                key: 'yarn | yarn.lock'
+                key: 'npm | package-lock.json'
                 path: 'node_modules'
                 cacheHitVar: CACHE_RESTORED
 
-          - script: 'yarn install --frozen-lockfile'
+          - script: 'npm ci --no-audit'
             displayName: 'Install Dependencies'
             condition: ne(variables.CACHE_RESTORED, 'true')
 
           - script: 'sh ./scripts/updateversion.sh'
             displayName: 'Update version in package.json'
 
-          - script: 'yarn build:development'
+          - script: 'npm run build:development'
             displayName: 'Build Development'
             condition: eq(variables['BuildConfiguration'], 'development')
 
-          - script: 'yarn build:production'
+          - script: 'npm run build:production'
             displayName: 'Build Bundle'
             condition: eq(variables['BuildConfiguration'], 'production')
 

.github/dependabot.yml

@@ -19,3 +19,12 @@ updates:
     prefix: fix
     prefix-development: chore
     include: scope
+
+- package-ecosystem: github-actions
+  directory: '/'
+  schedule:
+    interval: daily
+    time: '00:00'
+  open-pull-requests-limit: 10
+  commit-message:
+    prefix: actions

.github/workflows/lint.yaml

@@ -9,8 +9,8 @@ on:
       - master
 
 jobs:
-    lint-js:
-        name: Lint JS/TS
+  lint:
+    name: Lint TS and CSS
     runs-on: ubuntu-latest
 
     steps:
@@ -22,53 +22,21 @@ jobs:
         with:
           node-version: 14
 
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
 
       - name: Cache node_modules
         uses: actions/cache@v2
-              id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        id: npm-cache
         with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-                      ${{ runner.os }}-yarn-
+            ${{ runner.os }}-npm-
 
       - name: Install dependencies
-              run: yarn install --frozen-lockfile
+        run: npm ci --no-audit
 
       - name: Run ESLint
-              run: yarn run lint:code
-
-    lint-css:
-        name: Lint CSS
-        runs-on: ubuntu-latest
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v2
-
-            - name: Setup node env
-              uses: actions/setup-node@v2.1.2
-              with:
-                  node-version: 14
-
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn cache dir)"
-
-            - name: Cache node_modules
-              uses: actions/cache@v2
-              id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
-
-            - name: Install dependencies
-              run: yarn install --frozen-lockfile
-
-            - name: Run stylelint
-              run: yarn run lint:css
+        run: npm run lint

.github/workflows/test.yaml

@@ -22,21 +22,21 @@ jobs:
         with:
           node-version: 14
 
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Get npm cache directory path
+        id: npm-cache-dir-path
+        run: echo "::set-output name=dir::$(npm config get cache)"
 
       - name: Cache node_modules
         uses: actions/cache@v2
-              id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        id: npm-cache
         with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-                      ${{ runner.os }}-yarn-
+            ${{ runner.os }}-npm-
 
       - name: Install dependencies
-              run: yarn install --frozen-lockfile
+        run: npm ci --no-audit
 
       - name: Run tests
-              run: yarn run test
+        run: npm run test

.npmrc

@@ -0,0 +1 @@
+fund=false

CONTRIBUTING.md

@@ -4,7 +4,7 @@
 
 ### Development Environment
 
-The development environment is setup with editorconfig, Code style is enforced by prettier and eslint for Javascipt/Typescript linting
+The development environment is setup with editorconfig. Code style is enforced by prettier and eslint for Javascript/Typescript linting
 
 -   [editorconfig](https://editorconfig.org/)
 -   [prettier](https://prettier.io/)
@@ -14,13 +14,13 @@ The development environment is setup with editorconfig, Code style is enforced b
 
 | name          | required | description                                                | default if not set |
 | ------------- | -------- | ---------------------------------------------------------- | ------------------ |
-| RECEIVER_PORT | No       | The port used for the dev server when `yarn serve` is used | 9000               |
+| RECEIVER_PORT | No       | The port used for the dev server when `npm start` is used | 9000               |
 
 ### Building/Using
 
-`yarn build:development` - Build a development version
-`yarn serve` / `yarn start` - Build a development version and start a dev server
-`yarn build:production` - Build a production version
+`npm run build:development` - Build a development version
+`npm start` - Build a development version and start a dev server
+`npm run build:production` - Build a production version
 
 ## Pull Requests
 

package.json

@@ -53,6 +53,9 @@
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.4.1"
   },
+  "engines": {
+    "yarn": "YARN NO LONGER USED - use npm instead."
+  },
   "homepage": "https://jellyfin.org/",
   "husky": {
     "hooks": {
@@ -65,17 +68,16 @@
     "url": "git+https://github.com/jellyfin/jellyfin-chromecast.git"
   },
   "scripts": {
-        "build:development": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --mode=development",
-        "build:production": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --mode=production",
-        "lint": "yarn lint:code && yarn lint:css",
+    "build:development": "TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --mode=development",
+    "build:production": "TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --mode=production",
+    "lint": "npm run lint:code && npm run lint:css && npm run prettier",
     "lint:code": "eslint --ext .ts,.js .",
     "lint:css": "stylelint ./src/css/*.css",
     "postinstall": "fixpack",
-        "prepare": "yarn build:production",
-        "pretest": "fixpack && yarn lint && yarn prettier",
+    "prepare": "npm run build:production",
     "prettier": "prettier --check .",
-        "serve": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack serve --config webpack.config.ts",
+    "start": "TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack serve --config webpack.config.ts",
     "test": "jest --passWithNoTests",
-        "watch": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --watch"
+    "watch": "TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --watch"
   }
 }

scripts/updateversion.sh

@@ -1,4 +1,2 @@
-cat package.json \
-    | jq --indent 4 '.version = .version + "_'$BUILD_BUILDNUMBER'"' \
-    > package.json.tmp \
-    && mv package.json.tmp package.json
+package_json="$(cat package.json | jq '.version = .version + "-'$BUILD_BUILDNUMBER'"')"
+echo "$package_json" > package.json

src/components/commandHandler.ts

@@ -24,7 +24,7 @@ import { playbackManager } from './playbackManager';
 import { DocumentManager } from './documentManager';
 
 export abstract class CommandHandler {
-    private static playerManager: cast.framework.PlayerManager;
+    private static playerManager: framework.PlayerManager;
     private static playbackManager: playbackManager;
     private static supportedCommands: SupportedCommands = {
         PlayNext: CommandHandler.playNextHandler,
@@ -53,7 +53,7 @@ export abstract class CommandHandler {
     };
 
     static configure(
-        playerManager: cast.framework.PlayerManager,
+        playerManager: framework.PlayerManager,
         playbackManager: playbackManager
     ): void {
         this.playerManager = playerManager;

src/components/maincontroller.ts

@@ -82,10 +82,8 @@ export function onMediaElementPlaying(): void {
     reportEvent('playstatechange', true);
 }
 
-function onMediaElementVolumeChange(event: cast.framework.system.Event): void {
-    window.volume = (<cast.framework.system.SystemVolumeChangedEvent>(
-        event
-    )).data;
+function onMediaElementVolumeChange(event: framework.system.Event): void {
+    window.volume = (<framework.system.SystemVolumeChangedEvent>event).data;
     console.log('Received volume update: ' + window.volume.level);
     if (JellyfinApi.serverAddress !== null) reportEvent('volumechange', true);
 }
@@ -628,12 +626,9 @@ export function setTextTrack(index: number | null): void {
             return;
         }
 
-        const tracks: Array<cast.framework.messages.Track> = textTracksManager.getTracks();
-        const subtitleTrack:
-            | cast.framework.messages.Track
-            | undefined = tracks.find(function (
-            track: cast.framework.messages.Track
-        ) {
+        const tracks: Array<framework.messages.Track> = textTracksManager.getTracks();
+        const subtitleTrack: framework.messages.Track | undefined = tracks.find(
+            (track: framework.messages.Track) => {
                 return track.trackId === index;
         });
         if (subtitleTrack && subtitleTrack.trackId !== undefined) {
@@ -696,7 +691,7 @@ export function createMediaInformation(
     playSessionId: string,
     item: BaseItemDto,
     streamInfo: any
-): cast.framework.messages.MediaInformation {
+): framework.messages.MediaInformation {
     const mediaInfo = new cast.framework.messages.MediaInformation();
     mediaInfo.contentId = streamInfo.url;
     mediaInfo.contentType = streamInfo.contentType;
@@ -764,7 +759,7 @@ if (!PRODUCTION) {
 
     window.mediaManager.addEventListener(
         cast.framework.events.category.CORE,
-        (event: cast.framework.events.Event) => {
+        (event: framework.events.Event) => {
             console.log('Core event: ' + event.type);
             console.log(event);
         }

src/components/playbackManager.ts

@@ -31,12 +31,12 @@ import { BaseItemDto } from '~/api/generated/models/base-item-dto';
 import { MediaSourceInfo } from '~/api/generated/models/media-source-info';
 
 export class playbackManager {
-    private playerManager: cast.framework.PlayerManager;
+    private playerManager: framework.PlayerManager;
     // TODO remove any
     private activePlaylist: Array<BaseItemDto>;
     private activePlaylistIndex: number;
 
-    constructor(playerManager: cast.framework.PlayerManager) {
+    constructor(playerManager: framework.PlayerManager) {
         // Parameters
         this.playerManager = playerManager;
 

src/types/global.d.ts

@@ -1,3 +1,9 @@
+import { cast } from 'chromecast-caf-receiver';
+import {
+    CastReceiverContext,
+    PlayerManager
+} from 'chromecast-caf-receiver/cast.framework';
+import { SystemVolumeData } from 'chromecast-caf-receiver/cast.framework.system';
 import { RepeatMode } from '../api/generated/models/repeat-mode';
 import { BaseItemDto } from '../api/generated/models/base-item-dto';
 
@@ -98,8 +104,8 @@ declare global {
     export interface Window {
         deviceInfo: DeviceInfo;
         mediaElement: HTMLElement | null;
-        mediaManager: cast.framework.PlayerManager;
-        castReceiverContext: cast.framework.CastReceiverContext;
+        mediaManager: PlayerManager;
+        castReceiverContext: CastReceiverContext;
         playlist: Array<any>;
         currentPlaylistIndex: number;
         repeatMode: RepeatMode;
@@ -107,6 +113,6 @@ declare global {
         subtitleAppearance: any;
         MaxBitrate: number | undefined;
         senderId: string | undefined;
-        volume: cast.framework.system.SystemVolumeData;
+        volume: SystemVolumeData;
     }
 }