feat(nx-dev): refactor and improve style of video-player (#29749)

docs/README.md

@@ -208,14 +208,6 @@ You can optionally also pass a `path` like
 ‎```
 ````
 
-#### Terminal Video Output
-
-You can have a more dynamic visualization of a terminal output by using the following component:
-
-```
-{% terminal-video src="/documentation/shared/images/caching/cache-terminal-animation.mp4" /%}
-```
-
 #### Table of Contents
 
 You can add a table of contents to your document by using the following component. This is mostly useful for blog posts.

docs/blog/2024-05-08-nx-19-release.md

@@ -82,7 +82,7 @@ Notice how all tasks are now appropriately grouped in the `E2E (CI)` group!
 
 You can also find the same enhancements in Nx Cloud. Below is a view of all tasks in the CI pipeline:
 
-{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" /%}
+{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" autoPlay=true loop=true  /%}
 
 Notice how all e2e groups are collapsed by default to give a concise view, while allowing you to expand to see how each individual task is progressing!
 
@@ -160,7 +160,7 @@ Since Nx 18 release, we also started using Project Crystal inside of the Nx repo
 
 You can find a full list of fixes and features applied in this major release [here](https://github.com/nrwl/nx/releases/tag/19.0.0).
 
-{% video-player src="/documentation/blog/media/2024-05-08/fixes.mp4" alt="A display listing the Github changelog" /%}
+{% video-player src="/documentation/blog/media/2024-05-08/fixes.mp4" alt="A display listing the Github changelog" autoPlay=true loop=true  /%}
 
 With Project Crystal landed now, we're also adjusting our priorities to place a higher importance on stability. You should see this reflected in Nx 19.
 
@@ -182,7 +182,7 @@ In February, we launched two big enhancements to Nx Cloud: the [Atomizer](/ci/fe
 
 Since then, the Atomizer has received a nice UI update (as we had seen earlier):
 
-{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" /%}
+{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" autoPlay=true loop=true  /%}
 
 Since February, we also revamped our task distribution algorithms. This has resulted in a 5-20% (depending on the repo) increase in both speed and cost efficiency for our users.
 

docs/blog/2024-12-06-nx-cloud-pipelines-in-nx-console.md

@@ -12,7 +12,7 @@ We're in the process of adding a new integration between [Nx Cloud](/nx-cloud),
 
 Now, once you've [connected your Nx Console to Nx Cloud](https://blog.nrwl.io/nx-console-meets-nx-cloud-d45dc099dc5d), you will have access to a new panel in the console that shows all of your recent CI Pipelines, including those in progress now.
 
-{% video-player src="/documentation/blog/media/nx-console-pipeline-running.mp4" alt="Nx Console CI Pipeline Execution" /%}
+{% video-player src="/documentation/blog/media/nx-console-pipeline-running.mp4" alt="Nx Console CI Pipeline Execution" autoPlay=true loop=true  /%}
 
 This way, you can keep an eye on the status of the pipeline of your latest PR, and always just 1 click away from seeing detailed your results on Nx Cloud.
 
@@ -20,7 +20,7 @@ This way, you can keep an eye on the status of the pipeline of your latest PR, a
 
 In addition to a panel where you can see all of your recent pipelines, you can also receive pop-up notifications when a pipeline completes
 
-{% video-player src="/documentation/blog/media/nxconsole-ci-completion.mp4" alt="Nx Console CI Completion" /%}
+{% video-player src="/documentation/blog/media/nxconsole-ci-completion.mp4" alt="Nx Console CI Completion" autoPlay=true loop=true  /%}
 
 Head to the Nx Console settings to adjust controls on these notifications. This will allow you to adjust notifications to only show for failed runs if you prefer, or to turn off the notifications altogether.
 

docs/blog/2024-12-22-nx-highlights-2024.md

@@ -155,15 +155,15 @@ Nx Console has become a key part of the "Nx experience." In 2024, we introduced
 
 One standout feature is the **Project Detail View**. With Project Crystal, Nx can dynamically infer targets from your configuration. You can see these [inferred tasks](/concepts/inferred-tasks) by running `nx show project my-project --web`, but now they’re directly available inside Nx Console. This gives you quick access to project details, command options, caching configurations, and more, right in your editor.
 
-{% video-player src="/documentation/blog/media/nxconsole-project-view.mp4" alt="Nx Console Project Detail View" /%}
+{% video-player src="/documentation/blog/media/nxconsole-project-view.mp4" alt="Nx Console Project Detail View" autoPlay=true loop=true  /%}
 
 Another big addition is **CI Pipeline Visualization** for Nx Cloud.
 
-{% video-player src="/documentation/blog/media/nx-console-pipeline-running.mp4" alt="Nx Console CI Pipeline Execution" /%}
+{% video-player src="/documentation/blog/media/nx-console-pipeline-running.mp4" alt="Nx Console CI Pipeline Execution" autoPlay=true loop=true  /%}
 
 Nx Console notifies you inside your IDE when pipelines succeed or fail. This removes the need to monitor CI logs or constantly switch between tools.
 
-{% video-player src="/documentation/blog/media/nxconsole-ci-completion.mp4" alt="Nx Console CI Completion" /%}
+{% video-player src="/documentation/blog/media/nxconsole-ci-completion.mp4" alt="Nx Console CI Completion" autoPlay=true loop=true  /%}
 
 These updates make CI more accessible and help you stay focused without leaving your development environment.
 

docs/blog/2025-01-06-nx-update-20-3.md

@@ -154,7 +154,7 @@ We launched a [new feature](/blog/nx-cloud-pipelines-come-to-nx-console) for [Nx
 
 This feature allows you to have access to the status of your pending pipelines - including the ability to get notifications when one of your Nx Cloud pipelines completes - right from your IDE!
 
-{% video-player src="/documentation/blog/media/nxconsole-ci-completion.mp4" alt="Nx Console CI Completion" /%}
+{% video-player src="/documentation/blog/media/nxconsole-ci-completion.mp4" alt="Nx Console CI Completion" autoPlay=true loop=true  /%}
 
 You have access to this feature today if you're using the VsCode version of the plugin, and we plan to bring this to the JetBrains version soon.
 

nx-dev/ui-markdoc/src/index.ts

@@ -45,10 +45,6 @@ import { Tab, Tabs } from './lib/tags/tabs.component';
 import { tab, tabs } from './lib/tags/tabs.schema';
 import { Tweet, tweet } from '@nx/nx-dev/ui-common';
 import { YouTube, youtube } from '@nx/nx-dev/ui-common';
-import {
-  TerminalVideo,
-  terminalVideo,
-} from './lib/tags/terminal-video.component';
 import { VideoLink, videoLink } from './lib/tags/video-link.component';
 // import { SvgAnimation, svgAnimation } from './lib/tags/svg-animation.component';
 import { Pill } from './lib/tags/pill.component';
@@ -93,7 +89,6 @@ export const getMarkdocCustomConfig = (
       'side-by-side': sideBySide,
       tab,
       tabs,
-      'terminal-video': terminalVideo,
       toc: tableOfContents,
       tweet,
       youtube,
@@ -125,7 +120,6 @@ export const getMarkdocCustomConfig = (
     Tab,
     Tabs,
     TableOfContents,
-    TerminalVideo,
     Tweet,
     YouTube,
     VideoLink,

nx-dev/ui-markdoc/src/lib/tags/client-video.component.tsx

@@ -0,0 +1,40 @@
+'use client';
+import { useRef } from 'react';
+
+export function ClientVideo({
+  src,
+  alt,
+  showControls = false,
+  autoPlay = true,
+  loop: explicitLoop,
+}: {
+  src: string;
+  alt: string;
+  showControls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+}): JSX.Element {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const loop = explicitLoop ?? autoPlay;
+
+  return (
+    <video
+      ref={videoRef}
+      autoPlay={autoPlay}
+      muted
+      loop={loop}
+      playsInline
+      controls={showControls}
+      className="m-0 p-0"
+    >
+      <source src={src} type="video/mp4" />
+      <div className="p-4 text-center">
+        <p className="pb-3 font-bold">
+          Your browser does not support the video tag. Here is a description of
+          the video:
+        </p>
+        <p>{alt}</p>
+      </div>
+    </video>
+  );
+}

nx-dev/ui-markdoc/src/lib/tags/terminal-video.component.tsx

@@ -1,33 +0,0 @@
-import { TerminalShellWrapper } from '@nx/nx-dev/ui-fence';
-import { VideoLoop } from './video-loop.component';
-import { Schema } from '@markdoc/markdoc';
-
-export const terminalVideo: Schema = {
-  render: 'TerminalVideo',
-  attributes: {
-    src: {
-      type: 'String',
-      required: true,
-    },
-    alt: {
-      type: 'String',
-      required: true,
-    },
-  },
-};
-
-export function TerminalVideo({
-  src,
-  alt,
-}: {
-  src: string;
-  alt: string;
-}): JSX.Element {
-  return (
-    <TerminalShellWrapper>
-      <div className="overflow-x-auto">
-        <VideoLoop src={src} alt={alt}></VideoLoop>
-      </div>
-    </TerminalShellWrapper>
-  );
-}

nx-dev/ui-markdoc/src/lib/tags/video-loop.component.tsx

@@ -1,56 +0,0 @@
-'use client';
-import { useEffect, useRef } from 'react';
-
-export function VideoLoop({
-  src,
-  alt,
-}: {
-  src: string;
-  alt: string;
-}): JSX.Element {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-
-  useEffect(() => {
-    let observer: IntersectionObserver;
-    let videoElement = videoRef.current;
-
-    if (videoElement) {
-      observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (videoElement) {
-              if (entry.isIntersecting) {
-                videoElement.play();
-              } else {
-                videoElement.pause();
-              }
-            }
-          });
-        },
-        {
-          threshold: 0.5,
-        }
-      );
-
-      observer.observe(videoElement);
-    }
-    return () => {
-      if (observer && videoElement) {
-        observer.unobserve(videoElement);
-      }
-    };
-  }, []);
-
-  return (
-    <video ref={videoRef} autoPlay muted loop playsInline>
-      <source src={src} type="video/mp4" />
-      <div className="p-4 text-center">
-        <p className="pb-3 font-bold">
-          Your browser does not support the video tag. Here is a description of
-          the video:
-        </p>
-        <p>{alt}</p>
-      </div>
-    </video>
-  );
-}

nx-dev/ui-markdoc/src/lib/tags/video-player.component.tsx

@@ -1,5 +1,5 @@
-import { VideoLoop } from './video-loop.component';
 import { Schema } from '@markdoc/markdoc';
+import { ClientVideo } from './client-video.component';
 
 export const videoPlayer: Schema = {
   render: 'VideoPlayer',
@@ -16,6 +16,21 @@ export const videoPlayer: Schema = {
       type: 'String',
       required: false,
     },
+    showControls: {
+      type: 'Boolean',
+      required: false,
+      default: false,
+    },
+    autoPlay: {
+      type: 'Boolean',
+      required: false,
+      default: false,
+    },
+    loop: {
+      type: 'Boolean',
+      required: false,
+      default: false,
+    },
   },
 };
 
@@ -23,20 +38,40 @@ export function VideoPlayer({
   src,
   alt,
   link,
+  showControls,
+  autoPlay,
+  loop,
 }: {
   src: string;
   alt: string;
-  link: string;
+  link?: string;
+  showControls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
 }): JSX.Element {
   return (
-    <div className="overflow-x-auto">
-      {link ? (
-        <a href={link} target="_blank" rel="noreferrer">
-          <VideoLoop src={src} alt={alt}></VideoLoop>
-        </a>
-      ) : (
-        <VideoLoop src={src} alt={alt}></VideoLoop>
-      )}
+    <div className="mb-4 overflow-x-auto">
+      <div className="rounded-lg border border-slate-200 bg-slate-50/50 dark:border-slate-700 dark:bg-slate-800/60">
+        {link ? (
+          <a href={link} target="_blank" rel="noreferrer">
+            <ClientVideo
+              src={src}
+              alt={alt}
+              showControls={showControls}
+              autoPlay={autoPlay}
+              loop={loop}
+            />
+          </a>
+        ) : (
+          <ClientVideo
+            src={src}
+            alt={alt}
+            showControls={showControls}
+            autoPlay={autoPlay}
+            loop={loop}
+          />
+        )}
+      </div>
     </div>
   );
 }