feat(PLAY-324): upgrade @flowplayer/player to latest canary, fix opts prop types

.circleci/config.yml

@@ -1,25 +1,13 @@
 version: 2.1
+orbs:
+  node: circleci/node@5.2.0
 jobs:
   build-demo:
-    docker:
-      - image: circleci/node:erbium-stretch
+    executor: node/default # use the default executor defined within the orb
     steps:
       - checkout
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
-      - run:
-          name: Install Dependencies
-          command: yarn install --immutable
-      - run:
-          name: Use latest Flowplayer canary
-          command: yarn upgrade @flowplayer/player@next
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+      - node/install-packages:
+          pkg-manager: yarn
       - run:
           name: Build demo
           command: yarn demo

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+name: test
+# Triggers the workflow on push or pull request events
+on: [pull_request]
+
+jobs:
+  danger-bot:
+    runs-on: ubuntu-latest
+    name: run typespec
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Find yarn cache
+        id: yarn-cache-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.yarn-cache-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Authenticate with private NPM package
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.PLAYBACK_NPM_PUBLISHING_TOKEN }}" > ~/.npmrc
+      - name: yarn install
+        run: yarn install --immutable
+      - name: build
+        run:  yarn build
+      - name: test typespec
+        run: yarn test:dts

demo/demo.tsx

@@ -61,7 +61,7 @@ const Main = () => {
             opts={{
               title: "Example title",
               description: "Example description",
-              poster: { },
+              poster: "https://picsum.photos/200/300",
               preview: { src: ANIMATED_PREVIEW }
             }}
           />

package.json

@@ -11,27 +11,29 @@
     "build": "tsc -d",
     "dev": "webpack serve -c demo/webpack.config.js",
     "demo": "webpack -c demo/webpack.config.js",
+    "test": "yarn test:dts",
+    "test:dts": "tsd --typings lib/index.d.ts --files ./test/index.test-d.tsx",
     "prepublish": "yarn build"
   },
   "peerDependencies": {
-    "@flowplayer/player": "^3.2.4",
+    "@flowplayer/player": "3.10.4-rc.4",
     "react": ">= 17.0.2"
   },
   "devDependencies": {
-    "@flowplayer/player": "^3.2.4",
+    "@flowplayer/player": "^3.10.4-rc.4",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "css-loader": "^5.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "style-loader": "^2.0.0",
     "ts-loader": "^9.3.1",
+    "tsd": "^0.31.0",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "4.9.2"
   },
-  "dependencies": {},
   "files": [
     "lib/*.js",
     "lib/*.d.ts"

src/flowplayer.tsx

@@ -4,11 +4,14 @@ import type { Config, ConfigWith } from "@flowplayer/player";
 import React, { useEffect, forwardRef, useRef, useImperativeHandle } from "react";
 import flowplayer from "@flowplayer/player";
 
+type KeyValue = Record<string, any>;
+
 // - Types
 type Props = {
   token: Config["token"],
   src: Config["src"],
-  opts?: Omit<ConfigWith<any>, "token" | "src">
+  // allow custom plugin config
+  opts?: Omit<Config, "token" | "src"> & KeyValue
 }
 
 // - Components

src/hooks.tsx

@@ -1,7 +1,6 @@
 import { RefObject, useEffect, useMemo, useState } from "react";
 import flowplayer from "@flowplayer/player";
-import { Plugin } from "@flowplayer/player/plugin";
-
+import type { Plugin } from "@flowplayer/player";
 /**
  * Hook to use Flowplayer API in an async way - tries to solve the chicken/egg problem
  */

test/index.test-d.tsx

@@ -0,0 +1,63 @@
+import { expectType, expectError } from "tsd";
+import Flowplayer, { useFlowplayer } from "../lib";
+import React, { useRef } from "react";
+import { Player } from "@flowplayer/player";
+
+// - useFlowplayer returns Player instance -
+const playerRef = useRef<HTMLDivElement>(null);
+const playerApi = useFlowplayer(playerRef);
+expectType<Player | null>(playerApi);
+
+// - basic initalization -
+const _uplayer = (
+  <Flowplayer src={"demoSrc"} token={"DEMO_TOKEN"} ref={playerRef} />
+);
+
+// - missing src throws err -
+expectError(<Flowplayer token={"DEMO_TOKEN"} ref={playerRef} />);
+
+// - opts basic -
+const _uplayerWithOpts = (
+  <Flowplayer
+    src={"demoSrc"}
+    token={"DEMO_TOKEN"}
+    ref={playerRef}
+    opts={{
+      title: "Example title",
+      description: "Example description",
+      autopause: true,
+    }}
+  />
+);
+
+// - opts with plugins -
+const _uplayerWithPlugins = (
+  <Flowplayer
+    src={"demoSrc"}
+    token={"DEMO_TOKEN"}
+    ref={playerRef}
+    opts={{
+      title: "Example title",
+      description: "Example description",
+      cueponts: [
+        {
+          startTime: 1,
+          endTime: 2,
+          text: "df",
+        },
+      ],
+    }}
+  />
+);
+
+// - opts wrong types  -
+expectError(
+  <Flowplayer
+    src={"demoSrc"}
+    token={"DEMO_TOKEN"}
+    ref={playerRef}
+    opts={{
+      title: 2,
+    }}
+  />,
+);

tsconfig.json

@@ -3,6 +3,9 @@
         "src/*",
         "demo/index.d.ts"
     ],
+    "exclude": [
+        "test/**/*.test-d.tsx" // we have a separate task where types are tested
+    ],
     "compilerOptions": {
         "target": "es2015",
         "jsx": "react",