Merge pull request #6365 from opsmill/pmc-20250426-videos

petercrocker · web-flow · commit 93b89f95e376 · 2025-04-28T11:49:29.000+01:00
improve video player appearance
diff --git a/docs/docs/guides/artifact.mdx b/docs/docs/guides/artifact.mdx
@@ -2,7 +2,7 @@
 title: Creating an Artifact
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 
 # Creating an artifact in Infrahub
 
@@ -60,7 +60,7 @@ Create a Standard Group with the name `DeviceGroup` and add `NetworkDevice` `swi
 More information can be found in the [Creating a group guide](./groups.mdx).
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=ASGMKZVLCbY' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=ASGMKZVLCbY' light />
 </center>
 
 ## Creating an artifact definition
diff --git a/docs/docs/guides/create-schema.mdx b/docs/docs/guides/create-schema.mdx
@@ -3,7 +3,7 @@ title: Creating a Schema
 ---
 
 import CodeBlock from "@theme/CodeBlock";
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -32,7 +32,7 @@ To help with the development process of a schema definition file, you can levera
 :::
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=f3jtGm0_IxQ' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=f3jtGm0_IxQ' light />
 </center>
 
 ## 1. Adding nodes and attributes
diff --git a/docs/docs/guides/installation-enterprise.mdx b/docs/docs/guides/installation-enterprise.mdx
@@ -4,7 +4,7 @@ title: Installing Infrahub Enterprise
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 import ReferenceLink from "../../src/components/Card";
 
 # Installing Infrahub Enterprise
diff --git a/docs/docs/guides/installation.mdx b/docs/docs/guides/installation.mdx
@@ -4,7 +4,7 @@ title: Installing Infrahub
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 import ReferenceLink from "../../src/components/Card";
 
 # Installing Infrahub
@@ -16,7 +16,7 @@ Infrahub is deployed as a container-based architecture, and can be deployed for
 * [K8s with Helm charts](#k8s-with-helm-charts)
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=onVhaTVFkrM' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=onVhaTVFkrM' light />
 </center>
 
 ## Hardware requirements
diff --git a/docs/docs/guides/resource-manager.mdx b/docs/docs/guides/resource-manager.mdx
@@ -2,7 +2,7 @@
 title: Using Resource Managers
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -17,7 +17,7 @@ But if you have load the demo schema skip the section regarding loading schema.
 :::
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=sVU4OKi9_9o' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=sVU4OKi9_9o' light />
 </center>
 
 ## Loading a schema
diff --git a/docs/docs/release-notes/infrahub/release-1_0_0.mdx b/docs/docs/release-notes/infrahub/release-1_0_0.mdx
@@ -2,7 +2,7 @@
 title: Release 1.0.0
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../../src/components/VideoPlayer';
 
 <table>
   <tbody>
@@ -32,7 +32,7 @@ We are thrilled to announce the general availability release of Infrahub, versio
 We greatly appreciate all the time and efforts of our dedicated community of developers and beta testers!
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=BR9yZzC9CVg' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=BR9yZzC9CVg' light />
 </center>
 
 ## Main changes
diff --git a/docs/docs/topics/artifact.mdx b/docs/docs/topics/artifact.mdx
@@ -2,7 +2,7 @@
 title: Artifact
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 
 # Artifact
 
@@ -36,7 +36,7 @@ While it's always possible to generate [Transformations](./transformation.mdx) o
 While the content of an artifact can change, its identifier will remain the same over time.
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=ASGMKZVLCbY' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=ASGMKZVLCbY' light />
 </center>
 
 ## High level design
diff --git a/docs/docs/topics/generator.mdx b/docs/docs/topics/generator.mdx
@@ -2,9 +2,7 @@
 title: Generator
 ---
 
-import ReactPlayer from 'react-player/youtube'
-
-# Generator
+import VideoPlayer from '../../src/components/VideoPlayer';
 
 A `Generator` is a generic plugin that queries data and creates new nodes and relationships based on the result.
 
@@ -39,21 +37,21 @@ In this video series we’re diving into the concept of generators and services,
 The first video will highlight what generators are and how they can be used to deliver services.
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=TSqY0caGb0A' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=TSqY0caGb0A' light />
     <br />
 </center>
 
 In the second video we will will look at how to plan a generator from coming up with a use case and then finally what the workflow may look like in pseudocode.
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=7oM2W8Kn2-U' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=7oM2W8Kn2-U' light />
   <br />
 </center>
 
 In the third video we will look at how a generator can be created and run in Infrahub. Looking at the `.infrahub.yml` file the GraphQL query the generator will run against and finally the logic that will be run against Infrahub to create objects and bring the service to life.
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=HSUVWm3Se28' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=HSUVWm3Se28' light />
 </center>
 
 ## Known limitations
diff --git a/docs/docs/topics/ipam.mdx b/docs/docs/topics/ipam.mdx
@@ -2,7 +2,7 @@
 title: IP address management
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 
 # IP address management
 
@@ -15,7 +15,7 @@ Building an IPAM serves a different purpose as using the `IPHost` or `IPNetwork`
 :::
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=vF7dUftSDBs' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=vF7dUftSDBs' light />
 </center>
 
 ## IPAM generics
diff --git a/docs/docs/topics/proposed-change.mdx b/docs/docs/topics/proposed-change.mdx
@@ -1,14 +1,14 @@
 ---
 title: Proposed change
 ---
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 
 # Proposed change
 
 A proposed change provides a way to review and discuss how two branches differ from each other and to merge a source branch into the target branch. For people with a development background, this will sound very familiar. It’s like a pull or merge request. The proposed change lets you compare two branches, run tests, and finally merge one branch into another.
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=OAXk3dKKgf0' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=OAXk3dKKgf0' light />
 </center>
 
 ## Discussions and issues as part of the review
diff --git a/docs/docs/topics/schema.mdx b/docs/docs/topics/schema.mdx
@@ -2,7 +2,7 @@
 title: Schema
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import ReferenceLink from "../../src/components/Card";
@@ -930,7 +930,7 @@ the recommendation is to create a new branch and to integrate the changes into t
 :::
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=1ZWznJga1Tc' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=1ZWznJga1Tc' light />
 </center>
 
 ### State: absent or present
diff --git a/docs/docs/topics/version-control.mdx b/docs/docs/topics/version-control.mdx
@@ -2,14 +2,14 @@
 title: Immutability and version control
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../src/components/VideoPlayer';
 
 # Immutability and version control
 
 Infrahub integrate an immutable database with native support for version control that was designed with Infrastructure Management in mind.
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=_I7liNBkNC8' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=_I7liNBkNC8' light />
 </center>
 
 ## Immutability
diff --git a/docs/docs/tutorials/getting-started/branches.mdx b/docs/docs/tutorials/getting-started/branches.mdx
@@ -2,7 +2,7 @@
 title: Branches and version control
 ---
 
-import ReactPlayer from 'react-player/youtube'
+import VideoPlayer from '../../../src/components/VideoPlayer';
 
 # Manage changes with branching and version control
 
@@ -11,7 +11,7 @@ In Infrahub, version control is natively integrated into the graph database whic
 The default branch is called `main`.
 
 <center>
-  <ReactPlayer url='https://www.youtube.com/watch?v=NKifZ8zZXWQ' light />
+  <VideoPlayer url='https://www.youtube.com/watch?v=NKifZ8zZXWQ' light />
 </center>
 
 ## Create a new branch
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/src/components/VideoPlayer/index.tsx b/docs/src/components/VideoPlayer/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactPlayer from 'react-player/youtube';
+
+export default function VideoPlayer({ url }) {
+  return (
+    <div style={{
+      border: '3px solid #eee',
+      borderRadius: '12px',
+      padding: '8px',
+      backgroundColor: '#fafafa',
+      margin: '2rem 0',
+      maxWidth: '800px'
+    }}>
+      <div style={{ position: 'relative', paddingTop: '56.25%' }}>
+        <ReactPlayer
+          url={url}
+          style={{ position: 'absolute', top: 0, left: 0 }}
+          width="100%"
+          height="100%"
+          controls
+        />
+      </div>
+    </div>
+  );
+}
