fix(nx-dev): improve bandwidth usage convert gif to mp4 (#27129)

This PR aims to improve the bandwidth usage of nx-dev which is hosted on
Vercel.

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](https://staging.nx.app/runs/ctbAZfiLy3):
 
-[![Grouped e2e tests in Nx Cloud](/blog/images/2024-05-08/nx-cloud-atomizer-groupings.gif)](https://staging.nx.app/runs/ctbAZfiLy3)
+{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" link="https://staging.nx.app/runs/ctbAZfiLy3" /%}
 
 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).
 
-[![Changelog for Nx 19](/blog/images/2024-05-08/fixes.gif)](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" /%}
 
 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):
 
-[![Grouped e2e tests in Nx Cloud](/blog/images/2024-05-08/nx-cloud-atomizer-groupings.gif)](https://staging.nx.app/runs/ctbAZfiLy3)
+{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" link="https://staging.nx.app/runs/ctbAZfiLy3" /%}
 
 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.
 

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

@@ -57,6 +57,7 @@ import { Pill } from './lib/tags/pill.component';
 import { pill } from './lib/tags/pill.schema';
 import { fence } from './lib/nodes/fence.schema';
 import { FenceWrapper } from './lib/nodes/fence-wrapper.component';
+import { VideoPlayer, videoPlayer } from './lib/tags/video-player.component';
 
 // TODO fix this export
 export { GithubRepository } from './lib/tags/github-repository.component';
@@ -83,6 +84,7 @@ export const getMarkdocCustomConfig = (
       graph,
       iframe,
       'install-nx-console': installNxConsole,
+      'video-player': videoPlayer,
       persona,
       personas,
       'project-details': projectDetails,
@@ -127,6 +129,7 @@ export const getMarkdocCustomConfig = (
     Tweet,
     YouTube,
     VideoLink,
+    VideoPlayer,
     // SvgAnimation,
   },
 });

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

@@ -0,0 +1,42 @@
+import { VideoLoop } from './video-loop.component';
+import { Schema } from '@markdoc/markdoc';
+
+export const videoPlayer: Schema = {
+  render: 'VideoPlayer',
+  attributes: {
+    src: {
+      type: 'String',
+      required: true,
+    },
+    alt: {
+      type: 'String',
+      required: false,
+    },
+    link: {
+      type: 'String',
+      required: false,
+    },
+  },
+};
+
+export function VideoPlayer({
+  src,
+  alt,
+  link,
+}: {
+  src: string;
+  alt: string;
+  link: string;
+}): 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>
+  );
+}