feat: add video package

.github/workflows/checks.yml

@@ -43,7 +43,7 @@ jobs:
     needs: build
     strategy:
       matrix:
-        package: [realtime, sdk, yjs, 'room'] 
+        package: [realtime, sdk, yjs, room, video] 
     steps:
       - name: Install pnpm
         uses: pnpm/action-setup@v4

package.json

@@ -5,7 +5,7 @@
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "watch": "turbo run watch --concurrency=12",
+    "watch": "turbo run watch --concurrency=13",
     "semantic-release": "turbo run semantic-release",
     "test:unit": "turbo run test:unit",
     "test:unit:watch": "turbo run test:unit:watch",

packages/video/.esbuild/build.js

@@ -0,0 +1,21 @@
+const { cjsConfig, esmConfig } = require('./config');
+const esbuild = require('esbuild');
+
+(async () => {
+  try {
+    await Promise.all([
+      esbuild.build({
+        ...cjsConfig,
+        outfile: 'dist/index.cjs.js',
+      }),
+
+      esbuild.build({
+        ...esmConfig,
+        outdir: 'dist',
+      }),
+    ]);
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+})();

packages/video/.esbuild/config.js

@@ -0,0 +1,53 @@
+require('dotenv').config();
+const { style } = require('./plugins/style-loader');
+
+const entries = Object.entries(process.env).filter((key) => key[0].startsWith('SDK_'));
+const env = Object.fromEntries(entries);
+
+const config = {
+  loader: {
+    '.png': 'file',
+    '.svg': 'file',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.eot': 'file',
+    '.ttf': 'file',
+  },
+  plugins: [style()],
+  bundle: true,
+  color: true,
+  minify: true,
+  logLevel: 'info',
+  sourcemap: true,
+  chunkNames: 'chunks/[name]-[hash]',
+  define: {
+    'process.env': JSON.stringify(env),
+  },
+};
+
+const esmConfig = {
+  ...config,
+  entryPoints: ['src/index.ts'],
+  bundle: true,
+  sourcemap: true,
+  minify: true,
+  splitting: true,
+  target: 'es6',
+  format: 'esm',
+  define: { global: 'window', 'process.env': JSON.stringify(env) },
+};
+
+const cjsConfig = {
+  ...config,
+  entryPoints: ['src/index.ts'],
+  bundle: true,
+  sourcemap: true,
+  minify: true,
+  platform: 'node',
+  target: ['node16'],
+};
+
+module.exports = {
+  esmConfig,
+  cjsConfig,
+};

packages/video/.esbuild/plugins/style-loader.js

@@ -0,0 +1,60 @@
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+
+module.exports = {
+  style({ minify = true, charset = 'utf8' } = {}) {
+    return {
+      name: 'style',
+      setup({ onResolve, onLoad }) {
+        const cwd = process.cwd();
+        const opt = { logLevel: 'silent', bundle: true, write: false, charset, minify };
+
+        onResolve({ filter: /\.css$/, namespace: 'file' }, (args) => {
+          const absPath = path.join(args.resolveDir, args.path);
+          const relPath = path.relative(cwd, absPath);
+          const resolved = fs.existsSync(absPath) ? relPath : args.path;
+          return { path: resolved, namespace: 'style-stub' };
+        });
+
+        onResolve({ filter: /\.css$/, namespace: 'style-stub' }, (args) => {
+          return { path: args.path, namespace: 'style-content' };
+        });
+
+        onResolve({ filter: /^__style_helper__$/, namespace: 'style-stub' }, (args) => ({
+          path: args.path,
+          namespace: 'style-helper',
+          sideEffects: false,
+        }));
+
+        onLoad({ filter: /.*/, namespace: 'style-helper' }, async () => ({
+          contents: `
+            export function injectStyle(text) {
+              if (typeof document !== 'undefined') {
+                const style = document.createElement('style')
+                style.id = 'superviz-style'
+                const node = document.createTextNode(text)
+                style.appendChild(node)
+                document.head.appendChild(style)
+              }
+            }
+          `,
+        }));
+
+        onLoad({ filter: /.*/, namespace: 'style-stub' }, async (args) => ({
+          contents: `
+            import { injectStyle } from "__style_helper__"
+            import css from ${JSON.stringify(args.path)}
+            injectStyle(css)
+          `,
+        }));
+
+        onLoad({ filter: /.*/, namespace: 'style-content' }, async (args) => {
+          const options = { entryPoints: [args.path], ...opt };
+          const { errors, warnings, outputFiles } = await esbuild.build(options);
+          return { errors, warnings, contents: outputFiles[0].text, loader: 'text' };
+        });
+      },
+    };
+  },
+};

packages/video/.esbuild/watch.js

@@ -0,0 +1,24 @@
+const { cjsConfig, esmConfig } = require('./config');
+const esbuild = require('esbuild');
+
+(async () => {
+  try {
+    const [cjsContext, esmContext] = await Promise.all([
+      esbuild.context({
+        ...cjsConfig,
+        outfile: 'dist/index.cjs.js',
+      }),
+
+      esbuild.context({
+        ...esmConfig,
+        outdir: 'dist',
+      }),
+    ]);
+
+    cjsContext.watch();
+    esmContext.watch();
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+})();

packages/video/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  root: true,
+  extends: ["@superviz/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.lint.json",
+    tsconfigRootDir: __dirname,
+  },
+};

packages/video/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  arrowParens: 'always',
+  printWidth: 100,
+  singleQuote: true,
+  tabWidth: 2,
+};

packages/video/.releaserc

@@ -0,0 +1,55 @@
+{
+  "branches": [
+    "main",
+    {
+      "name": "beta",
+      "channel": "beta",
+      "prerelease": true
+    },
+    {
+      "name": "lab",
+      "channel": "lab",
+      "prerelease": true
+    }
+  ],
+  "tagFormat": "@superviz/video/${version}",
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "angular",
+        "parserOpts": {
+          "noteKeywords": [
+            "BREAKING CHANGE",
+            "BREAKING CHANGES",
+            "BREAKING"
+          ]
+        },
+        "writerOpts": {
+          "commitsSort": [
+            "subject",
+            "scope"
+          ]
+        }
+      }
+    ],
+    "@anolilab/semantic-release-pnpm",
+    [
+      {
+        "assets": [
+          "package.json"
+        ],
+        "message": "release: @superviz/video/${nextRelease.version} \n\n${nextRelease.notes}"
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "successComment": ":tada: This issue has been resolved in version @superviz/video/${nextRelease.version} :tada:\n\nThe release is available on [GitHub release](<github_release_url>)"
+      } 
+    ]
+
+  ],
+  "preset": "angular"
+}

packages/video/.remote-config.js

@@ -0,0 +1 @@
+{"apiUrl":"https://localhost:3000","conferenceLayerUrl":"https://localhost:8080"}

packages/video/LICENSE

@@ -0,0 +1,25 @@
+BSD 2-Clause License
+
+Copyright (c) 2022, SuperViz
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/video/README.md

@@ -0,0 +1,11 @@
+<p align="center">
+  <a href="https://superviz.com/" target="blank"><img src="https://avatars.githubusercontent.com/u/56120553?s=200&v=4" width="120" alt="Nest Logo" /></a>
+</p>
+
+<p align="center">
+  <img alt="Discord" src="https://img.shields.io/discord/1171797567223378002">
+  <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/superviz/superviz">
+  <img alt="License" src="https://img.shields.io/github/license/superviz/superviz/video">
+  <img alt="npm type definitions" src="https://img.shields.io/npm/types/@superviz/superviz">
+  <img alt="Downloads" src="https://img.shields.io/npm/dw/@superviz/video">
+</p

packages/video/__mocks__/io.mock.ts

@@ -0,0 +1,54 @@
+import { jest } from '@jest/globals';
+import { Room } from '@superviz/socket-client';
+
+export const MOCK_IO = {
+  ClientState: {
+    CONNECTED: 'CONNECTED',
+    CONNECTING: 'CONNECTING',
+    DISCONNECTED: 'DISCONNECTED',
+    CONNECTION_ERROR: 'CONNECTION_ERROR',
+    RECONNECTING: 'RECONNECTING',
+    RECONNECT_ERROR: 'RECONNECT_ERROR',
+  },
+  PresenceEvents: {
+    JOINED_ROOM: 'presence.joined-room',
+    LEAVE: 'presence.leave',
+    ERROR: 'presence.error',
+    UPDATE: 'presence.update',
+  },
+  RoomEvents: {
+    JOIN_ROOM: 'room.join',
+    JOINED_ROOM: 'room.joined',
+    LEAVE_ROOM: 'room.leave',
+    UPDATE: 'room.update',
+    ERROR: 'room.error',
+  },
+  Realtime: class {
+    connection;
+
+    constructor(apiKey, environment, participant) {
+      this.connection = {
+        on: jest.fn(),
+        off: jest.fn(),
+      };
+    }
+
+    connect() {
+      return {
+        on: jest.fn(),
+        off: jest.fn(),
+        emit: jest.fn(),
+        disconnect: jest.fn(),
+        history: jest.fn(),
+        presence: {
+          on: jest.fn(),
+          off: jest.fn(),
+          get: jest.fn(),
+          update: jest.fn(),
+        },
+      } as unknown as Room;
+    }
+
+    destroy() {}
+  },
+};

packages/video/jest.config.js

@@ -0,0 +1,32 @@
+const { argv } = require('yargs');
+
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  collectCoverage: true,
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.ts',
+    '<rootDir>/src/**/*.js',
+    '!<rootDir>/src/web-components/**/*',
+    '!<rootDir>/src/index.ts',
+  ],
+  coverageDirectory: '<rootDir>/coverage',
+  coverageReporters: ['html', 'lcov'].concat(argv.coverage ? ['text'] : []),
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/dist/',
+    '/coverage/',
+    '/e2e/',
+    '/src/web-components',
+  ],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.js$': 'ts-jest',
+  },
+  setupFiles: ['<rootDir>/jest.setup.js'],
+  reporters: [
+    'default',
+    ['jest-ctrf-json-reporter', {}],
+  ],
+};