├── .nvmrc
├── .gitignore
├── packages
    ├── app
    │   ├── .env
    │   ├── .eslintignore
    │   ├── src
    │   │   ├── react-app-env.d.ts
    │   │   ├── polyfills.ts
    │   │   ├── global.d.ts
    │   │   ├── webxr-polyfill.d.ts
    │   │   ├── components
    │   │   │   ├── ui
    │   │   │   │   ├── GroupControl.tsx
    │   │   │   │   ├── Control.tsx
    │   │   │   │   ├── GroupControlElement.tsx
    │   │   │   │   └── UI.tsx
    │   │   │   ├── util
    │   │   │   │   └── ConditionalWrapper.tsx
    │   │   │   ├── VrPlayer.tsx
    │   │   │   ├── DebugPlayer.tsx
    │   │   │   └── App.tsx
    │   │   ├── setupTests.ts
    │   │   ├── util
    │   │   │   └── debounce.ts
    │   │   ├── atoms
    │   │   │   └── controls.ts
    │   │   ├── worker
    │   │   │   └── videoRecognition.worker
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── videoRecognition.spec.ts
    │   │   │   │   └── videoRecognition.ts
    │   │   ├── index.css
    │   │   ├── helper
    │   │   │   ├── util.ts
    │   │   │   └── getImageFrames.ts
    │   │   ├── index.tsx
    │   │   ├── hooks
    │   │   │   └── useXRSession.ts
    │   │   ├── logo.svg
    │   │   ├── service-worker.ts
    │   │   └── serviceWorkerRegistration.ts
    │   ├── public
    │   │   ├── robots.txt
    │   │   ├── favicon.ico
    │   │   ├── thumbnail.png
    │   │   ├── favicon-16x16.png
    │   │   ├── favicon-32x32.png
    │   │   ├── mstile-150x150.png
    │   │   ├── apple-touch-icon.png
    │   │   ├── android-chrome-192x192.png
    │   │   ├── android-chrome-512x512.png
    │   │   ├── browserconfig.xml
    │   │   ├── manifest.json
    │   │   ├── index.html
    │   │   └── safari-pinned-tab.svg
    │   ├── postcss.config.js
    │   ├── tailwind.config.js
    │   ├── .gitignore
    │   ├── .eslintrc
    │   ├── tsconfig.json
    │   ├── package.json
    │   └── README.md
    └── player
    │   ├── .eslintignore
    │   ├── .gitignore
    │   ├── src
    │       ├── primitive
    │       │   ├── index.ts
    │       │   ├── primitive.ts
    │       │   ├── square.ts
    │       │   └── sphere.ts
    │       ├── types.ts
    │       ├── index.ts
    │       └── renderer
    │       │   ├── renderProps.ts
    │       │   ├── debugRenderer.ts
    │       │   ├── vrRenderer.ts
    │       │   └── renderer.ts
    │   ├── .eslintrc
    │   ├── package.json
    │   └── tsconfig.json
├── .npmrc
├── .prettierrc
├── .ncurc.js
├── README.md
├── .editorconfig
├── .vscode
    ├── settings.json
    └── launch.json
├── package.json
├── LICENCE
├── .eslintrc
├── .gitattributes
└── org
    └── icon.svg


/.nvmrc:
--------------------------------------------------------------------------------
1 | 16.13
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/packages/app/.env:
--------------------------------------------------------------------------------
1 | BROWSER = 'none'
2 | 


--------------------------------------------------------------------------------
/packages/player/.eslintignore:
--------------------------------------------------------------------------------
1 | lib
2 | 


--------------------------------------------------------------------------------
/packages/player/.gitignore:
--------------------------------------------------------------------------------
1 | lib
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | legacy-peer-deps=true
3 | 


--------------------------------------------------------------------------------
/packages/app/.eslintignore:
--------------------------------------------------------------------------------
1 | build
2 | tailwind.config.js
3 | postcss.config.js
4 | 


--------------------------------------------------------------------------------
/packages/app/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/packages/player/src/primitive/index.ts:
--------------------------------------------------------------------------------
1 | export * from './primitive';
2 | export * from './sphere';
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "all",
4 |   "proseWrap": "always"
5 | }
6 | 


--------------------------------------------------------------------------------
/packages/app/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/packages/app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/favicon.ico


--------------------------------------------------------------------------------
/packages/app/public/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/thumbnail.png


--------------------------------------------------------------------------------
/packages/app/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/favicon-16x16.png


--------------------------------------------------------------------------------
/packages/app/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/favicon-32x32.png


--------------------------------------------------------------------------------
/packages/app/public/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/mstile-150x150.png


--------------------------------------------------------------------------------
/packages/app/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/app/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/packages/app/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | import WebXRPolyfill from 'webxr-polyfill';
2 | 
3 | // eslint-disable-next-line no-new
4 | new WebXRPolyfill();
5 | 


--------------------------------------------------------------------------------
/packages/app/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/packages/app/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimoWilhelm/vr-player/HEAD/packages/app/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/packages/app/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 |   interface Navigator extends Navigator {
3 |     xr: XRSystem;
4 |   }
5 | }
6 | 
7 | export {};
8 | 


--------------------------------------------------------------------------------
/packages/player/src/types.ts:
--------------------------------------------------------------------------------
1 | export type Format = 'screen' | '180' | '360';
2 | export type Layout = 'mono' | 'stereoTopBottom' | 'stereoLeftRight';
3 | 


--------------------------------------------------------------------------------
/packages/app/src/webxr-polyfill.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'webxr-polyfill' {
2 |   declare class WebXRPolyfill {
3 |     xr: XRSystem;
4 |   }
5 |   export = WebXRPolyfill;
6 | }
7 | 
8 | export {};
9 | 


--------------------------------------------------------------------------------
/packages/player/src/index.ts:
--------------------------------------------------------------------------------
1 | export { VrRenderer } from './renderer/vrRenderer';
2 | export { DebugRenderer } from './renderer/debugRenderer';
3 | export type { Format, Layout } from './types';
4 | 


--------------------------------------------------------------------------------
/.ncurc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   format: 'group',
 3 |   workspaces: true,
 4 |   root: true,
 5 |   upgrade: true,
 6 |   reject: [
 7 |     // breaking
 8 |     'typescript',
 9 |     'eslint',
10 |   ],
11 | };
12 | 


--------------------------------------------------------------------------------
/packages/player/src/primitive/primitive.ts:
--------------------------------------------------------------------------------
1 | import type { vec2, vec3 } from 'gl-matrix';
2 | 
3 | export type Primitive = {
4 |   positions: vec3[];
5 |   indices: vec3[];
6 |   uvs: vec2[];
7 |   normals: vec3[];
8 | };
9 | 


--------------------------------------------------------------------------------
/packages/player/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "../../.eslintrc"
 4 |   ],
 5 |   "parserOptions": {
 6 |     "sourceType": "module",
 7 |     "project": [
 8 |       "./tsconfig.json"
 9 |     ]
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/app/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ['./src/**/*.{js,jsx,ts,tsx}'],
 3 |   theme: {
 4 |     extend: {
 5 |       aria: {
 6 |         current: 'current="true"',
 7 |       },
 8 |     },
 9 |   },
10 |   plugins: [],
11 | };
12 | 


--------------------------------------------------------------------------------
/packages/app/src/components/ui/GroupControl.tsx:
--------------------------------------------------------------------------------
1 | export function GroupControl({ children }: { children: React.ReactNode }) {
2 |   return (
3 |     <div className="m-2 inline-flex rounded-lg shadow-sm" role="group">
4 |       {children}
5 |     </div>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VR Player
 2 | 
 3 | Play any 180° or 360° videos on your VR HMD using the WebXR APIs. Most common VR headsets should be supported.
 4 | 
 5 | Supports mono or stereo video playback with top-bottom or left-right layouts.
 6 | 
 7 | ---
 8 | 
 9 | Icons by [unDraw](https://undraw.co/)
10 | 


--------------------------------------------------------------------------------
/packages/app/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | import 'jest-canvas-mock';
7 | 


--------------------------------------------------------------------------------
/packages/app/public/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/mstile-150x150.png"/>
 6 |             <TileColor>#da532c</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/packages/app/src/components/util/ConditionalWrapper.tsx:
--------------------------------------------------------------------------------
 1 | export const ConditionalWrapper = ({
 2 |   condition,
 3 |   wrapper,
 4 |   children,
 5 | }: {
 6 |   condition: boolean;
 7 |   wrapper: (children: React.ReactElement) => JSX.Element;
 8 |   children: React.ReactElement;
 9 | }) => (condition ? wrapper(children) : children);
10 | 


--------------------------------------------------------------------------------
/packages/app/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/packages/player/src/renderer/renderProps.ts:
--------------------------------------------------------------------------------
 1 | import type { Texture2D } from 'regl';
 2 | import type { mat4 } from 'gl-matrix';
 3 | 
 4 | export type RenderProps = {
 5 |   model: mat4;
 6 |   view: mat4 | Float32Array;
 7 |   projection: mat4 | Float32Array;
 8 |   texture: Texture2D;
 9 |   texCoordScaleOffset: Float32Array;
10 |   viewport: {
11 |     x: GLint;
12 |     y: GLint;
13 |     width: GLsizei;
14 |     height: GLsizei;
15 |   };
16 | };
17 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: http://EditorConfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | end_of_line = lf
 8 | indent_style = space
 9 | indent_size = 2
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.{md,mdx}]
14 | max_line_length = 120
15 | trim_trailing_whitespace = false
16 | 
17 | [*.{ts,tsx,js,jsx,mjs}]
18 | quote_type = single
19 | 
20 | [*.{yaml,yml}]
21 | quote_type = single
22 | 


--------------------------------------------------------------------------------
/packages/app/src/util/debounce.ts:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
 2 | export function debounceAnimationFrame<T extends (...args: any[]) => void>(
 3 |   fn: T,
 4 | ): T {
 5 |   let handle: number | undefined;
 6 | 
 7 |   return ((...args: unknown[]) => {
 8 |     if (handle !== undefined) {
 9 |       window.cancelAnimationFrame(handle);
10 |     }
11 | 
12 |     handle = window.requestAnimationFrame(() => {
13 |       fn(...args);
14 |     });
15 |   }) as T;
16 | }
17 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files.associations": {
 3 |     "*.css": "tailwindcss"
 4 |   },
 5 |   "editor.quickSuggestions": {
 6 |     "strings": true
 7 |   },
 8 |   "debug.internalConsoleOptions": "neverOpen",
 9 |   "eslint.validate": [
10 |     "javascript",
11 |     "javascriptreact",
12 |     "typescript",
13 |     "typescriptreact",
14 |   ],
15 |   "eslint.workingDirectories": [
16 |     {
17 |       "mode": "auto"
18 |     }
19 |   ],
20 |   "editor.codeActionsOnSave": {
21 |     "source.fixAll": "explicit"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Use IntelliSense to learn about possible attributes.
 3 |   // Hover to view descriptions of existing attributes.
 4 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     {
 8 |       "name": "App:Chrome",
 9 |       "type": "chrome",
10 |       "request": "launch",
11 |       "url": "http://localhost:3000",
12 |       "webRoot": "${workspaceFolder}/packages/app",
13 |       "sourceMaps": true
14 |     },
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/app/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "jest": true,
 4 |   },
 5 |   "plugins": ["react"],
 6 |   "extends": [
 7 |     "plugin:react/recommended",
 8 |     "plugin:react/jsx-runtime",
 9 |     "../../.eslintrc",
10 |   ],
11 |   "parserOptions": {
12 |     "sourceType": "module",
13 |     "project": ["./tsconfig.json"],
14 |   },
15 |   "settings": {
16 |     "react": {
17 |       "version": "detect",
18 |     },
19 |     "import/resolver": {
20 |       "node": {
21 |         "paths": ["src"],
22 |       },
23 |     },
24 |   },
25 | }
26 | 


--------------------------------------------------------------------------------
/packages/app/src/atoms/controls.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'jotai';
 2 | import type { Format, Layout } from '@vr-viewer/player';
 3 | 
 4 | export const autoPlayAtom = atom(false);
 5 | export const autoDetectAtom = atom(true);
 6 | export const detectingAtom = atom(false);
 7 | 
 8 | export const layoutAtom = atom<Layout>('mono');
 9 | export const flipLayoutAtom = atom(false);
10 | 
11 | export const formatAtom = atom<Format>('screen');
12 | 
13 | export const debugAtom = atom(false);
14 | 
15 | export const videoUrlAtom = atom<string | null>(null);
16 | 


--------------------------------------------------------------------------------
/packages/app/src/worker/videoRecognition.worker/index.ts:
--------------------------------------------------------------------------------
 1 | import { detectFormat, detectLayout } from './videoRecognition';
 2 | import { expose } from 'comlink';
 3 | import type { Format, Layout } from '@vr-viewer/player';
 4 | 
 5 | export function recognizeVideo(frames: ImageData[]): [Layout?, Format?] {
 6 |   const layout = detectLayout(frames);
 7 |   const format = detectFormat(frames);
 8 | 
 9 |   return [layout, format];
10 | }
11 | 
12 | const module = { recognizeVideo };
13 | 
14 | expose(module);
15 | 
16 | export type VideoRecognitionWorker = typeof module;
17 | 


--------------------------------------------------------------------------------
/packages/app/src/components/ui/Control.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | 
 3 | export function Control(
 4 |   props: Omit<React.HTMLProps<HTMLButtonElement>, 'type' | 'className'>,
 5 | ) {
 6 |   return (
 7 |     <button
 8 |       type="button"
 9 |       className={clsx(
10 |         'm-2 py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-lg shadow-sm disabled:opacity-50 disabled:shadow-none disabled:hover:bg-gray-700 aria-current:bg-cyan-700 aria-current:hover:bg-cyan-600',
11 |       )}
12 |       {...props}
13 |     />
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/player/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@vr-viewer/player",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "main": "lib/index.js",
 6 |   "types": "lib/index.d.ts",
 7 |   "dependencies": {
 8 |     "@types/webxr": "^0.5.20",
 9 |     "gl-matrix": "^3.4.3",
10 |     "regl": "^2.1.0",
11 |     "typescript": "^5.4.3"
12 |   },
13 |   "scripts": {
14 |     "watch": "tsc --watch",
15 |     "build": "tsc",
16 |     "test": "echo \"Error: no test specified\" && exit 1",
17 |     "lint": "eslint .",
18 |     "update": "npx npm-check-updates -u"
19 |   },
20 |   "author": "",
21 |   "license": "MIT"
22 | }
23 | 


--------------------------------------------------------------------------------
/packages/app/src/components/ui/GroupControlElement.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | 
 3 | export function GroupControlElement(
 4 |   props: Omit<React.HTMLProps<HTMLButtonElement>, 'type' | 'className'>,
 5 | ) {
 6 |   return (
 7 |     <button
 8 |       type="button"
 9 |       className={clsx(
10 |         'py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-600 border-gray-600 border-t border-b first:border last:border first:rounded-l-lg last:rounded-r-lg disabled:opacity-50 disabled:hover:bg-gray-700 aria-current:bg-cyan-700 aria-current:hover:bg-cyan-600',
11 |       )}
12 |       {...props}
13 |     />
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/app/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   html,
 7 |   body,
 8 |   #root {
 9 |     height: 100%;
10 |     @apply bg-gray-900;
11 |   }
12 | }
13 | 
14 | @layer components {
15 |   .grid-effect {
16 |     background: linear-gradient(
17 |         180deg,
18 |         transparent 0,
19 |         theme('colors.slate.800') 66vh
20 |       ),
21 |       fixed 0 0 /20px 20px radial-gradient(rgba(236, 236, 236, 0.2) 1px, transparent
22 |             0),
23 |       fixed 10px 10px /20px 20px radial-gradient(rgba(236, 236, 236, 0.2) 1px, transparent
24 |             0);
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/packages/player/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "ESNext",
 6 |       "DOM",
 7 |     ],
 8 |     "allowJs": false,
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "strict": true,
13 |     "forceConsistentCasingInFileNames": true,
14 |     "noFallthroughCasesInSwitch": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "declaration": true,
20 |     "sourceMap": true,
21 |     "outDir": "./lib",
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/packages/player/src/primitive/square.ts:
--------------------------------------------------------------------------------
 1 | import { vec3 } from 'gl-matrix';
 2 | import type { Primitive } from './primitive';
 3 | 
 4 | export function square({ scale = 1 }): Primitive {
 5 |   return {
 6 |     positions: [
 7 |       vec3.scale(vec3.create(), [-1, 1, 0], scale),
 8 |       vec3.scale(vec3.create(), [-1, -1, 0], scale),
 9 |       vec3.scale(vec3.create(), [1, -1, 0], scale),
10 |       vec3.scale(vec3.create(), [1, 1, 0], scale),
11 |     ],
12 |     indices: [
13 |       [0, 1, 2],
14 |       [0, 2, 3],
15 |     ],
16 |     uvs: [
17 |       [1, 1],
18 |       [1, 0],
19 |       [0, 0],
20 |       [0, 1],
21 |     ],
22 |     normals: [
23 |       [0, 0, -1],
24 |       [0, 0, -1],
25 |     ],
26 |   };
27 | }
28 | 


--------------------------------------------------------------------------------
/packages/app/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "VR Player",
 3 |   "name": "VR Player",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/android-chrome-192x192.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png",
 9 |       "purpose": "any"
10 |     },
11 |     {
12 |       "src": "/android-chrome-512x512.png",
13 |       "sizes": "512x512",
14 |       "type": "image/png",
15 |       "purpose": "any"
16 |     },
17 |     {
18 |       "src": "/apple-touch-icon.png",
19 |       "sizes": "180x180",
20 |       "type": "image/png",
21 |       "purpose": "maskable"
22 |     }
23 |   ],
24 |   "start_url": ".",
25 |   "display": "standalone",
26 |   "theme_color": "#ffffff",
27 |   "background_color": "#ffffff"
28 | }
29 | 


--------------------------------------------------------------------------------
/packages/app/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": "src",
 4 |     "target": "es5",
 5 |     "lib": [
 6 |       "ESNext",
 7 |       "DOM",
 8 |       "DOM.Iterable"
 9 |     ],
10 |     "allowJs": false,
11 |     "skipLibCheck": true,
12 |     "esModuleInterop": true,
13 |     "allowSyntheticDefaultImports": true,
14 |     "strict": true,
15 |     "forceConsistentCasingInFileNames": true,
16 |     "noFallthroughCasesInSwitch": true,
17 |     "module": "esnext",
18 |     "moduleResolution": "node",
19 |     "resolveJsonModule": true,
20 |     "isolatedModules": true,
21 |     "noEmit": true,
22 |     "jsx": "react-jsx",
23 |     "experimentalDecorators": true
24 |   },
25 |   "include": [
26 |     "src"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/packages/app/src/helper/util.ts:
--------------------------------------------------------------------------------
 1 | export function* nWise<T>(
 2 |   n: number,
 3 |   iterable: Iterable<T>,
 4 | ): Generator<Array<T>> {
 5 |   const iterator = iterable[Symbol.iterator]();
 6 |   let current = iterator.next();
 7 | 
 8 |   let tmp = [];
 9 | 
10 |   while (!current.done) {
11 |     tmp.push(current.value);
12 |     if (tmp.length === n) {
13 |       yield tmp;
14 |       tmp = [];
15 |     }
16 | 
17 |     current = iterator.next();
18 |   }
19 | }
20 | 
21 | export function linSpace(
22 |   startValue: number,
23 |   stopValue: number,
24 |   cardinality: number,
25 | ) {
26 |   const arr = [];
27 |   const step = (stopValue - startValue) / (cardinality - 1);
28 |   for (let i = 0; i < cardinality; i += 1) {
29 |     arr.push(startValue + step * i);
30 |   }
31 |   return arr;
32 | }
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "workspaces": [
 3 |     "./packages/player",
 4 |     "./packages/app"
 5 |   ],
 6 |   "devDependencies": {
 7 |     "@typescript-eslint/eslint-plugin": "^8.8.0",
 8 |     "@typescript-eslint/parser": "^8.8.0",
 9 |     "eslint": "^8.57.0",
10 |     "eslint-config-prettier": "^9.1.0",
11 |     "eslint-import-resolver-typescript": "^3.6.3",
12 |     "eslint-plugin-import": "^2.30.0",
13 |     "eslint-plugin-prettier": "^5.2.1",
14 |     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
15 |     "npm-check-updates": "^17.1.3",
16 |     "prettier": "^3.3.3"
17 |   },
18 |   "scripts": {
19 |     "start": "npm run start --workspace packages/app",
20 |     "build": "npm run build --workspaces --if-present",
21 |     "lint": "npm run lint --workspaces --if-present",
22 |     "test": "npm run test --workspaces --if-present",
23 |     "update": "ncu && npm install"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/packages/app/src/components/VrPlayer.tsx:
--------------------------------------------------------------------------------
 1 | import { VrRenderer } from '@vr-viewer/player';
 2 | import { useEffect } from 'react';
 3 | import type { Format, Layout } from '@vr-viewer/player';
 4 | 
 5 | export function VrPlayer({
 6 |   xrSession,
 7 |   video,
 8 |   canvas,
 9 |   layout,
10 |   flipLayout,
11 |   format,
12 | }: {
13 |   xrSession: XRSession;
14 |   video: HTMLVideoElement;
15 |   canvas: HTMLCanvasElement;
16 |   layout: Layout;
17 |   flipLayout: boolean;
18 |   format: Format;
19 | }) {
20 |   useEffect(() => {
21 |     const renderer = new VrRenderer(
22 |       xrSession,
23 |       video,
24 |       canvas,
25 |       layout,
26 |       flipLayout,
27 |       format,
28 |     );
29 |     void renderer.start();
30 |     return () => {
31 |       renderer.stop();
32 |     };
33 |   }, [canvas, flipLayout, format, layout, video, xrSession]);
34 | 
35 |   return null;
36 | }
37 | 


--------------------------------------------------------------------------------
/packages/app/src/components/DebugPlayer.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-param-reassign */
 2 | import { DebugRenderer } from '@vr-viewer/player';
 3 | import { useEffect } from 'react';
 4 | import type { Format, Layout } from '@vr-viewer/player';
 5 | 
 6 | export function DebugPlayer({
 7 |   video,
 8 |   canvas,
 9 |   layout,
10 |   flipLayout,
11 |   format,
12 |   view = 'left',
13 | }: {
14 |   video: HTMLVideoElement;
15 |   canvas: HTMLCanvasElement;
16 |   layout: Layout;
17 |   flipLayout: boolean;
18 |   format: Format;
19 |   view?: 'left' | 'right';
20 | }) {
21 |   useEffect(() => {
22 |     const renderer = new DebugRenderer(
23 |       video,
24 |       canvas,
25 |       layout,
26 |       flipLayout,
27 |       format,
28 |       view,
29 |     );
30 |     void renderer.start();
31 |     return () => {
32 |       renderer.stop();
33 |     };
34 |   }, [canvas, flipLayout, format, layout, video, view]);
35 | 
36 |   return null;
37 | }
38 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Timo Wilhelm, <mail@timowilhelm.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/packages/app/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import './index.css';
 2 | import './polyfills';
 3 | import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 4 | import { Analytics } from '@vercel/analytics/react';
 5 | import { App } from 'components/App';
 6 | import { ConditionalWrapper } from 'components/util/ConditionalWrapper';
 7 | import { createRoot } from 'react-dom/client';
 8 | import { useAtomsDevtools } from 'jotai-devtools';
 9 | import React from 'react';
10 | 
11 | const isProduction = process.env.NODE_ENV === 'production';
12 | 
13 | const AtomsDevtools = ({ children }: { children: React.ReactElement }) => {
14 |   useAtomsDevtools('demo');
15 |   return children;
16 | };
17 | 
18 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
19 | const root = createRoot(document.getElementById('root')!);
20 | 
21 | root.render(
22 |   <React.StrictMode>
23 |     <Analytics />
24 |     <ConditionalWrapper
25 |       condition={!isProduction}
26 |       wrapper={(children) => <AtomsDevtools>{children}</AtomsDevtools>}
27 |     >
28 |       <App />
29 |     </ConditionalWrapper>
30 |   </React.StrictMode>,
31 | );
32 | 
33 | serviceWorkerRegistration.register({
34 |   onUpdate: (e) => {
35 |     if (e.waiting) {
36 |       e.waiting.postMessage({ type: 'SKIP_WAITING' });
37 |     }
38 | 
39 |     void e.update().then(() => {
40 |       window.location.reload();
41 |     });
42 |   },
43 | });
44 | 


--------------------------------------------------------------------------------
/packages/app/src/helper/getImageFrames.ts:
--------------------------------------------------------------------------------
 1 | import { linSpace } from './util';
 2 | 
 3 | export async function getImageFrames(
 4 |   video: HTMLVideoElement,
 5 | ): Promise<ImageData[]> {
 6 |   const canvas = document.createElement('canvas');
 7 |   const ctx = canvas.getContext('2d', { willReadFrequently: true });
 8 | 
 9 |   if (!ctx) {
10 |     return [];
11 |   }
12 | 
13 |   canvas.width = video.videoWidth;
14 |   canvas.height = video.videoHeight;
15 | 
16 |   const numberOfFrames = 5;
17 | 
18 |   const timeStamps = linSpace(
19 |     video.duration * 0.2,
20 |     video.duration * 0.8,
21 |     numberOfFrames + 2,
22 |   )
23 |     .map((n) => Math.floor(n))
24 |     .slice(1, -1);
25 | 
26 |   const videoClone = document.createElement('video');
27 |   videoClone.crossOrigin = 'anonymous';
28 |   videoClone.src = video.src;
29 |   videoClone.muted = true;
30 |   videoClone.pause();
31 | 
32 |   const promises = timeStamps.map((timeStamp) => {
33 |     return new Promise<ImageData>((resolve) => {
34 |       const onSeeked = () => {
35 |         videoClone.removeEventListener('seeked', onSeeked);
36 |         ctx.drawImage(videoClone, 0, 0);
37 |         resolve(ctx.getImageData(0, 0, canvas.width, canvas.height));
38 |       };
39 | 
40 |       videoClone.addEventListener('seeked', onSeeked);
41 |       videoClone.currentTime = timeStamp;
42 |     });
43 |   });
44 | 
45 |   const frames = await Promise.all(promises);
46 |   return frames;
47 | }
48 | 


--------------------------------------------------------------------------------
/packages/app/src/hooks/useXRSession.ts:
--------------------------------------------------------------------------------
 1 | import { atom, useAtom } from 'jotai';
 2 | import { useCallback, useEffect } from 'react';
 3 | 
 4 | const xrSupportedAtom = atom(false);
 5 | const xrSessionAtom = atom<XRSession | null>(null);
 6 | 
 7 | function checkForXRSupport() {
 8 |   if (!navigator.xr) {
 9 |     return Promise.resolve(false);
10 |   }
11 |   return navigator.xr.isSessionSupported('immersive-vr');
12 | }
13 | 
14 | export const useXRSession = () => {
15 |   const [xrSupported, setXrSupported] = useAtom(xrSupportedAtom);
16 |   const [xrSession, setXrSession] = useAtom(xrSessionAtom);
17 | 
18 |   useEffect(() => {
19 |     const onDevicechange = () => {
20 |       void checkForXRSupport().then(setXrSupported);
21 |     };
22 | 
23 |     navigator.xr?.addEventListener('devicechange', onDevicechange);
24 | 
25 |     onDevicechange();
26 | 
27 |     return () => {
28 |       navigator.xr?.removeEventListener('devicechange', onDevicechange);
29 |     };
30 |   }, [setXrSupported]);
31 | 
32 |   useEffect(() => {
33 |     const onXrSessionEnd = () => {
34 |       setXrSession(null);
35 |     };
36 | 
37 |     if (xrSession) {
38 |       xrSession.addEventListener('end', onXrSessionEnd);
39 |     }
40 | 
41 |     return () => {
42 |       xrSession?.removeEventListener('end', onXrSessionEnd);
43 |     };
44 |   }, [setXrSession, xrSession]);
45 | 
46 |   const requestXrSession = useCallback(() => {
47 |     if (xrSupported && !xrSession) {
48 |       void navigator.xr?.requestSession('immersive-vr').then((session) => {
49 |         setXrSession(session);
50 |       });
51 |     }
52 |   }, [setXrSession, xrSession, xrSupported]);
53 | 
54 |   return [xrSupported, xrSession, requestXrSession] as const;
55 | };
56 | 


--------------------------------------------------------------------------------
/packages/app/src/worker/videoRecognition.worker/videoRecognition.spec.ts:
--------------------------------------------------------------------------------
 1 | import { detectLayout } from './videoRecognition';
 2 | import type { Layout } from '@vr-viewer/player';
 3 | 
 4 | const IMAGE_WIDTH = 4;
 5 | const IMAGE_HEIGHT = 4;
 6 | 
 7 | describe('Test video recognition', () => {
 8 |   test('Detect top/bottom video', () => {
 9 |     const pixels = new Array<number[]>(IMAGE_HEIGHT).fill(
10 |       [
11 |         ...new Array<number[]>(IMAGE_WIDTH / 2).fill([0, 0, 0, 1]),
12 |         ...new Array<number[]>(IMAGE_WIDTH / 2).fill([1, 1, 1, 1]),
13 |       ].flat(),
14 |     );
15 | 
16 |     const imageData = new ImageData(
17 |       Uint8ClampedArray.from(pixels.flat()),
18 |       IMAGE_WIDTH,
19 |       IMAGE_HEIGHT,
20 |     );
21 | 
22 |     expect(detectLayout([imageData])).toBe<Layout>('stereoTopBottom');
23 |   });
24 | 
25 |   test('Detect left/right video', () => {
26 |     const pixels = [
27 |       ...new Array<number[]>(IMAGE_WIDTH * (IMAGE_HEIGHT / 2)).fill([
28 |         0, 0, 0, 1,
29 |       ]),
30 |       ...new Array<number[]>(IMAGE_WIDTH * (IMAGE_HEIGHT / 2)).fill([
31 |         1, 1, 1, 1,
32 |       ]),
33 |     ];
34 | 
35 |     const imageData = new ImageData(
36 |       Uint8ClampedArray.from(pixels.flat()),
37 |       IMAGE_WIDTH,
38 |       IMAGE_HEIGHT,
39 |     );
40 | 
41 |     expect(detectLayout([imageData])).toBe<Layout>('stereoLeftRight');
42 |   });
43 | 
44 |   test('Detect mono video', () => {
45 |     const pixels = new Array<number[]>((IMAGE_WIDTH * IMAGE_HEIGHT) / 2).fill(
46 |       [...[0, 0, 0, 1], ...[1, 1, 1, 1]].flat(),
47 |     );
48 | 
49 |     const imageData = new ImageData(
50 |       Uint8ClampedArray.from(pixels.flat()),
51 |       IMAGE_WIDTH,
52 |       IMAGE_HEIGHT,
53 |     );
54 | 
55 |     expect(detectLayout([imageData])).toBe<Layout>('mono');
56 |   });
57 | });
58 | 


--------------------------------------------------------------------------------
/packages/app/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
 7 |     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 9 |     <meta name="theme-color" content="#ffffff" />
10 |     <meta name="msapplication-TileColor" content="#ffffff" />
11 |     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
12 |     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
13 |     <link rel="manifest" href="/manifest.json" />
14 |     <link rel="canonical" href="%REACT_APP_CANONICAL_URL%" />
15 |     <title>VR Player | Play 360° 3D VR Videos in Your Browser</title>
16 |     <meta
17 |       name="description"
18 |       content="Play your favorite 360° or 180° 3D VR videos. No download required, just drag and drop any video file to play. Supports all popular VR headsets."
19 |     />
20 |     <meta
21 |       property="og:title"
22 |       content="VR Player | Play 360° 3D VR Videos in Your Browser"
23 |     />
24 |     <meta
25 |       property="og:description"
26 |       content="Play your favorite 360° or 180° 3D VR videos. No download required, just drag and drop any video file to play. Supports all popular VR headsets."
27 |     />
28 |     <meta
29 |       property="og:image"
30 |       content="%REACT_APP_CANONICAL_URL%/thumbnail.png"
31 |     />
32 |     <meta property="og:url" content="%REACT_APP_CANONICAL_URL%" />
33 |     <meta property="og:type" content="website" />
34 | 
35 |     <meta name="git:commit" content="%REACT_APP_VERCEL_GIT_COMMIT_SHA%" />
36 |   </head>
37 |   <body>
38 |     <noscript>You need to enable JavaScript to run this app.</noscript>
39 |     <div id="root"></div>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "env": {
 4 |     "es6": true,
 5 |   },
 6 |   "parser": "@typescript-eslint/parser",
 7 |   "parserOptions": {
 8 |     "ecmaVersion": 2017,
 9 |   },
10 |   "plugins": ["@typescript-eslint", "prettier", "sort-imports-es6-autofix"],
11 |   "extends": [
12 |     "eslint:recommended",
13 |     "plugin:import/recommended",
14 |     "plugin:import/typescript",
15 |     "plugin:@typescript-eslint/recommended",
16 |     "plugin:@typescript-eslint/recommended-requiring-type-checking",
17 |     "plugin:prettier/recommended",
18 |   ],
19 |   "settings": {
20 |     "import/parsers": {
21 |       "@typescript-eslint/parser": [".ts", ".tsx"],
22 |     },
23 |     "import/resolver": {
24 |       "typescript": {
25 |         "alwaysTryTypes": true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
26 | 
27 |         // use a glob pattern
28 |         "project": "packages/*/tsconfig.json",
29 |       },
30 |     },
31 |   },
32 |   "rules": {
33 |     "@typescript-eslint/no-explicit-any": [
34 |       "error",
35 |       {
36 |         "ignoreRestArgs": true,
37 |       },
38 |     ],
39 |     "import/prefer-default-export": "off",
40 |     "import/no-default-export": "error",
41 |     "object-curly-newline": "off",
42 |     "no-void": [
43 |       "error",
44 |       {
45 |         "allowAsStatement": true,
46 |       },
47 |     ],
48 |     "react/require-default-props": "off",
49 |     "react/jsx-props-no-spreading": "off",
50 |     "@typescript-eslint/consistent-type-imports": [
51 |       "error",
52 |       {
53 |         "prefer": "type-imports",
54 |         "disallowTypeAnnotations": false,
55 |       },
56 |     ],
57 |     "import/order": "off",
58 |     "sort-imports-es6-autofix/sort-imports-es6": [
59 |       "error",
60 |       {
61 |         "ignoreCase": false,
62 |         "ignoreMemberSort": false,
63 |         "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
64 |       },
65 |     ],
66 |   },
67 | }
68 | 


--------------------------------------------------------------------------------
/packages/app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@vr-viewer/app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.13.3",
 7 |     "@heroicons/react": "^2.1.5",
 8 |     "@testing-library/jest-dom": "^6.5.0",
 9 |     "@testing-library/react": "^16.0.1",
10 |     "@testing-library/user-event": "^14.5.2",
11 |     "@types/jest": "^29.5.13",
12 |     "@types/node": "^22.7.4",
13 |     "@types/react": "^18.3.10",
14 |     "@types/react-dom": "^18.3.0",
15 |     "@types/webxr": "^0.5.20",
16 |     "@vercel/analytics": "^1.3.1",
17 |     "@vr-viewer/player": "*",
18 |     "autoprefixer": "^10.4.20",
19 |     "clsx": "^2.1.1",
20 |     "comlink": "^4.4.1",
21 |     "jest-canvas-mock": "^2.5.2",
22 |     "jotai": "^2.10.0",
23 |     "jotai-devtools": "^0.10.1",
24 |     "postcss": "^8.4.47",
25 |     "react": "^18.3.1",
26 |     "react-dom": "^18.3.1",
27 |     "react-dropzone": "^14.2.3",
28 |     "react-hot-toast": "^2.4.1",
29 |     "react-scripts": "5.0.1",
30 |     "tailwindcss": "^3.4.13",
31 |     "typescript": "^5.4.3",
32 |     "web-vitals": "^4.2.3",
33 |     "webxr-polyfill": "^2.0.3",
34 |     "workbox-background-sync": "^7.1.0",
35 |     "workbox-broadcast-update": "^7.1.0",
36 |     "workbox-cacheable-response": "^7.1.0",
37 |     "workbox-core": "^7.1.0",
38 |     "workbox-expiration": "^7.1.0",
39 |     "workbox-navigation-preload": "^7.1.0",
40 |     "workbox-precaching": "^7.1.0",
41 |     "workbox-range-requests": "^7.1.0",
42 |     "workbox-routing": "^7.1.0",
43 |     "workbox-strategies": "^7.1.0",
44 |     "workbox-streams": "^7.1.0"
45 |   },
46 |   "scripts": {
47 |     "start": "react-scripts start",
48 |     "build": "react-scripts build",
49 |     "test": "react-scripts test",
50 |     "lint": "eslint ."
51 |   },
52 |   "eslintConfig": {
53 |     "extends": [
54 |       "react-app",
55 |       "react-app/jest"
56 |     ]
57 |   },
58 |   "browserslist": {
59 |     "production": [
60 |       ">0.2%",
61 |       "not dead",
62 |       "not op_mini all"
63 |     ],
64 |     "development": [
65 |       "last 1 chrome version",
66 |       "last 1 firefox version",
67 |       "last 1 safari version"
68 |     ]
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/packages/player/src/renderer/debugRenderer.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-underscore-dangle */
 2 | import { Renderer } from './renderer';
 3 | import { mat4 } from 'gl-matrix';
 4 | import type { Format, Layout } from '../types';
 5 | import type { RenderProps } from './renderProps';
 6 | import type { Texture2DOptions } from 'regl';
 7 | 
 8 | export class DebugRenderer extends Renderer {
 9 |   private raf = 0;
10 | 
11 |   constructor(
12 |     private readonly video: HTMLVideoElement,
13 |     canvas: HTMLCanvasElement,
14 |     layout: Layout,
15 |     flipLayout: boolean,
16 |     format: Format,
17 |     private readonly view: 'left' | 'right',
18 |   ) {
19 |     super(canvas, layout, flipLayout, format);
20 |   }
21 | 
22 |   protected stopDrawLoop(): void {
23 |     window.cancelAnimationFrame(this.raf);
24 |   }
25 | 
26 |   protected async startDrawLoop(): Promise<void> {
27 |     const textureProps: Texture2DOptions = { data: this.video, flipY: true };
28 |     const texture = this.regl.texture(textureProps);
29 | 
30 |     const model = this.getModelMatrix(this.video);
31 | 
32 |     const view = mat4.lookAt(mat4.create(), [0, 0, 0], [0, 0, -1], [0, 1, 0]);
33 | 
34 |     const projection = mat4.perspective(
35 |       mat4.create(),
36 |       Math.PI / 2,
37 |       this.canvas.width / this.canvas.height,
38 |       0.01,
39 |       Infinity,
40 |     );
41 | 
42 |     const offsets = this.getTexCoordScaleOffsets();
43 |     const offset = this.view === 'left' ? offsets[0] : offsets[1];
44 | 
45 |     const drawLoop = () => {
46 |       this.regl.clear({ color: [0, 0, 0, 1], depth: 1 });
47 | 
48 |       const props: RenderProps = {
49 |         model,
50 |         view,
51 |         projection,
52 |         texture: texture.subimage(textureProps),
53 |         viewport: {
54 |           x: 0,
55 |           y: 0,
56 |           width: this.canvas.width,
57 |           height: this.canvas.height,
58 |         },
59 |         texCoordScaleOffset: offset,
60 |       };
61 |       this.cmdRender(props);
62 | 
63 |       this.raf = window.requestAnimationFrame(drawLoop);
64 |     };
65 | 
66 |     this.raf = window.requestAnimationFrame(drawLoop);
67 | 
68 |     return Promise.resolve();
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/packages/app/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 


--------------------------------------------------------------------------------
/packages/app/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/packages/player/src/primitive/sphere.ts:
--------------------------------------------------------------------------------
 1 | import { mat4, vec2, vec3 } from 'gl-matrix';
 2 | import type { Primitive } from './primitive';
 3 | 
 4 | const up = vec3.fromValues(0, 1, 0);
 5 | 
 6 | export function sphere({
 7 |   radius = 1,
 8 |   segments = 32,
 9 |   halfSphere = false,
10 | }): Primitive {
11 |   const indices = [] as vec3[];
12 |   const positions = [] as vec3[];
13 |   const normals = [] as vec3[];
14 |   const uvs = [] as vec2[];
15 | 
16 |   const tmpVec3 = vec3.create();
17 |   const tmpMatRotZ = mat4.create();
18 |   const tmpMatRotY = mat4.create();
19 | 
20 |   const totalZRotationSteps = 2 + segments;
21 |   const totalYRotationSteps = 2 * totalZRotationSteps;
22 | 
23 |   for (
24 |     let zRotationStep = 0;
25 |     zRotationStep <= totalZRotationSteps;
26 |     zRotationStep += 1
27 |   ) {
28 |     const normalizedZ = zRotationStep / totalZRotationSteps;
29 |     const angleZ = normalizedZ * Math.PI;
30 | 
31 |     for (
32 |       let yRotationStep = 0;
33 |       yRotationStep <= totalYRotationSteps;
34 |       yRotationStep += 1
35 |     ) {
36 |       const normalizedY = yRotationStep / totalYRotationSteps;
37 |       const angleY = normalizedY * Math.PI * 2;
38 | 
39 |       mat4.identity(tmpMatRotZ);
40 |       mat4.rotateZ(tmpMatRotZ, tmpMatRotZ, -angleZ);
41 | 
42 |       mat4.identity(tmpMatRotY);
43 |       mat4.rotateY(tmpMatRotY, tmpMatRotY, halfSphere ? angleY / 2 : angleY);
44 | 
45 |       vec3.transformMat4(tmpVec3, up, tmpMatRotZ);
46 |       vec3.transformMat4(tmpVec3, tmpVec3, tmpMatRotY);
47 | 
48 |       vec3.scale(tmpVec3, tmpVec3, -radius);
49 |       positions.push(vec3.clone(tmpVec3));
50 | 
51 |       vec3.normalize(tmpVec3, tmpVec3);
52 |       normals.push(vec3.clone(tmpVec3));
53 | 
54 |       uvs.push(vec2.fromValues(1 - normalizedY, normalizedZ));
55 |     }
56 | 
57 |     if (zRotationStep > 0) {
58 |       const verticesCount = positions.length;
59 | 
60 |       for (
61 |         let firstIndex = verticesCount - 2 * (totalYRotationSteps + 1);
62 |         firstIndex + totalYRotationSteps + 2 < verticesCount;
63 |         firstIndex += 1
64 |       ) {
65 |         indices.push(
66 |           vec3.fromValues(
67 |             firstIndex,
68 |             firstIndex + 1,
69 |             firstIndex + totalYRotationSteps + 1,
70 |           ),
71 |         );
72 |         indices.push(
73 |           vec3.fromValues(
74 |             firstIndex + totalYRotationSteps + 1,
75 |             firstIndex + 1,
76 |             firstIndex + totalYRotationSteps + 2,
77 |           ),
78 |         );
79 |       }
80 |     }
81 |   }
82 | 
83 |   return {
84 |     indices,
85 |     positions,
86 |     normals,
87 |     uvs,
88 |   };
89 | }
90 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | ###############################################################################
 2 | # Set default behavior to automatically normalize line endings.
 3 | ###############################################################################
 4 | *           text=auto
 5 | 
 6 | # Shell scripts should always use line feed not crlf
 7 | *.sh text eol=lf
 8 | 
 9 | ###############################################################################
10 | # Set the merge driver for project and solution files
11 | #
12 | # Merging from the command prompt will add diff markers to the files if there
13 | # are conflicts (Merging from VS is not affected by the settings below, in VS
14 | # the diff markers are never inserted). Diff markers may cause the following
15 | # file extensions to fail to load in VS. An alternative would be to treat
16 | # these files as binary and thus will always conflict and require user
17 | # intervention with every merge. To do so, just uncomment the entries below
18 | ###############################################################################
19 | *.js         text
20 | *.ts         text
21 | *.json       text
22 | *.resjson    text
23 | *.htm        text
24 | *.html       text
25 | *.xml        text
26 | *.txt        text
27 | *.ini        text
28 | *.inc        text
29 | #*.sln       merge=binary
30 | #*.csproj    merge=binary
31 | #*.vbproj    merge=binary
32 | #*.vcxproj   merge=binary
33 | #*.vcproj    merge=binary
34 | #*.dbproj    merge=binary
35 | #*.fsproj    merge=binary
36 | #*.lsproj    merge=binary
37 | #*.wixproj   merge=binary
38 | #*.modelproj merge=binary
39 | #*.sqlproj   merge=binary
40 | #*.wwaproj   merge=binary
41 | 
42 | ###############################################################################
43 | # behavior for image files
44 | #
45 | # image files are treated as binary by default.
46 | ###############################################################################
47 | *.png     binary
48 | *.jpg     binary
49 | *.jpeg    binary
50 | *.gif     binary
51 | *.ico     binary
52 | *.mov     binary
53 | *.mp4     binary
54 | *.mp3     binary
55 | *.flv     binary
56 | *.fla     binary
57 | *.swf     binary
58 | *.gz      binary
59 | *.zip     binary
60 | *.7z      binary
61 | *.ttf     binary
62 | 
63 | ###############################################################################
64 | # diff behavior for common document formats
65 | #
66 | # Convert binary document formats to text before diffing them. This feature
67 | # is only available from the command line. Turn it on by uncommenting the
68 | # entries below.
69 | ###############################################################################
70 | *.doc   diff=astextplain
71 | *.DOC   diff=astextplain
72 | *.docx  diff=astextplain
73 | *.DOCX  diff=astextplain
74 | *.dot   diff=astextplain
75 | *.DOT   diff=astextplain
76 | *.pdf   diff=astextplain
77 | *.PDF   diff=astextplain
78 | *.rtf   diff=astextplain
79 | *.RTF   diff=astextplain
80 | 


--------------------------------------------------------------------------------
/packages/app/src/service-worker.ts:
--------------------------------------------------------------------------------
 1 | /// <reference lib="webworker" />
 2 | /* eslint-disable no-restricted-globals */
 3 | 
 4 | // This service worker can be customized!
 5 | // See https://developers.google.com/web/tools/workbox/modules
 6 | // for the list of available Workbox modules, or add any other
 7 | // code you'd like.
 8 | // You can also remove this file if you'd prefer not to use a
 9 | // service worker, and the Workbox build step will be skipped.
10 | 
11 | import { CacheFirst } from 'workbox-strategies';
12 | import { CacheableResponsePlugin } from 'workbox-cacheable-response';
13 | import { ExpirationPlugin } from 'workbox-expiration';
14 | import { clientsClaim } from 'workbox-core';
15 | import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
16 | import { registerRoute } from 'workbox-routing';
17 | 
18 | declare const self: ServiceWorkerGlobalScope;
19 | 
20 | clientsClaim();
21 | 
22 | // Precache all of the assets generated by your build process.
23 | // Their URLs are injected into the manifest variable below.
24 | // This variable must be present somewhere in your service worker file,
25 | // even if you decide not to use precaching. See https://cra.link/PWA
26 | // eslint-disable-next-line no-underscore-dangle
27 | precacheAndRoute(self.__WB_MANIFEST);
28 | 
29 | // Set up App Shell-style routing, so that all navigation requests
30 | // are fulfilled with your index.html shell. Learn more at
31 | // https://developers.google.com/web/fundamentals/architecture/app-shell
32 | const fileExtensionRegexp = /\/[^/?]+\.[^/]+$/;
33 | registerRoute(
34 |   // Return false to exempt requests from being fulfilled by index.html.
35 |   ({ request, url }: { request: Request; url: URL }) => {
36 |     // If this isn't a navigation, skip.
37 |     if (request.mode !== 'navigate') {
38 |       return false;
39 |     }
40 | 
41 |     // If this is a URL that starts with /_, skip.
42 |     if (url.pathname.startsWith('/_')) {
43 |       return false;
44 |     }
45 | 
46 |     // If this looks like a URL for a resource, because it contains
47 |     // a file extension, skip.
48 |     if (url.pathname.match(fileExtensionRegexp)) {
49 |       return false;
50 |     }
51 | 
52 |     // Return true to signal that we want to use the handler.
53 |     return true;
54 |   },
55 |   createHandlerBoundToURL('/index.html'),
56 | );
57 | 
58 | registerRoute(
59 |   ({ url }) =>
60 |     url.origin === self.location.origin &&
61 |     /.(?:png|gif|jpg|jpeg|webp|svg)$/.test(url.pathname),
62 |   new CacheFirst({
63 |     cacheName: 'images',
64 |     plugins: [
65 |       new CacheableResponsePlugin({
66 |         statuses: [0, 200],
67 |       }),
68 |       new ExpirationPlugin({
69 |         maxEntries: 20,
70 |         maxAgeSeconds: 12 * 60 * 60,
71 |       }),
72 |     ],
73 |   }),
74 | );
75 | 
76 | // This allows the web app to trigger skipWaiting via
77 | // registration.waiting.postMessage({type: 'SKIP_WAITING'})
78 | self.addEventListener('message', (event) => {
79 |   const { data } = event as { data: { type: 'SKIP_WAITING' } };
80 | 
81 |   if (data && data.type === 'SKIP_WAITING') {
82 |     void self.skipWaiting();
83 |   }
84 | });
85 | 
86 | // Any other custom service worker logic can go here.
87 | 


--------------------------------------------------------------------------------
/packages/app/public/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="704.000000pt" height="704.000000pt" viewBox="0 0 704.000000 704.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
 9 | </metadata>
10 | <g transform="translate(0.000000,704.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M4259 6759 c-107 -47 -235 -96 -269 -104 -8 -1 -35 -8 -60 -15 -25
13 | -7 -54 -14 -65 -16 -11 -2 -42 -8 -70 -14 -115 -22 -218 -29 -690 -45 -224 -8
14 | -374 -20 -475 -40 -13 -3 -42 -7 -63 -10 -22 -4 -50 -10 -63 -15 -13 -5 -24
15 | -7 -24 -5 0 3 -16 -1 -35 -9 -20 -9 -39 -15 -43 -16 -5 0 -65 -17 -92 -25 -63
16 | -20 -261 -122 -355 -183 -55 -36 -102 -69 -105 -72 -3 -3 -26 -21 -52 -40 -27
17 | -18 -48 -37 -48 -41 0 -4 -6 -9 -14 -11 -20 -5 -142 -115 -316 -285 -85 -84
18 | -156 -153 -157 -153 -1 0 -26 -25 -55 -57 -29 -31 -75 -80 -103 -108 -27 -29
19 | -93 -98 -145 -155 -52 -56 -108 -117 -125 -135 -117 -127 -248 -280 -345 -405
20 | -28 -36 -59 -74 -68 -86 -10 -11 -38 -52 -62 -90 -25 -38 -48 -70 -52 -72 -5
21 | -2 -8 -8 -8 -13 0 -5 -15 -32 -33 -61 -27 -44 -102 -192 -138 -273 -14 -33
22 | -67 -198 -72 -225 -3 -14 -9 -43 -15 -65 -6 -22 -13 -58 -16 -80 -3 -22 -9
23 | -65 -13 -95 -5 -30 -8 -147 -7 -260 0 -184 4 -250 19 -330 2 -14 7 -41 9 -60
24 | 6 -37 8 -49 21 -115 10 -48 7 -35 29 -124 11 -42 15 -76 10 -80 -28 -19 -67
25 | -113 -69 -166 0 -16 8 -57 18 -90 10 -33 19 -64 21 -70 10 -37 53 -175 79
26 | -255 26 -77 40 -103 74 -137 23 -24 49 -43 57 -43 8 0 16 -5 18 -10 3 -11 72
27 | -22 126 -20 18 0 32 -4 32 -11 0 -6 14 -31 30 -56 17 -24 30 -46 30 -48 0 -16
28 | 215 -311 280 -385 17 -19 50 -57 74 -85 197 -225 482 -464 756 -634 178 -111
29 | 300 -173 565 -287 44 -19 231 -84 255 -89 3 0 37 -10 75 -22 73 -22 260 -65
30 | 355 -82 79 -14 123 -20 275 -37 86 -10 545 -11 599 -1 21 3 56 9 78 12 22 4
31 | 50 10 62 14 11 5 23 8 26 8 15 -1 94 30 153 61 115 60 191 149 251 295 8 20
32 | 19 37 23 36 32 -7 385 162 505 242 33 21 63 39 67 39 4 0 16 8 27 18 10 10 41
33 | 33 69 52 55 38 58 40 159 125 85 71 240 225 317 315 64 74 184 236 219 295 13
34 | 22 26 42 29 45 25 22 231 443 231 471 0 6 7 25 15 42 15 33 82 261 91 311 3
35 | 16 7 33 10 38 3 5 7 23 9 41 3 32 11 78 20 127 3 14 8 52 10 85 6 64 10 70 70
36 | 86 22 6 103 30 180 54 139 44 146 45 158 10 4 -11 204 51 293 90 93 41 168
37 | 126 204 231 27 78 21 193 -14 297 -15 42 -29 85 -31 95 -2 9 -17 58 -33 107
38 | -31 95 -173 537 -177 555 -1 3 -4 12 -8 20 -8 20 -30 93 -33 105 -1 6 -16 53
39 | -34 105 -18 52 -34 104 -35 115 -2 11 -9 36 -16 55 -7 19 -14 42 -17 50 -95
40 | 291 -119 336 -212 399 -117 80 -224 86 -416 23 -66 -22 -140 -49 -165 -60 -25
41 | -12 -57 -23 -70 -26 -24 -4 -42 -10 -76 -23 -10 -3 -24 -7 -30 -9 -7 -1 -43
42 | -12 -80 -24 -38 -12 -75 -23 -83 -25 -8 -2 -34 -10 -58 -19 -42 -15 -43 -15
43 | -72 12 -23 23 -26 31 -18 47 6 11 14 22 18 25 9 7 100 136 127 179 12 20 46
44 | 86 76 146 50 102 62 128 66 147 1 4 10 27 20 50 30 70 81 292 88 376 4 64 2
45 | 86 -13 118 -10 21 -24 42 -30 47 -7 4 -19 13 -26 21 -26 26 -60 37 -109 38
46 | -28 0 -56 -5 -62 -11 -17 -17 -47 -13 -47 7 0 22 -45 70 -78 84 -46 18 -89 10
47 | -145 -25 -88 -56 -146 -70 -224 -53 -61 13 -122 65 -152 130 -11 22 -35 75
48 | -54 116 -39 85 -91 142 -165 183 -66 36 -80 39 -178 43 -78 3 -85 1 -195 -47z"/>
49 | </g>
50 | </svg>
51 | 


--------------------------------------------------------------------------------
/packages/player/src/renderer/vrRenderer.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-underscore-dangle */
  2 | import { Renderer } from './renderer';
  3 | import { mat4, vec3 } from 'gl-matrix';
  4 | import type { Format, Layout } from '../types';
  5 | import type { RenderProps } from './renderProps';
  6 | import type { Texture2DOptions } from 'regl';
  7 | 
  8 | export class VrRenderer extends Renderer {
  9 |   private raf = 0;
 10 | 
 11 |   constructor(
 12 |     private readonly xrSession: XRSession,
 13 |     private readonly video: HTMLVideoElement,
 14 |     canvas: HTMLCanvasElement,
 15 |     layout: Layout,
 16 |     flipLayout: boolean,
 17 |     format: Format,
 18 |   ) {
 19 |     super(canvas, layout, flipLayout, format);
 20 |   }
 21 | 
 22 |   protected stopDrawLoop(): void {
 23 |     window.cancelAnimationFrame(this.raf);
 24 |   }
 25 | 
 26 |   protected async startDrawLoop(): Promise<void> {
 27 |     // **** First hack to get this to work with regl:
 28 |     await this.regl._gl.makeXRCompatible();
 29 |     await this.xrSession.updateRenderState({
 30 |       baseLayer: new XRWebGLLayer(this.xrSession, this.regl._gl),
 31 |       depthFar: this.xrSession.renderState.depthFar,
 32 |       depthNear: this.xrSession.renderState.depthNear,
 33 |     });
 34 | 
 35 |     const textureProps: Texture2DOptions = { data: this.video, flipY: true };
 36 |     const texture = this.regl.texture(textureProps);
 37 | 
 38 |     const model = this.getModelMatrix(this.video);
 39 | 
 40 |     const view = mat4.create();
 41 | 
 42 |     const offsets = this.getTexCoordScaleOffsets();
 43 |     const xrReferenceSpace =
 44 |       await this.xrSession.requestReferenceSpace('local');
 45 | 
 46 |     const drawLoop: XRFrameRequestCallback = (
 47 |       _time: DOMHighResTimeStamp,
 48 |       xrFrame: XRFrame,
 49 |     ) => {
 50 |       const glLayer = this.xrSession.renderState.baseLayer;
 51 |       const pose = xrFrame.getViewerPose(xrReferenceSpace);
 52 | 
 53 |       if (!glLayer || !pose) {
 54 |         return;
 55 |       }
 56 | 
 57 |       // **** Second hack to get this to work with regl. Bind the framebuffer and clear it before
 58 |       // **** rendering to it. Note that this is not a regl framebuffer, it's just a WebGL framebuffer
 59 |       // **** ID handed to us by WebXR.
 60 |       this.regl._gl.bindFramebuffer(
 61 |         this.regl._gl.FRAMEBUFFER,
 62 |         glLayer.framebuffer,
 63 |       );
 64 |       this.regl._gl.clearColor(0, 0, 0, 1);
 65 |       this.regl._gl.clear(
 66 |         // eslint-disable-next-line no-bitwise
 67 |         this.regl._gl.DEPTH_BUFFER_BIT | this.regl._gl.COLOR_BUFFER_BIT,
 68 |       );
 69 | 
 70 |       // Render each eye.
 71 |       pose.views.forEach((poseView) => {
 72 |         const { position } = poseView.transform;
 73 | 
 74 |         const viewport = glLayer.getViewport(poseView);
 75 | 
 76 |         if (viewport === undefined) {
 77 |           throw new Error('Viewport is undefined');
 78 |         }
 79 | 
 80 |         const props: RenderProps = {
 81 |           model,
 82 |           view: mat4.translate(
 83 |             view,
 84 |             poseView.transform.inverse.matrix,
 85 |             vec3.fromValues(position.x, position.y, position.z),
 86 |           ),
 87 |           projection: poseView.projectionMatrix,
 88 |           texture: texture.subimage(textureProps),
 89 |           viewport,
 90 |           texCoordScaleOffset:
 91 |             poseView.eye === 'left' ? offsets[0] : offsets[1],
 92 |         };
 93 |         this.cmdRender(props);
 94 |       });
 95 | 
 96 |       this.raf = this.xrSession.requestAnimationFrame(drawLoop);
 97 |     };
 98 | 
 99 |     this.raf = this.xrSession.requestAnimationFrame(drawLoop);
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/packages/app/src/worker/videoRecognition.worker/videoRecognition.ts:
--------------------------------------------------------------------------------
  1 | import { linSpace, nWise } from 'helper/util';
  2 | import type { Format, Layout } from '@vr-viewer/player';
  3 | 
  4 | const PIXEL_RGBA_SIZE = 4;
  5 | 
  6 | function getPixelDiff(a: number[][], b: number[][]) {
  7 |   const diffs = a.map((pixel, index) => {
  8 |     const rDiff = pixel[0] - b[index][0];
  9 |     const gDiff = pixel[1] - b[index][1];
 10 |     const bDiff = pixel[2] - b[index][2];
 11 |     return Math.sqrt(rDiff ** 2 + gDiff ** 2 + bDiff ** 2);
 12 |   });
 13 |   const average = diffs.reduce((_a, _b) => _a + _b, 0) / diffs.length;
 14 |   return average;
 15 | }
 16 | 
 17 | function getPixelRow(imageData: ImageData, row: number) {
 18 |   const rowData = imageData.data.slice(
 19 |     row * imageData.width * PIXEL_RGBA_SIZE,
 20 |     (row + 1) * imageData.width * PIXEL_RGBA_SIZE,
 21 |   );
 22 |   return Array.from(nWise(PIXEL_RGBA_SIZE, rowData));
 23 | }
 24 | 
 25 | function getPixelColumn(imageData: ImageData, column: number) {
 26 |   const columnPixels = [] as number[][];
 27 | 
 28 |   for (
 29 |     let i = column * PIXEL_RGBA_SIZE;
 30 |     i < imageData.height * imageData.width * PIXEL_RGBA_SIZE;
 31 |     i += imageData.width * PIXEL_RGBA_SIZE
 32 |   ) {
 33 |     columnPixels.push(Array.from(imageData.data.slice(i, i + PIXEL_RGBA_SIZE)));
 34 |   }
 35 | 
 36 |   return columnPixels;
 37 | }
 38 | 
 39 | export function detectLayout(frames: ImageData[]): Layout {
 40 |   const frameVertMirrorValues = frames.map((frame) => {
 41 |     const numRows = 30;
 42 |     const rowNumbers = linSpace(0, frame.height - 1, numRows).map((n) =>
 43 |       Math.floor(n),
 44 |     );
 45 | 
 46 |     const rows = rowNumbers.map((rowNumber) => getPixelRow(frame, rowNumber));
 47 | 
 48 |     const diffs = rows.map((row) => {
 49 |       return getPixelDiff(
 50 |         row.slice(0, frame.width / 2),
 51 |         row.slice(-(frame.width / 2)),
 52 |       );
 53 |     });
 54 | 
 55 |     const avgDiff = diffs.reduce((_a, _b) => _a + _b, 0) / diffs.length;
 56 |     return avgDiff;
 57 |   });
 58 | 
 59 |   const avgFrameVertMirrorValues =
 60 |     frameVertMirrorValues.reduce((a, b) => a + b, 0) /
 61 |     frameVertMirrorValues.length;
 62 | 
 63 |   const frameHorizontalMirrorValues = frames.map((frame) => {
 64 |     const numColumns = 30;
 65 |     const columnNumbers = linSpace(0, frame.width - 1, numColumns).map((n) =>
 66 |       Math.floor(n),
 67 |     );
 68 | 
 69 |     const columns = columnNumbers.map((columnNumber) =>
 70 |       getPixelColumn(frame, columnNumber),
 71 |     );
 72 | 
 73 |     const diffs = columns.map((column) => {
 74 |       return getPixelDiff(
 75 |         column.slice(0, frame.height / 2),
 76 |         column.slice(-(frame.height / 2)),
 77 |       );
 78 |     });
 79 | 
 80 |     const avgDiff = diffs.reduce((_a, _b) => _a + _b, 0) / diffs.length;
 81 |     return avgDiff;
 82 |   });
 83 | 
 84 |   const avgFrameHorizontalMirrorValues =
 85 |     frameHorizontalMirrorValues.reduce((a, b) => a + b, 0) /
 86 |     frameHorizontalMirrorValues.length;
 87 | 
 88 |   if (avgFrameVertMirrorValues < avgFrameHorizontalMirrorValues / 1.5) {
 89 |     return 'stereoLeftRight';
 90 |   }
 91 | 
 92 |   if (avgFrameHorizontalMirrorValues < avgFrameVertMirrorValues / 1.5) {
 93 |     return 'stereoTopBottom';
 94 |   }
 95 | 
 96 |   return 'mono';
 97 | }
 98 | 
 99 | export function detectFormat(frames: ImageData[]): Format {
100 |   const frame = frames[0];
101 | 
102 |   const topRowPixels = getPixelRow(frame, 0);
103 |   const bottomRowPixels = getPixelRow(frame, frame.height - 1);
104 | 
105 |   const topRowDiff = topRowPixels.map((pixel, i) => {
106 |     if (i === topRowPixels.length - 1) {
107 |       return 0;
108 |     }
109 |     return getPixelDiff([pixel], [topRowPixels[i + 1]]);
110 |   });
111 |   const avgTopRowDiff =
112 |     topRowDiff.reduce((a, b) => a + b, 0) / topRowDiff.length;
113 | 
114 |   const bottomRowDiff = bottomRowPixels.map((pixel, i) => {
115 |     if (i === bottomRowPixels.length - 1) {
116 |       return 0;
117 |     }
118 | 
119 |     return getPixelDiff([pixel], [bottomRowPixels[i + 1]]);
120 |   });
121 |   const avgBottomRowDiff =
122 |     bottomRowDiff.reduce((a, b) => a + b, 0) / bottomRowDiff.length;
123 | 
124 |   if (avgTopRowDiff + avgBottomRowDiff < 1) {
125 |     const leftColumn = getPixelColumn(frame, 0);
126 |     const rightColumn = getPixelColumn(frame, frame.width - 1);
127 | 
128 |     const leftRightDiff = getPixelDiff(leftColumn, rightColumn);
129 | 
130 |     if (leftRightDiff < 10) {
131 |       return '360';
132 |     }
133 | 
134 |     return '180';
135 |   }
136 | 
137 |   return 'screen';
138 | }
139 | 


--------------------------------------------------------------------------------
/packages/player/src/renderer/renderer.ts:
--------------------------------------------------------------------------------
  1 | import { mat4 } from 'gl-matrix';
  2 | import { sphere } from '../primitive';
  3 | import { square } from '../primitive/square';
  4 | import reglInit from 'regl';
  5 | import type { Format, Layout } from '../types';
  6 | import type { Primitive } from '../primitive';
  7 | import type { Regl } from 'regl';
  8 | import type { RenderProps } from './renderProps';
  9 | 
 10 | export abstract class Renderer {
 11 |   protected abstract startDrawLoop(): Promise<void>;
 12 |   protected abstract stopDrawLoop(): void;
 13 | 
 14 |   public async start() {
 15 |     await this.startDrawLoop();
 16 |   }
 17 | 
 18 |   public stop() {
 19 |     this.stopDrawLoop();
 20 |     this.regl.destroy();
 21 |   }
 22 | 
 23 |   protected readonly regl: Regl;
 24 | 
 25 |   protected readonly cmdRender: reglInit.DrawCommand<
 26 |     reglInit.DefaultContext,
 27 |     RenderProps
 28 |   >;
 29 | 
 30 |   constructor(
 31 |     protected readonly canvas: HTMLCanvasElement,
 32 |     protected readonly layout: Layout,
 33 |     protected readonly flipLayout: boolean,
 34 |     protected readonly format: Format,
 35 |   ) {
 36 |     const mesh = this.getMesh();
 37 | 
 38 |     this.regl = reglInit({ pixelRatio: 1, canvas: this.canvas });
 39 | 
 40 |     this.cmdRender = this.regl({
 41 |       vert: `
 42 |       precision highp float;
 43 | 
 44 |       attribute vec3 position;
 45 |       attribute vec2 uv;
 46 | 
 47 |       uniform vec4 texCoordScaleOffset;
 48 |       uniform mat4 model;
 49 |       uniform mat4 view;
 50 |       uniform mat4 projection;
 51 | 
 52 |       varying vec2 mappedUv;
 53 | 
 54 |       void main() {
 55 |         gl_Position = projection * view * model * vec4(position, 1);
 56 |         mappedUv = uv * texCoordScaleOffset.xy + texCoordScaleOffset.zw;
 57 |       }
 58 |       `,
 59 |       frag: `
 60 |       precision highp float;
 61 | 
 62 |       uniform sampler2D texture;
 63 | 
 64 |       varying vec2 mappedUv;
 65 | 
 66 |       void main() {
 67 |         gl_FragColor = texture2D(texture, mappedUv);
 68 |       }
 69 |       `,
 70 |       attributes: {
 71 |         position: mesh.positions,
 72 |         uv: mesh.uvs,
 73 |       },
 74 |       // TODO: https://github.com/regl-project/regl/pull/632
 75 |       uniforms: {
 76 |         model: this.regl.prop<RenderProps, 'model'>('model'),
 77 |         view: this.regl.prop<RenderProps, 'view'>('view'),
 78 |         projection: this.regl.prop<RenderProps, 'projection'>('projection'),
 79 |         texture: this.regl.prop<RenderProps, 'texture'>('texture'),
 80 |         texCoordScaleOffset: this.regl.prop<RenderProps, 'texCoordScaleOffset'>(
 81 |           'texCoordScaleOffset',
 82 |         ),
 83 |       },
 84 |       viewport: this.regl.prop<RenderProps, 'viewport'>('viewport'),
 85 |       elements: mesh.indices,
 86 |       cull: {
 87 |         enable: true,
 88 |         face: 'front',
 89 |       },
 90 |     });
 91 |   }
 92 | 
 93 |   private getMesh(): Primitive {
 94 |     switch (this.format) {
 95 |       case '360':
 96 |         return sphere({ radius: 1, segments: 32 });
 97 |       case '180': {
 98 |         return sphere({ radius: 1, segments: 16, halfSphere: true });
 99 |       }
100 |       case 'screen':
101 |       // falls through
102 |       default:
103 |         return square({ scale: 1 });
104 |     }
105 |   }
106 | 
107 |   private getAspectRation(video: HTMLVideoElement) {
108 |     switch (this.layout) {
109 |       case 'stereoLeftRight':
110 |         return (video.videoWidth * 0.5) / video.videoHeight;
111 |       case 'stereoTopBottom':
112 |         return (video.videoWidth / video.videoHeight) * 0.5;
113 |       case 'mono':
114 |       // falls through
115 |       default:
116 |         return video.videoWidth / video.videoHeight;
117 |     }
118 |   }
119 | 
120 |   protected getModelMatrix(video: HTMLVideoElement) {
121 |     const aspectRatio = this.getAspectRation(video);
122 | 
123 |     const model = mat4.create();
124 |     // rotate model 180 deg to flip z axis as WebXR looks towards -z
125 |     // https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Geometry
126 |     mat4.rotateY(model, model, Math.PI);
127 | 
128 |     if (this.format === 'screen') {
129 |       const screenHeight = 1;
130 | 
131 |       // scale according to aspect ratio
132 |       mat4.scale(model, model, [screenHeight * aspectRatio, screenHeight, 1]);
133 |       // move screen back a bit
134 |       mat4.translate(model, model, [0, 0, screenHeight]);
135 |     }
136 | 
137 |     if (this.format === '360') {
138 |       // rotate model 90 deg to look at the center of the video
139 |       mat4.rotateY(model, model, -Math.PI / 2);
140 |     }
141 | 
142 |     return model;
143 |   }
144 | 
145 |   protected getTexCoordScaleOffsets() {
146 |     let offsets;
147 |     switch (this.layout) {
148 |       case 'stereoLeftRight':
149 |         offsets = [
150 |           new Float32Array([0.5, 1.0, 0.0, 0.0]),
151 |           new Float32Array([0.5, 1.0, 0.5, 0.0]),
152 |         ];
153 |         break;
154 |       case 'stereoTopBottom':
155 |         offsets = [
156 |           new Float32Array([1.0, 0.5, 0.0, 0.0]),
157 |           new Float32Array([1.0, 0.5, 0.0, 0.5]),
158 |         ];
159 |         break;
160 |       case 'mono':
161 |       // falls through
162 |       default:
163 |         offsets = [
164 |           new Float32Array([1.0, 1.0, 0.0, 0.0]),
165 |           new Float32Array([1.0, 1.0, 0.0, 0.0]),
166 |         ];
167 |     }
168 |     if (this.flipLayout) {
169 |       return offsets.reverse();
170 |     }
171 |     return offsets;
172 |   }
173 | }
174 | 


--------------------------------------------------------------------------------
/packages/app/src/serviceWorkerRegistration.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-console */
  2 | // This optional code is used to register a service worker.
  3 | // register() is not called by default.
  4 | 
  5 | // This lets the app load faster on subsequent visits in production, and gives
  6 | // it offline capabilities. However, it also means that developers (and users)
  7 | // will only see deployed updates on subsequent visits to a page, after all the
  8 | // existing tabs open on the page have been closed, since previously cached
  9 | // resources are updated in the background.
 10 | 
 11 | // To learn more about the benefits of this model and instructions on how to
 12 | // opt-in, read https://cra.link/PWA
 13 | 
 14 | const isLocalhost = Boolean(
 15 |   window.location.hostname === 'localhost' ||
 16 |     // [::1] is the IPv6 localhost address.
 17 |     window.location.hostname === '[::1]' ||
 18 |     // 127.0.0.0/8 are considered localhost for IPv4.
 19 |     window.location.hostname.match(
 20 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
 21 |     ),
 22 | );
 23 | 
 24 | type Config = {
 25 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 26 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 27 | };
 28 | 
 29 | function registerValidSW(swUrl: string, config?: Config) {
 30 |   navigator.serviceWorker
 31 |     .register(swUrl)
 32 |     .then((registration) => {
 33 |       // eslint-disable-next-line no-param-reassign
 34 |       registration.onupdatefound = () => {
 35 |         const installingWorker = registration.installing;
 36 |         if (installingWorker == null) {
 37 |           return;
 38 |         }
 39 |         installingWorker.onstatechange = () => {
 40 |           if (installingWorker.state === 'installed') {
 41 |             if (navigator.serviceWorker.controller) {
 42 |               // At this point, the updated precached content has been fetched,
 43 |               // but the previous service worker will still serve the older
 44 |               // content until all client tabs are closed.
 45 |               console.log(
 46 |                 'New content is available and will be used when all ' +
 47 |                   'tabs for this page are closed. See https://cra.link/PWA.',
 48 |               );
 49 | 
 50 |               // Execute callback
 51 |               if (config && config.onUpdate) {
 52 |                 config.onUpdate(registration);
 53 |               }
 54 |             } else {
 55 |               // At this point, everything has been precached.
 56 |               // It's the perfect time to display a
 57 |               // "Content is cached for offline use." message.
 58 |               console.log('Content is cached for offline use.');
 59 | 
 60 |               // Execute callback
 61 |               if (config && config.onSuccess) {
 62 |                 config.onSuccess(registration);
 63 |               }
 64 |             }
 65 |           }
 66 |         };
 67 |       };
 68 |     })
 69 |     .catch((error) => {
 70 |       console.error('Error during service worker registration:', error);
 71 |     });
 72 | }
 73 | 
 74 | function checkValidServiceWorker(swUrl: string, config?: Config) {
 75 |   // Check if the service worker can be found. If it can't reload the page.
 76 |   fetch(swUrl, {
 77 |     headers: { 'Service-Worker': 'script' },
 78 |   })
 79 |     .then((response) => {
 80 |       // Ensure service worker exists, and that we really are getting a JS file.
 81 |       const contentType = response.headers.get('content-type');
 82 |       if (
 83 |         response.status === 404 ||
 84 |         (contentType != null && contentType.indexOf('javascript') === -1)
 85 |       ) {
 86 |         // No service worker found. Probably a different app. Reload the page.
 87 |         void navigator.serviceWorker.ready.then((registration) => {
 88 |           void registration.unregister().then(() => {
 89 |             window.location.reload();
 90 |           });
 91 |         });
 92 |       } else {
 93 |         // Service worker found. Proceed as normal.
 94 |         registerValidSW(swUrl, config);
 95 |       }
 96 |     })
 97 |     .catch(() => {
 98 |       console.log(
 99 |         'No internet connection found. App is running in offline mode.',
100 |       );
101 |     });
102 | }
103 | 
104 | export function register(config?: Config) {
105 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
106 |     window.addEventListener('load', () => {
107 |       const swUrl = '/service-worker.js';
108 | 
109 |       if (isLocalhost) {
110 |         // This is running on localhost. Let's check if a service worker still exists or not.
111 |         checkValidServiceWorker(swUrl, config);
112 | 
113 |         // Add some additional logging to localhost, pointing developers to the
114 |         // service worker/PWA documentation.
115 |         void navigator.serviceWorker.ready.then(() => {
116 |           console.log(
117 |             'This web app is being served cache-first by a service ' +
118 |               'worker. To learn more, visit https://cra.link/PWA',
119 |           );
120 |         });
121 |       } else {
122 |         // Is not localhost. Just register service worker
123 |         registerValidSW(swUrl, config);
124 |       }
125 |     });
126 |   }
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready
132 |       .then((registration) => {
133 |         void registration.unregister();
134 |       })
135 |       .catch((error: Error) => {
136 |         console.error(error.message);
137 |       });
138 |   }
139 | }
140 | 


--------------------------------------------------------------------------------
/packages/app/src/components/ui/UI.tsx:
--------------------------------------------------------------------------------
  1 | import { Control } from './Control';
  2 | import { GroupControl } from './GroupControl';
  3 | import { GroupControlElement } from './GroupControlElement';
  4 | import {
  5 |   autoDetectAtom,
  6 |   autoPlayAtom,
  7 |   debugAtom,
  8 |   detectingAtom,
  9 |   flipLayoutAtom,
 10 |   formatAtom,
 11 |   layoutAtom,
 12 |   videoUrlAtom,
 13 | } from 'atoms/controls';
 14 | import { useAtom, useAtomValue } from 'jotai';
 15 | import { useXRSession } from 'hooks/useXRSession';
 16 | import clsx from 'clsx';
 17 | import type { DropzoneInputProps } from 'react-dropzone';
 18 | 
 19 | export function UI({ fileInputProps }: { fileInputProps: DropzoneInputProps }) {
 20 |   const [autoPlay, setAutoPlay] = useAtom(autoPlayAtom);
 21 |   const [autoDetect, setAutoDetect] = useAtom(autoDetectAtom);
 22 | 
 23 |   const detecting = useAtomValue(detectingAtom);
 24 | 
 25 |   const [layout, setLayout] = useAtom(layoutAtom);
 26 |   const [flipLayout, setFlipLayout] = useAtom(flipLayoutAtom);
 27 |   const [format, setFormat] = useAtom(formatAtom);
 28 | 
 29 |   const [debug, setDebug] = useAtom(debugAtom);
 30 | 
 31 |   const [, setVideoUrl] = useAtom(videoUrlAtom);
 32 | 
 33 |   const [xrSupported, xrSession, requestXrSession] = useXRSession();
 34 | 
 35 |   return (
 36 |     <div
 37 |       data-nosnippet
 38 |       className="flex flex-wrap items-start whitespace-nowrap"
 39 |     >
 40 |       <Control
 41 |         aria-current={Boolean(xrSession)}
 42 |         disabled={!xrSupported}
 43 |         onClick={() => {
 44 |           if (xrSession) {
 45 |             void xrSession.end();
 46 |           } else {
 47 |             requestXrSession();
 48 |           }
 49 |         }}
 50 |       >
 51 |         {
 52 |           // eslint-disable-next-line no-nested-ternary
 53 |           xrSupported
 54 |             ? xrSession
 55 |               ? 'Exit VR'
 56 |               : 'Enter VR'
 57 |             : 'VR Not Supported'
 58 |         }
 59 |       </Control>
 60 | 
 61 |       <label
 62 |         htmlFor="file-input"
 63 |         className="cursor-pointer flex m-2 py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-lg shadow-sm"
 64 |       >
 65 |         Select File
 66 |         <input id="file-input" {...fileInputProps} />
 67 |       </label>
 68 | 
 69 |       <button
 70 |         type="button"
 71 |         className="cursor-pointer flex m-2 py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-lg shadow-sm"
 72 |         onClick={() => {
 73 |           const fileInput = document.getElementById(
 74 |             'file-input',
 75 |           ) as HTMLInputElement;
 76 |           fileInput.value = '';
 77 | 
 78 |           setVideoUrl(null);
 79 |         }}
 80 |       >
 81 |         Select URL
 82 |       </button>
 83 | 
 84 |       <Control aria-current={autoPlay} onClick={() => setAutoPlay(!autoPlay)}>
 85 |         Autoplay
 86 |       </Control>
 87 | 
 88 |       <div className="flex relative">
 89 |         {detecting && (
 90 |           <span className="absolute top-1 right-1 h-3 w-3" role="status">
 91 |             <span className="sr-only">Loading...</span>
 92 |             <span
 93 |               role="presentation"
 94 |               className="absolute h-full w-full rounded-full bg-white shadow-sm"
 95 |             />
 96 |             <span
 97 |               role="presentation"
 98 |               className="animate-ping absolute h-full w-full rounded-full bg-white"
 99 |             />
100 |           </span>
101 |         )}
102 |         <Control
103 |           aria-current={autoDetect}
104 |           onClick={() => setAutoDetect(!autoDetect)}
105 |         >
106 |           Detect Video Settings
107 |         </Control>
108 |       </div>
109 | 
110 |       <div className="flex flex-col items-center">
111 |         <GroupControl>
112 |           <GroupControlElement
113 |             aria-current={layout === 'mono'}
114 |             onClick={() => setLayout('mono')}
115 |           >
116 |             Mono
117 |           </GroupControlElement>
118 |           <GroupControlElement
119 |             aria-current={layout === 'stereoLeftRight'}
120 |             onClick={() => setLayout('stereoLeftRight')}
121 |           >
122 |             Left | Right
123 |           </GroupControlElement>
124 |           <GroupControlElement
125 |             aria-current={layout === 'stereoTopBottom'}
126 |             onClick={() => setLayout('stereoTopBottom')}
127 |           >
128 |             Top | Bottom
129 |           </GroupControlElement>
130 |         </GroupControl>
131 | 
132 |         <div
133 |           className={clsx({
134 |             hidden: !(
135 |               layout === 'stereoLeftRight' || layout === 'stereoTopBottom'
136 |             ),
137 |           })}
138 |         >
139 |           <label htmlFor="flip-orientation-input" className="flex items-center">
140 |             <input
141 |               id="flip-orientation-input"
142 |               type="checkbox"
143 |               className="block w-4 h-4 mr-2"
144 |               checked={flipLayout}
145 |               onChange={() => {
146 |                 setFlipLayout(!flipLayout);
147 |               }}
148 |             />
149 | 
150 |             <div>Flip Layout</div>
151 |           </label>
152 |         </div>
153 |       </div>
154 | 
155 |       <GroupControl>
156 |         <GroupControlElement
157 |           aria-current={format === 'screen'}
158 |           onClick={() => setFormat('screen')}
159 |         >
160 |           Screen
161 |         </GroupControlElement>
162 |         <GroupControlElement
163 |           aria-current={format === '180'}
164 |           onClick={() => setFormat('180')}
165 |         >
166 |           180°
167 |         </GroupControlElement>
168 |         <GroupControlElement
169 |           aria-current={format === '360'}
170 |           onClick={() => setFormat('360')}
171 |         >
172 |           360°
173 |         </GroupControlElement>
174 |       </GroupControl>
175 | 
176 |       <Control aria-current={debug} onClick={() => setDebug(!debug)}>
177 |         Preview
178 |       </Control>
179 | 
180 |       <a
181 |         target="_blank"
182 |         rel="noopener noreferrer"
183 |         href="https://github.com/TimoWilhelm/vr-player"
184 |         aria-label="View source on GitHub"
185 |         className="flex m-2 py-2 px-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-lg shadow-sm"
186 |       >
187 |         <svg
188 |           role="img"
189 |           viewBox="0 0 24 24"
190 |           xmlns="http://www.w3.org/2000/svg"
191 |           className="h-5"
192 |           fill="currentColor"
193 |         >
194 |           <title>GitHub</title>
195 |           <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
196 |         </svg>
197 |       </a>
198 |     </div>
199 |   );
200 | }
201 | 


--------------------------------------------------------------------------------
/packages/app/src/components/App.tsx:
--------------------------------------------------------------------------------
  1 | import { ArrowDownTrayIcon, XMarkIcon } from '@heroicons/react/24/solid';
  2 | import { DebugPlayer } from 'components/DebugPlayer';
  3 | import { Toaster, toast } from 'react-hot-toast';
  4 | import { UI } from './ui/UI';
  5 | import { VrPlayer } from 'components/VrPlayer';
  6 | import {
  7 |   autoDetectAtom,
  8 |   autoPlayAtom,
  9 |   debugAtom,
 10 |   detectingAtom,
 11 |   flipLayoutAtom,
 12 |   formatAtom,
 13 |   layoutAtom,
 14 |   videoUrlAtom,
 15 | } from 'atoms/controls';
 16 | import { getImageFrames } from 'helper/getImageFrames';
 17 | import { transfer, wrap } from 'comlink';
 18 | import { useAtom, useSetAtom } from 'jotai';
 19 | import { useDropzone } from 'react-dropzone';
 20 | import { useEffect, useRef, useState } from 'react';
 21 | import { useXRSession } from 'hooks/useXRSession';
 22 | import clsx from 'clsx';
 23 | import type { VideoRecognitionWorker } from 'worker/videoRecognition.worker';
 24 | 
 25 | const worker = wrap<VideoRecognitionWorker>(
 26 |   new Worker(new URL('worker/videoRecognition.worker', import.meta.url)),
 27 | );
 28 | 
 29 | export function App() {
 30 |   const videoRef = useRef<HTMLVideoElement>(null);
 31 |   const canvasRef = useRef<HTMLCanvasElement>(null);
 32 |   const urlInputRef = useRef<HTMLInputElement>(null);
 33 | 
 34 |   const [layout, setLayout] = useAtom(layoutAtom);
 35 |   const [flipLayout] = useAtom(flipLayoutAtom);
 36 |   const [format, setFormat] = useAtom(formatAtom);
 37 | 
 38 |   const [debug, setDebug] = useAtom(debugAtom);
 39 | 
 40 |   const [autoPlay] = useAtom(autoPlayAtom);
 41 |   const [autoDetect] = useAtom(autoDetectAtom);
 42 | 
 43 |   const [file, setFile] = useState<File | null>(null);
 44 |   const [videoUrl, setVideoUrl] = useAtom(videoUrlAtom);
 45 |   const [ready, setReady] = useState(false);
 46 | 
 47 |   const [, xrSession] = useXRSession();
 48 | 
 49 |   const setDetecting = useSetAtom(detectingAtom);
 50 | 
 51 |   useEffect(() => {
 52 |     if (ready && videoRef.current && autoDetect) {
 53 |       setDetecting(true);
 54 | 
 55 |       void (async (video) => {
 56 |         const frames = await getImageFrames(video);
 57 | 
 58 |         const [detectedLayout, detectedFormat] = await worker.recognizeVideo(
 59 |           transfer(frames, [...frames.map((frame) => frame.data.buffer)]),
 60 |         );
 61 | 
 62 |         if (detectedLayout) setLayout(detectedLayout);
 63 |         if (detectedFormat) setFormat(detectedFormat);
 64 | 
 65 |         setDetecting(false);
 66 |       })(videoRef.current);
 67 |     }
 68 |   }, [autoDetect, ready, setDetecting, setFormat, setLayout]);
 69 | 
 70 |   useEffect(() => {
 71 |     let objectUrl = '';
 72 | 
 73 |     if (file) {
 74 |       objectUrl = URL.createObjectURL(file);
 75 |       setVideoUrl(objectUrl);
 76 |     }
 77 | 
 78 |     return () => {
 79 |       URL.revokeObjectURL(objectUrl);
 80 |     };
 81 |   }, [file, setVideoUrl]);
 82 | 
 83 |   useEffect(() => {
 84 |     if (ready && urlInputRef.current) {
 85 |       urlInputRef.current.value = '';
 86 |     }
 87 |   }, [ready]);
 88 | 
 89 |   useEffect(() => {
 90 |     if (videoRef.current) {
 91 |       setReady(false);
 92 |       videoRef.current.src = videoUrl ?? '';
 93 |     }
 94 |   }, [videoUrl]);
 95 | 
 96 |   const { getRootProps, getInputProps, isDragActive } = useDropzone({
 97 |     noClick: true,
 98 |     multiple: false,
 99 |     accept: {
100 |       'video/*': [],
101 |     },
102 |     onDropAccepted: (acceptedFiles) => {
103 |       setFile(acceptedFiles[0]);
104 |     },
105 |     onDropRejected: (rejection) => {
106 |       toast.error(rejection[0].errors[0].message);
107 |     },
108 |   });
109 | 
110 |   return (
111 |     <div
112 |       className="h-full flex-1 flex flex-col text-white grid-effect"
113 |       {...getRootProps()}
114 |     >
115 |       <Toaster position="bottom-center" reverseOrder={false} />
116 |       {videoRef.current && canvasRef.current && ready && debug && (
117 |         <DebugPlayer
118 |           video={videoRef.current}
119 |           canvas={canvasRef.current}
120 |           layout={layout}
121 |           flipLayout={flipLayout}
122 |           format={format}
123 |         />
124 |       )}
125 |       {videoRef.current && canvasRef.current && ready && xrSession && (
126 |         <VrPlayer
127 |           xrSession={xrSession}
128 |           video={videoRef.current}
129 |           canvas={canvasRef.current}
130 |           layout={layout}
131 |           flipLayout={flipLayout}
132 |           format={format}
133 |         />
134 |       )}
135 |       <div className="mr-10">
136 |         <UI fileInputProps={getInputProps()} />
137 |       </div>
138 |       <div className="flex-1 overflow-auto py-4">
139 |         <video
140 |           className={clsx('mx-auto shadow-lg rounded', [
141 |             ready ? 'h-full' : 'h-0',
142 |           ])}
143 |           ref={videoRef}
144 |           playsInline
145 |           preload="auto"
146 |           controls
147 |           autoPlay={autoPlay}
148 |           loop
149 |           onLoadedData={() => setReady(true)}
150 |           crossOrigin="anonymous"
151 |         />
152 |         <div
153 |           hidden={ready}
154 |           className={clsx(
155 |             'h-full flex flex-col justify-center items-center gap-2',
156 |             {
157 |               hidden: ready,
158 |             },
159 |           )}
160 |         >
161 |           <div className="text-center text-xl font-medium">
162 |             <span className="inline-block">
163 |               Just drag and drop a video file anywhere to play!
164 |             </span>{' '}
165 |             <span className="inline-block">(It never leaves your browser)</span>
166 |           </div>
167 |           <div className="flex items-center justify-center gap-4 w-full px-4">
168 |             <hr className="max-w-64 h-0.5 bg-gray-200 border-0 rounded flex-1" />
169 |             or
170 |             <hr className="max-w-64 h-0.5 my-8 bg-gray-200 border-0 rounded flex-1" />
171 |           </div>
172 |           <div className="flex flex-col items-center">
173 |             <label htmlFor="url-input" className="font-semibold">
174 |               Enter Video URL
175 |             </label>
176 |             <div>
177 |               <input
178 |                 type="url"
179 |                 autoComplete="off"
180 |                 spellCheck="false"
181 |                 autoCorrect="off"
182 |                 autoCapitalize="off"
183 |                 ref={urlInputRef}
184 |                 id="url-input"
185 |                 className="w-96 p-2 my-4 bg-gray-800 text-white rounded border border-gray-600"
186 |                 placeholder="https://example.com/video.mp4"
187 |                 onChange={(e) => {
188 |                   if (e.target.value) {
189 |                     setVideoUrl(e.target.value);
190 |                   }
191 |                 }}
192 |               />
193 |             </div>
194 |           </div>
195 |         </div>
196 |       </div>
197 |       <div
198 |         className={clsx(
199 |           'fixed max-h-[360px] aspect-video h-[30vh] bg-gray-600 border-2 border-white rounded bottom-2 right-2',
200 |           {
201 |             hidden: !debug,
202 |           },
203 |         )}
204 |       >
205 |         <canvas ref={canvasRef} className="w-full h-full" />
206 |         <button
207 |           type="button"
208 |           className="absolute top-0 right-0 p-3"
209 |           onClick={() => {
210 |             setDebug(!debug);
211 |           }}
212 |           aria-label="Close preview"
213 |         >
214 |           <XMarkIcon className="h-5 w-5" />
215 |         </button>
216 |       </div>
217 |       <div
218 |         className={clsx(
219 |           'absolute w-full h-full pointer-events-none flex items-center justify-center',
220 |           {
221 |             hidden: !isDragActive,
222 |           },
223 |         )}
224 |       >
225 |         <div className="absolute w-full h-full bg-black opacity-50 border-8 border-dashed" />
226 |         <div className="w-10 h-10 z-10 animate-bounce ">
227 |           <ArrowDownTrayIcon />
228 |         </div>
229 |       </div>
230 |     </div>
231 |   );
232 | }
233 | 


--------------------------------------------------------------------------------
/org/icon.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
  3 | 
  4 | <svg
  5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  6 |    xmlns:cc="http://creativecommons.org/ns#"
  7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  8 |    xmlns:svg="http://www.w3.org/2000/svg"
  9 |    xmlns="http://www.w3.org/2000/svg"
 10 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 11 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 12 |    width="26mm"
 13 |    height="26mm"
 14 |    viewBox="0 0 25.999999 26.000001"
 15 |    version="1.1"
 16 |    id="svg4668"
 17 |    inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
 18 |    sodipodi:docname="icon.svg"
 19 |    inkscape:export-filename="D:\Workspace\vr-player\org\icon.png"
 20 |    inkscape:export-xdpi="560.66998"
 21 |    inkscape:export-ydpi="560.66998">
 22 |   <defs
 23 |      id="defs4662" />
 24 |   <sodipodi:namedview
 25 |      id="base"
 26 |      pagecolor="#ffffff"
 27 |      bordercolor="#666666"
 28 |      borderopacity="1.0"
 29 |      inkscape:pageopacity="1"
 30 |      inkscape:pageshadow="2"
 31 |      inkscape:zoom="3.959798"
 32 |      inkscape:cx="-75.761698"
 33 |      inkscape:cy="76.161418"
 34 |      inkscape:document-units="mm"
 35 |      inkscape:current-layer="layer1"
 36 |      showgrid="false"
 37 |      inkscape:window-width="2560"
 38 |      inkscape:window-height="1369"
 39 |      inkscape:window-x="-8"
 40 |      inkscape:window-y="-8"
 41 |      inkscape:window-maximized="1"
 42 |      fit-margin-top="2"
 43 |      fit-margin-right="2"
 44 |      fit-margin-left="2"
 45 |      fit-margin-bottom="2"
 46 |      units="mm" />
 47 |   <metadata
 48 |      id="metadata4665">
 49 |     <rdf:RDF>
 50 |       <cc:Work
 51 |          rdf:about="">
 52 |         <dc:format>image/svg+xml</dc:format>
 53 |         <dc:type
 54 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 55 |         <dc:title></dc:title>
 56 |       </cc:Work>
 57 |     </rdf:RDF>
 58 |   </metadata>
 59 |   <g
 60 |      inkscape:label="Layer 1"
 61 |      inkscape:groupmode="layer"
 62 |      id="layer1"
 63 |      transform="translate(-108.88769,-68.379036)">
 64 |     <circle
 65 |        style="fill:#ffb8b8;stroke-width:0.26458332"
 66 |        cx="72.363106"
 67 |        cy="128.33444"
 68 |        r="8.9946327"
 69 |        transform="rotate(-26.52984)"
 70 |        id="circle56" />
 71 |     <path
 72 |        inkscape:connector-curvature="0"
 73 |        style="fill:#2f2e41;stroke-width:0.26458332"
 74 |        d="m 124.56141,91.816636 c -0.41528,0.347316 -1.04095,0.530379 -1.89671,0.556922 a 11.51278,11.51278 0 0 1 -11.35348,-8.104315 c -0.37477,-1.211421 -0.69219,-3.018504 -0.0762,-4.748313 0.44299,-1.243232 1.31273,-2.285912 2.09321,-3.165684 0.67559,-0.761735 1.3806,-1.508 2.09575,-2.217597 0.85429,-0.848204 1.87267,-1.790186 3.15001,-2.232639 0.93598,-0.324024 1.93915,-0.35293 2.90932,-0.380833 0.33801,-0.0099 0.68778,-0.01979 1.02749,-0.04251 a 6.0050918,6.0050918 0 0 0 2.43375,-0.60692 1.2358926,1.2358926 0 0 1 1.02326,-0.06591 1.2576942,1.2576942 0 0 1 0.7346,0.740711 c 0.12266,0.331931 0.23314,0.631272 0.6085,0.741765 a 0.85713358,0.85713358 0 0 0 0.78327,-0.179472 0.44370625,0.44370625 0 0 1 0.41354,-0.09054 0.45229992,0.45229992 0 0 1 0.30753,0.291176 l 0.0308,0.09111 a 0.5770245,0.5770245 0 0 1 0.53297,-0.06411 0.59129612,0.59129612 0 0 1 0.38638,0.631447 5.927725,5.927725 0 0 1 -1.24595,3.012871 5.7733644,5.7733644 0 0 1 -1.72826,1.43868 l -0.10649,0.05874 -0.0736,-0.110887 c -2.98911,1.104405 -3.90191,4.236116 -3.7543,6.820164 l -0.26149,0.03512 a 0.64008265,0.64008265 0 0 0 -0.30016,-0.403098 0.77806021,0.77806021 0 0 0 -0.58744,-0.102201 1.0075042,1.0075042 0 0 0 -0.70072,0.871337 1.4953059,1.4953059 0 0 0 0.41304,1.13293 4.0585205,4.0585205 0 0 0 1.06971,0.762921 c 0.17936,0.101279 0.36495,0.206094 0.54074,0.321132 a 4.8448463,4.8448463 0 0 1 2.01625,2.80982 c 0.13646,0.527547 0.21479,1.28021 -0.18691,1.86981 a 1.6064442,1.6064442 0 0 1 -0.2984,0.328377 z"
 75 |        id="path58" />
 76 |     <path
 77 |        inkscape:connector-curvature="0"
 78 |        style="fill:#3f3d56;stroke-width:0.26458332"
 79 |        d="m 128.83276,83.943155 a 1.2459917,1.2459917 0 0 1 -1.18902,-0.876565 c -3.61017,-1.881452 -1.70155,-3.208258 -1.45294,-4.70191 a 1.2433168,1.2433168 0 0 1 0.82089,-1.555057 l 3.69073,-1.140618 a 1.2447217,1.2447217 0 0 1 1.55533,0.821002 l 1.45301,4.70191 a 1.244899,1.244899 0 0 1 -0.82094,1.555072 l -3.69073,1.140619 a 1.2404169,1.2404169 0 0 1 -0.36633,0.05555 z"
 80 |        id="path62" />
 81 |     <path
 82 |        inkscape:connector-curvature="0"
 83 |        style="fill:#6c63ff;stroke-width:0.26458332"
 84 |        d="m 131.24442,75.505974 a 1.2501801,1.2501801 0 0 1 1.20339,0.881417 l 1.5307,4.807407 a 1.3010277,1.3010277 0 0 1 -0.0726,0.975027 1.243928,1.243928 0 0 1 -0.72242,0.635931 l -0.82986,0.278395 -2.30432,-7.236801 0.82974,-0.278392 a 1.2097623,1.2097623 0 0 1 0.36536,-0.06298 z"
 85 |        id="path64" />
 86 |     <path
 87 |        inkscape:connector-curvature="0"
 88 |        style="fill:#3f3d56;stroke-width:0.26458332"
 89 |        d="m 112.16633,86.621415 a 0.80531494,0.80531494 0 0 1 -0.76875,-0.566761 l -0.38447,-1.24411 a 0.80406875,0.80406875 0 0 1 0.53091,-1.005623 l 16.6641,-5.149686 a 0.80406875,0.80406875 0 0 1 1.00581,0.530976 l 0.38441,1.243981 a 0.80498156,0.80498156 0 0 1 -0.53084,1.005623 l -16.66417,5.149686 a 0.79970577,0.79970577 0 0 1 -0.237,0.03591 z"
 90 |        id="path66" />
 91 |     <path
 92 |        inkscape:connector-curvature="0"
 93 |        style="fill:#3f3d56;stroke-width:0.26458332"
 94 |        d="m 130.6184,78.826404 a 0.66254842,0.66254842 0 0 1 -0.62774,-0.451262 l -0.33667,-1.003171 a 0.66145833,0.66145833 0 1 1 1.25419,-0.420774 l 0.33667,1.00317 a 0.66249815,0.66249815 0 0 1 -0.41664,0.837671 h -1.3e-4 a 0.65934167,0.65934167 0 0 1 -0.20968,0.03437 z"
 95 |        id="path127" />
 96 |     <path
 97 |        inkscape:connector-curvature="0"
 98 |        style="fill:#3f3d56;stroke-width:0.26458332"
 99 |        d="m 131.38684,81.47973 a 0.66231294,0.66231294 0 0 1 -0.63524,-0.480848 l -0.28938,-1.018024 a 0.66147421,0.66147421 0 0 1 1.27253,-0.361735 l 0.28939,1.018024 a 0.66145833,0.66145833 0 0 1 -0.45553,0.817133 0.66449575,0.66449575 0 0 1 -0.18177,0.02545 z"
100 |        id="path129" />
101 |     <circle
102 |        id="circle5249"
103 |        transform="rotate(-26.52984)"
104 |        r="8.9946327"
105 |        cy="128.33444"
106 |        cx="72.363106"
107 |        style="fill:#ffb8b8;stroke-width:0.26458332" />
108 |     <path
109 |        id="path5251"
110 |        d="m 124.56141,91.816636 c -0.41528,0.347316 -1.04095,0.530379 -1.89671,0.556922 a 11.51278,11.51278 0 0 1 -11.35348,-8.104315 c -0.37477,-1.211421 -0.69219,-3.018504 -0.0762,-4.748313 0.44299,-1.243232 1.31273,-2.285912 2.09321,-3.165684 0.67559,-0.761735 1.3806,-1.508 2.09575,-2.217597 0.85429,-0.848204 1.87267,-1.790186 3.15001,-2.232639 0.93598,-0.324024 1.93915,-0.35293 2.90932,-0.380833 0.33801,-0.0099 0.68778,-0.01979 1.02749,-0.04251 a 6.0050918,6.0050918 0 0 0 2.43375,-0.60692 1.2358926,1.2358926 0 0 1 1.02326,-0.06591 1.2576942,1.2576942 0 0 1 0.7346,0.740711 c 0.12266,0.331931 0.23314,0.631272 0.6085,0.741765 a 0.85713358,0.85713358 0 0 0 0.78327,-0.179472 0.44370625,0.44370625 0 0 1 0.41354,-0.09054 0.45229992,0.45229992 0 0 1 0.30753,0.291176 l 0.0308,0.09111 a 0.5770245,0.5770245 0 0 1 0.53297,-0.06411 0.59129612,0.59129612 0 0 1 0.38638,0.631447 5.927725,5.927725 0 0 1 -1.24595,3.012871 5.7733644,5.7733644 0 0 1 -1.72826,1.43868 l -0.10649,0.05874 -0.0736,-0.110887 c -2.98911,1.104405 -3.90191,4.236116 -3.7543,6.820164 l -0.26149,0.03512 a 0.64008265,0.64008265 0 0 0 -0.30016,-0.403098 0.77806021,0.77806021 0 0 0 -0.58744,-0.102201 1.0075042,1.0075042 0 0 0 -0.70072,0.871337 1.4953059,1.4953059 0 0 0 0.41304,1.13293 4.0585205,4.0585205 0 0 0 1.06971,0.762921 c 0.17936,0.101279 0.36495,0.206094 0.54074,0.321132 a 4.8448463,4.8448463 0 0 1 2.01625,2.80982 c 0.13646,0.527547 0.21479,1.28021 -0.18691,1.86981 a 1.6064442,1.6064442 0 0 1 -0.2984,0.328377 z"
111 |        style="fill:#2f2e41;stroke-width:0.26458332"
112 |        inkscape:connector-curvature="0" />
113 |     <path
114 |        id="path5253"
115 |        d="m 128.83276,83.943155 a 1.2459917,1.2459917 0 0 1 -1.18902,-0.876565 c -3.61017,-1.881452 -1.70155,-3.208258 -1.45294,-4.70191 a 1.2433168,1.2433168 0 0 1 0.82089,-1.555057 l 3.69073,-1.140618 a 1.2447217,1.2447217 0 0 1 1.55533,0.821002 l 1.45301,4.70191 a 1.244899,1.244899 0 0 1 -0.82094,1.555072 l -3.69073,1.140619 a 1.2404169,1.2404169 0 0 1 -0.36633,0.05555 z"
116 |        style="fill:#3f3d56;stroke-width:0.26458332"
117 |        inkscape:connector-curvature="0" />
118 |     <path
119 |        id="path5255"
120 |        d="m 131.24442,75.505974 a 1.2501801,1.2501801 0 0 1 1.20339,0.881417 l 1.5307,4.807407 a 1.3010277,1.3010277 0 0 1 -0.0726,0.975027 1.243928,1.243928 0 0 1 -0.72242,0.635931 l -0.82986,0.278395 -2.30432,-7.236801 0.82974,-0.278392 a 1.2097623,1.2097623 0 0 1 0.36536,-0.06298 z"
121 |        style="fill:#6c63ff;stroke-width:0.26458332"
122 |        inkscape:connector-curvature="0" />
123 |     <path
124 |        id="path5257"
125 |        d="m 112.16633,86.621415 a 0.80531494,0.80531494 0 0 1 -0.76875,-0.566761 l -0.38447,-1.24411 a 0.80406875,0.80406875 0 0 1 0.53091,-1.005623 l 16.6641,-5.149686 a 0.80406875,0.80406875 0 0 1 1.00581,0.530976 l 0.38441,1.243981 a 0.80498156,0.80498156 0 0 1 -0.53084,1.005623 l -16.66417,5.149686 a 0.79970577,0.79970577 0 0 1 -0.237,0.03591 z"
126 |        style="fill:#3f3d56;stroke-width:0.26458332"
127 |        inkscape:connector-curvature="0" />
128 |     <path
129 |        id="path5259"
130 |        d="m 130.6184,78.826404 a 0.66254842,0.66254842 0 0 1 -0.62774,-0.451262 l -0.33667,-1.003171 a 0.66145833,0.66145833 0 1 1 1.25419,-0.420774 l 0.33667,1.00317 a 0.66249815,0.66249815 0 0 1 -0.41664,0.837671 h -1.3e-4 a 0.65934167,0.65934167 0 0 1 -0.20968,0.03437 z"
131 |        style="fill:#3f3d56;stroke-width:0.26458332"
132 |        inkscape:connector-curvature="0" />
133 |     <path
134 |        id="path5261"
135 |        d="m 131.38684,81.47973 a 0.66231294,0.66231294 0 0 1 -0.63524,-0.480848 l -0.28938,-1.018024 a 0.66147421,0.66147421 0 0 1 1.27253,-0.361735 l 0.28939,1.018024 a 0.66145833,0.66145833 0 0 1 -0.45553,0.817133 0.66449575,0.66449575 0 0 1 -0.18177,0.02545 z"
136 |        style="fill:#3f3d56;stroke-width:0.26458332"
137 |        inkscape:connector-curvature="0" />
138 |   </g>
139 | </svg>
140 | 


--------------------------------------------------------------------------------