Added video js sample

packages/live-share-react/src/live-hooks/useLiveCanvas.ts

@@ -89,7 +89,7 @@ export function ExampleLiveCanvas() {
 export function useLiveCanvas(
     uniqueKey: string,
     canvasElementRef: React.RefObject<HTMLElement | null> | string,
-    props: IUseLiveCanvasOptionalProps
+    props?: IUseLiveCanvasOptionalProps
 ): IUseLiveCanvasResults {
     /**
      * User facing: inking manager instance

samples/typescript/11.react-video-js/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

samples/typescript/11.react-video-js/.eslintignore

@@ -0,0 +1,8 @@
+bin
+build
+demo-packages
+dist
+manifest
+node_modules
+package-lock.json
+docs/assets/main.js

samples/typescript/11.react-video-js/.eslintrc

@@ -0,0 +1,54 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "root": true,
+    "env": {
+        "browser": true,
+        "node": true,
+        "es2015": true,
+        "mocha": true,
+        "jest": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:prettier/recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime"
+    ],
+    "plugins": ["react"],
+    "parserOptions": {
+        "ecmaVersion": 2015,
+        // Allows for the parsing of modern ECMAScript features
+        "sourceType": "module", // Allows for the use of imports
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "rules": {
+        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/explicit-member-accessibility": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/interface-name-prefix": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-namespace": "off",
+        "no-async-promise-executor": "off",
+        "no-constant-condition": "off",
+        "no-undef": "off", // Disabled due to conflicts with @typescript/eslint
+        "no-unused-vars": "off", // Disabled due to conflicts with @typescript/eslint
+        "react/react-in-jsx-scope": "off",
+        "react/prop-types": "off"
+    },
+    "overrides": [
+        {
+            "files": ["bin/*.js", "lib/*.js"]
+        }
+    ],
+    "ignorePatterns": ["node_modules/*"],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}

samples/typescript/11.react-video-js/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+azcopy.exe

samples/typescript/11.react-video-js/README.md

@@ -0,0 +1,92 @@
+# TypeScript: React Video.js Sample
+
+This repository contains a simple app that enables all connected clients to watch videos together using the `live-share-react` package and Video.js.
+
+We have found this structure to be very useful in composing advanced applications with Live Share using Functional React components, but you can compose this differently for your app.
+
+## Getting started
+
+After cloning the repository, you must first set up the npm workspace from the root of the project. Then, run the following commands from the command line:
+
+```bash
+npm install
+npm run build:packages # Build Live Share packages
+cd samples/t*/11*
+```
+
+_Note:_ Do not run `npm start` before running `npm run build:packages` from the root of the project, unless you first move the sample out of this npm workspace. When using our samples, you are testing the packages using symlinks, and not the Live Share SDK versions published to npm.
+
+## Testing locally in browser
+
+### `npm run start`
+
+Running `npm run start`, it will do two things: start the `tinylicious` server and start the application using `vite`. If you have never used `tinylicious` before, you should see instead is a prompt saying `Ok to proceed? (y)`, after which you should type `y` and press the "enter" key. In rare cases you might not see the `Ok to proceed? (y)` prompt, in which case try running `npx tinylicious@latest` in your command line directly, and then try again.
+
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.
+
+Upon loading, if there is no `/#{id}` in the URL, it will create one and insert it into the URL.
+
+You can copy this URL and paste it into new browser tabs to test Live Share using a local server.
+
+_Note:_ if testing with HTTPS, such as when using a tunneling service like Ngrok, instead use the command `npm run start-https`.
+
+### Known issues when testing in browser
+
+When not in Teams, we don't have a way to know the user's userId, so we generate a random one.
+
+That means you might not always start out in control of playback, and need to press "Take control".
+
+Tab configuration page doesn't do anything in browser.
+
+## Testing the app in Teams
+
+There are two options for testing this sample in Teams. The first is to use ngrok to serve and tunnel the app locally, before zipping the app package.
+
+### Create a ngrok tunnel to allow Teams to reach your tab app
+
+1. [Download ngrok](https://ngrok.com/download).
+2. Launch ngrok with port 3000.
+   `ngrok http 3000 --host-header=localhost` (You will need an ngrok account to use host-header)
+3. In a second terminal, run `npm run start-https` (rather than the traditional `npm run start`)
+
+### Create the app package to sideload into Teams
+
+1. Open `.\manifest\manifest.json` and update values in it, including your [Application ID](https://learn.microsoft.com/microsoftteams/platform/resources/schema/manifest-schema#id.
+2. You must replace `https://<<BASE_URI_DOMAIN>>` with the https path to your ngrok tunnel.
+3. It is recommended that you also update the following fields.
+    - Set `developer.name` to your name.
+    - Update `developer.websiteUrl` with your website.
+    - Update `developer.privacyUrl` with your privacy policy.
+    - Update `developer.termsOfUseUrl` with your terms of use.
+4. Create a zip file with the contents of `.\manifest` directory so that manifest.json, color.png, and outline.png are in the root directory of the zip file.
+    - On Windows, select all files in `.\manifest` directory and compress them to zip.
+    - Give your zip file a descriptive name, e.g. `ContosoMediaTemplate`.
+
+### Test it out
+
+1. Schedule a meeting for testing from calendar in Teams.
+2. Join the meeting.
+3. In the meeting window, tap on **+ Apps** and tap on **Manage apps** in the flyout that opens.
+4. In the **Manage apps** pane, tap on **Upload a custom app**.
+    - _Don't see the option to **Upload a custom app?!** Follow [instructions here](https://docs.microsoft.com/en-us/microsoftteams/teams-custom-app-policies-and-settings) to enable custom-apps in your tenant._
+5. Select the zip file you created earlier and upload it.
+6. In the dialog that shows up, tap **Add** to add your sample app into the meeting.
+7. Now, back in the meeting window, tap **+ Apps** again and type the name of your app in the _Find an app_ textbox.
+8. Select the app to activate it in the meeting.
+9. In the configuration dialog, just tap **Save** to add your app into the meeting.
+10. In the side panel, tap the share icon to put your app on the main stage in the meeting.
+11. That's it! You should now see react-media-template on the meeting stage.
+12. Your friends/colleagues invited to the meeting should be able to see your app on stage when they join the meeting.
+
+### Make your own manifest
+
+To make a new app manifest, you can visit the [Teams Developer Portal](https://dev.teams.microsoft.com/).
+
+## `npm run build`
+
+Builds the app for production to the `dist` folder.
+
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!

samples/typescript/11.react-video-js/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="MSFT Live Share Media Template" />
+        <link rel="apple-touch-icon" href="/logo192.png" />
+        <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+        <link rel="manifest" href="/manifest.json" />
+        <title>React Media Template</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+        <!--
+        This HTML file is a template.
+        If you open it directly in the browser, you will see an empty page.
+
+        You can add webfonts, meta tags, or analytics to this file.
+        The build step will place the bundled scripts into the <body> tag.
+
+        To begin the development, run `npm start` or `yarn start`.
+        To create a production bundle, use `npm run build` or `yarn build`.
+      -->
+    </body>
+</html>

samples/typescript/11.react-video-js/manifest/manifest.json

@@ -0,0 +1,75 @@
+{
+    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
+    "version": "1.0.1",
+    "manifestVersion": "1.16",
+    "id": "<<YOUR-MICROSOFT-APP-ID>>",
+    "packageName": "com.microsoft.teams.livesharereactmediatemplate",
+    "name": {
+        "short": "Contoso Media",
+        "full": "Contoso Media"
+    },
+    "developer": {
+        "name": "Your name here",
+        "mpnId": "",
+        "websiteUrl": "https://www.example.com",
+        "privacyUrl": "https://www.example.com/PrivacyStatement",
+        "termsOfUseUrl": "https://www.example.com/TermsOfUse"
+    },
+    "description": {
+        "short": "Watch amazing stock videos with colleagues",
+        "full": "Have you ever loved stock videos so much that you just had to publish an app to Teams just to watch them with friends? Us to!"
+    },
+    "icons": {
+        "outline": "outline.png",
+        "color": "color.png"
+    },
+    "accentColor": "#38a2ff",
+    "configurableTabs": [
+        {
+            "configurationUrl": "https://<<BASE_URI_DOMAIN>>/config?inTeams=true",
+            "canUpdateConfiguration": false,
+            "scopes": [
+                "groupchat"
+            ],
+            "context": [
+                "meetingSidePanel",
+                "meetingStage"
+            ]
+        }
+    ],
+    "validDomains": [
+        "*.ngrok.io"
+    ],
+    "showLoadingIndicator": true,
+    "authorization": {
+        "permissions": {
+            "orgWide": [],
+            "resourceSpecific": [
+                {
+                    "name": "MeetingStage.Write.Chat",
+                    "type": "Delegated"
+                },
+                {
+                    "name": "ChannelMeetingStage.Write.Group",
+                    "type": "Delegated"
+                },
+                {
+                    "name": "LiveShareSession.ReadWrite.Chat",
+                    "type": "Delegated"
+                },
+                {
+                    "name": "LiveShareSession.ReadWrite.Group",
+                    "type": "Delegated"
+                },
+                {
+                    "name": "OnlineMeetingIncomingAudio.Detect.Chat",
+                    "type": "Delegated"
+                },
+                {
+                    "name": "OnlineMeetingIncomingAudio.Detect.Group",
+                    "type": "Delegated"
+                }
+            ]
+        }
+    }
+}

samples/typescript/11.react-video-js/package.json

@@ -0,0 +1,71 @@
+{
+    "name": "react-video-js",
+    "version": "0.4.0",
+    "private": true,
+    "author": "Microsoft",
+    "license": "MIT",
+    "dependencies": {
+        "@fluentui/react-components": "^9.18.6",
+        "@fluentui/react-icons": "^2.0.202",
+        "@fluentui/react-theme": "^9.1.5",
+        "@microsoft/live-share": "2.0.0-internal.8",
+        "@microsoft/live-share-canvas": "2.0.0-internal.8",
+        "@microsoft/live-share-media": "2.0.0-internal.8",
+        "@microsoft/teams-js": "^2.16.0",
+        "fluid-framework": "^2.0.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router": "^6.4.2",
+        "react-router-dom": "^6.4.2",
+        "use-resize-observer": "^9.1.0",
+        "uuid": "^9.0.0",
+        "web-vitals": "^3.1.1",
+        "video.js": "^8.17.4"
+    },
+    "devDependencies": {
+        "@fluidframework/test-runtime-utils": "^2.0.0",
+        "@types/lodash": "^4.14.191",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^14.4.3",
+        "@typescript-eslint/eslint-plugin": "^7.16.0",
+        "@typescript-eslint/parser": "^7.16.0",
+        "@vitejs/plugin-react": "^3.0.1",
+        "dotenv-cli": "^7.2.1",
+        "esbuild": "^0.17.18",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-react": "^7.34.4",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "start-server-and-test": "^2.0.0",
+        "vite": "^4.0.4"
+    },
+    "scripts": {
+        "build": "tsc && vite build",
+        "clean": "npx shx rm -rf build",
+        "doctor": "eslint src/**/*.{j,t}s{,x} --fix --no-error-on-unmatched-pattern",
+        "preview": "vite preview",
+        "start-https": "start-server-and-test start:server 7070 start:https",
+        "start:client": "vite",
+        "start:https": "vite --config vite.https-config.ts",
+        "start:server": "npx tinylicious@latest",
+        "start": "start-server-and-test start:server 7070 start:client"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}