Updated sample and preview

samples/react-video-banner/README.md

@@ -1,18 +1,19 @@
-# React-Video-Banner
+# Video Banner
 
 
 ## Summary
 
 Use this Web Part to add a video banner with a text on top of it to your pages. 
 
-![](https://github.com/derhallim/Resources/raw/main/react-video-banner-demo1.gif)
+![](./assets/react-video-banner-demo1.gif)
 
+## Compatibility
 
-
-## Used SharePoint Framework Version
-
-![version](https://img.shields.io/badge/version-1.11-green.svg)
-
+![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) 
+![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg) 
+![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) 
+![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") 
+![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
 
 ## Applies to
 
@@ -72,3 +73,5 @@ This web part illustrates the following concepts:
 - [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
 - [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
 - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-video-banner" />

samples/react-video-banner/assets/sample.json

@@ -0,0 +1,60 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-video-banner",
+    "source": "pnp",
+    "title": "Video Banner",
+    "shortDescription": "Use this Web Part to add a video banner with a text on top of it to your pages. ",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-video-banner",
+    "longDescription": [
+      "Use this Web Part to add a video banner with a text on top of it to your pages. "
+    ],
+    "created": "2021-04-02",
+    "modified": "2021-04-02",
+    "products": [
+      "SharePoint",
+      "Office"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.11.0"
+      },
+      {
+        "key": "SPFX-FULLPAGEAPP",
+        "value": "true"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-video-banner/assets/react-video-banner-demo1.gif",
+        "alt": "React Video Banner"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "derhallim",
+        "pictureUrl": "https://github.com/derhallim.png",
+        "name": "Mohamed Derhalli",
+        "twitter": "MohamedDerhalli"
+      }
+    ],
+    "references": [
+      {
+        "name": "Build your first SharePoint client-side web part",
+        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      },
+      {
+        "name": "Using single part app pages in SharePoint Online",
+        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
+      }
+    ]
+  }
+]

samples/react-video-banner/src/webparts/videoBackground/components/VideoBackground.tsx

@@ -3,16 +3,16 @@ import styles from "./VideoBackground.module.scss";
 import { IVideoBackgroundProps } from "./IVideoBackgroundProps";
 
 const VideoBackground = (props: IVideoBackgroundProps) => {
-  const vRef = React.useRef<HTMLVideoElement>(null) 
-  const oldUrl = React.useRef(props.videoUrl)
-  console.debug("execution here")
-  
+  const vRef = React.useRef<HTMLVideoElement>(null);
+  const oldUrl = React.useRef(props.videoUrl);
+  console.debug("execution here");
+
   React.useEffect(() => {
     if(oldUrl.current !== props.videoUrl && vRef && vRef.current){
-      vRef.current.load()
-      oldUrl.current = props.videoUrl
+      vRef.current.load();
+      oldUrl.current = props.videoUrl;
     }
-  }, [props.videoUrl])
+  }, [props.videoUrl]);
 
   return (
     <div

samples/react-video-banner/tslint.json

@@ -17,7 +17,6 @@
     "no-switch-case-fall-through": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-with-statement": true,
     "semicolon": true,
     "trailing-comma": false,
@@ -27,4 +26,4 @@
     "variable-name": false,
     "whitespace": false
   }
-}
+}