dolbyio-samples · turbidwater · Sep 11, 2023 · Sep 11, 2023 · Sep 12, 2023 · Sep 12, 2023
diff --git a/README.md b/README.md
@@ -26,6 +26,8 @@ This project is setup as a monorepo, and contains the following:
 
 - Publisher app (under `apps/publisher`)
 - Viewer/subscriber app (under `apps/viewer`)
+- Hosted viewer/subscriber app (under `apps/hosted-viewer`)
+- Dev app for testing the hosted viewer (under `apps/hosted-viewer-harness`)
 - Tests (under `apps/e2e-test/*` )
 - Shared components/hooks (under `libs/*`)
 - Storybook stories (under `.apps/stories/*`)
@@ -56,7 +58,7 @@ Once created, you can grab the stream name, publisher token and stream ID from t
 
 ![tokens screenshot](docs/img/tokens.png)
 
-For your application to pick these values up, you can either set them as environment variables or store them in a `.env` file. The `.env` file must be under `apps/publisher/` and `apps/viewer/`.
+For your application to pick these values up, you can either set them as environment variables or store them in a `.env` file. The `.env` file must be under `apps/publisher/`, `apps/viewer/`, `apps/hosted-viewer`, and `apps/hosted-viewer-harness`.
 
 ```bash
 VITE_RTS_STREAM_NAME=<your stream name>
@@ -102,6 +104,20 @@ To run your app in dev mode, run the following command in your terminal and open
 yarn nx serve viewer
 ```
 
+#### Running the hosted-viewer app
+
+To run your app in dev mode, run the following command in your terminal and open the browser:
+
+```bash
+yarn nx serve hosted-viewer
+```
+
+If you want to run your hosted-viewer through an app with an iframe, run the above command and then run the following command in your terminal and open the browser to the URL output in the console:
+
+```bash
+yarn nx serve hosted-viewer-harness
+```
+
 ## Features, roadmap and limitations
 
 ### RTS Publisher

diff --git a/apps/hosted-viewer-harness/.env.example b/apps/hosted-viewer-harness/.env.example
@@ -0,0 +1,2 @@
+VITE_RTS_STREAM_NAME=<YOUR_STREAM_NAME>
+VITE_RTS_ACCOUNT_ID=<YOUR_ACCOUNT_ID>
diff --git a/apps/hosted-viewer-harness/.eslintrc.json b/apps/hosted-viewer-harness/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/hosted-viewer-harness/index.html b/apps/hosted-viewer-harness/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/DolbyIO-favicon-32x32.webp" sizes="32x32" />
+    <link rel="icon" href="/DolbyIO-favicon-192x192.webp" sizes="192x192" />
+    <link rel="apple-touch-icon" href="/DolbyIO-favicon-180x180.webp" />
+    <meta name="msapplication-TileImage" content="/DolbyIO-favicon-270x270.webp" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hosted Viewer Harness</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/hosted-viewer-harness/jest.config.ts b/apps/hosted-viewer-harness/jest.config.ts
@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default {
+  displayName: 'hosted-viewer-harness',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/hosted-viewer-harness',
+};
diff --git a/apps/hosted-viewer-harness/project.json b/apps/hosted-viewer-harness/project.json
@@ -0,0 +1,93 @@
+{
+  "name": "hosted-viewer-harness",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/hosted-viewer-harness/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nxext/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/hosted-viewer-harness",
+        "baseHref": "/",
+        "configFile": "apps/hosted-viewer-harness/vite.config.ts"
+      },
+      "configurations": {
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/hosted-viewer-harness/src/environments/environment.ts",
+              "with": "apps/hosted-viewer-harness/src/environments/environment.prod.ts"
+            }
+          ]
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nxext/vite:dev",
+      "options": {
+        "outputPath": "dist/apps/hosted-viewer-harness",
+        "baseHref": "/",
+        "configFile": "apps/hosted-viewer-harness/vite.config.ts"
+      },
+      "configurations": {
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/hosted-viewer-harness/src/environments/environment.ts",
+              "with": "apps/hosted-viewer-harness/src/environments/environment.prod.ts"
+            }
+          ]
+        }
+      }
+    },
+    "preview": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "vite preview -c apps/hosted-viewer-harness/vite.config.ts"
+      },
+      "dependsOn": ["build"]
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/hosted-viewer-harness/**/*.{ts,js,tsx,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/hosted-viewer-harness/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "e2e": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": false,
+        "commands": [
+          "yarn nx test-hosted-viewer-harness e2e-test --skip-nx-cache --report=./apps/e2e-test/reports/hosted-viewer-harness/"
+        ]
+      }
+    },
+    "e2e-report": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": false,
+        "commands": [
+          "yarn nx test-report e2e-test --skip-nx-cache --report=./apps/e2e-test/reports/hosted-viewer-harness/"
+        ]
+      }
+    },
+    "deploy": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "bash apps/deploy.sh 'dist/apps/hosted-viewer-harness' 'cosmic-dango-2cc8f7'"
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/apps/hosted-viewer-harness/public/DolbyIO-favicon-180x180.webp b/apps/hosted-viewer-harness/public/DolbyIO-favicon-180x180.webp
diff --git a/apps/hosted-viewer-harness/public/DolbyIO-favicon-192x192.webp b/apps/hosted-viewer-harness/public/DolbyIO-favicon-192x192.webp
diff --git a/apps/hosted-viewer-harness/public/DolbyIO-favicon-270x270.png b/apps/hosted-viewer-harness/public/DolbyIO-favicon-270x270.png
diff --git a/apps/hosted-viewer-harness/public/DolbyIO-favicon-32x32.webp b/apps/hosted-viewer-harness/public/DolbyIO-favicon-32x32.webp
diff --git a/apps/hosted-viewer-harness/src/app.tsx b/apps/hosted-viewer-harness/src/app.tsx
@@ -0,0 +1,22 @@
+import { Heading, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import './styles/app.css';
+const { VITE_RTS_ACCOUNT_ID, VITE_RTS_STREAM_NAME } = import.meta.env;
+const App = () => {
+  return (
+    <VStack background="background" height="100%" padding="24px" spacing="24px" width="100%">
+      <Heading as="h1" fontSize="32px" test-id="harnessHeader">
+        Hosted Viewer Harness
+      </Heading>
+      <iframe
+        src={`http://localhost:5173?streamId=${VITE_RTS_ACCOUNT_ID}/${VITE_RTS_STREAM_NAME}`}
+        allowFullScreen
+        width="640"
+        height="480"
+      ></iframe>
+    </VStack>
+  );
+};
+
+export default App;
diff --git a/apps/hosted-viewer-harness/src/assets/.gitkeep b/apps/hosted-viewer-harness/src/assets/.gitkeep
diff --git a/apps/hosted-viewer-harness/src/environments/environment.prod.ts b/apps/hosted-viewer-harness/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};
diff --git a/apps/hosted-viewer-harness/src/environments/environment.ts b/apps/hosted-viewer-harness/src/environments/environment.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};
diff --git a/apps/hosted-viewer-harness/src/main.tsx b/apps/hosted-viewer-harness/src/main.tsx
@@ -0,0 +1,14 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import dolbyioTheme from '@millicast-react/dolbyio-theme';
+
+import App from './app';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  // <React.StrictMode>
+  <ChakraProvider theme={dolbyioTheme}>
+    <App />
+  </ChakraProvider>
+  // </React.StrictMode>
+);
diff --git a/apps/hosted-viewer-harness/src/polyfills.ts b/apps/hosted-viewer-harness/src/polyfills.ts
@@ -0,0 +1 @@
+import 'core-js/stable';
diff --git a/apps/hosted-viewer-harness/src/styles/app.css b/apps/hosted-viewer-harness/src/styles/app.css
@@ -0,0 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;600;700;900&display=swap');
+
+body,
+html,
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+h1 {
+  color: white;
+  font-size: 32px;
+}
diff --git a/apps/hosted-viewer-harness/src/vite-env.d.ts b/apps/hosted-viewer-harness/src/vite-env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_RTS_STREAM_NAME: string;
+  readonly VITE_RTS_ACCOUNT_ID: string;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare const __APP_VERSION__: string;
diff --git a/apps/hosted-viewer-harness/tsconfig.app.json b/apps/hosted-viewer-harness/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": ["**/*.spec.ts", "**/*.test.ts"],
+  "include": ["**/*.ts", "**/*.tsx"]
+}
diff --git a/apps/hosted-viewer-harness/tsconfig.json b/apps/hosted-viewer-harness/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/apps/hosted-viewer-harness/tsconfig.spec.json b/apps/hosted-viewer-harness/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
diff --git a/apps/hosted-viewer-harness/vite.config.ts b/apps/hosted-viewer-harness/vite.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import eslint from 'vite-plugin-eslint';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), react(), eslint()],
+  define: {
+    __APP_VERSION__: JSON.stringify('2.1.0'),
+  },
+  preview: {
+    open: false,
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id: { includes: (arg0: string) => unknown; toString: () => string }) {
+          if (id.includes('node_modules')) {
+            return id.toString().split('node_modules/')[1].split('/')[0].toString();
+          }
+        },
+      },
+    },
+    emptyOutDir: false,
+    outDir: 'dist/apps/hosted-viewer-harness',
+  },
+});
diff --git a/apps/hosted-viewer/.env.example b/apps/hosted-viewer/.env.example
@@ -0,0 +1,2 @@
+VITE_RTS_STREAM_NAME=<YOUR_STREAM_NAME>
+VITE_RTS_ACCOUNT_ID=<YOUR_ACCOUNT_ID>
diff --git a/apps/hosted-viewer/.eslintrc.json b/apps/hosted-viewer/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/hosted-viewer/index.html b/apps/hosted-viewer/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/DolbyIO-favicon-32x32.webp" sizes="32x32" />
+    <link rel="icon" href="/DolbyIO-favicon-192x192.webp" sizes="192x192" />
+    <link rel="apple-touch-icon" href="/DolbyIO-favicon-180x180.webp" />
+    <meta name="msapplication-TileImage" content="/DolbyIO-favicon-270x270.webp" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RTS Hosted Viewer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_RTS_STREAM_NAME=<YOUR_STREAM_NAME>
		VITE_RTS_ACCOUNT_ID=<YOUR_ACCOUNT_ID>