Replace YouTube with Mux for Gitpod demo video (#20444)

gitpod-io · Dec 17, 2024 · eaf1055 · eaf1055
1 parent da1d931
commit eaf1055
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 23 deletions.
diff --git a/components/dashboard/package.json b/components/dashboard/package.json
@@ -10,6 +10,7 @@
     "@gitpod/gitpod-protocol": "0.1.5",
     "@gitpod/public-api": "0.1.5",
     "@gitpod/public-api-common": "0.1.5",
+    "@mux/mux-player-react": "^3.1.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",

diff --git a/components/dashboard/src/components/podkit/loading/Skeleton.tsx b/components/dashboard/src/components/podkit/loading/Skeleton.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2024 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { cn, PropsWithClassName } from "@podkit/lib/cn";
+import { PropsWithChildren } from "react";
+
+type SkeletonProps = {
+    ready: boolean;
+    failed?: boolean;
+    hideOnFailed?: boolean;
+    animate?: boolean;
+};
+export const SkeletonBlock = ({
+    failed,
+    ready,
+    animate,
+    children,
+    className,
+    hideOnFailed,
+}: PropsWithChildren<SkeletonProps & PropsWithClassName>): JSX.Element => {
+    if (ready && children) {
+        return <>{children}</>;
+    }
+
+    return (
+        <div
+            className={cn(
+                "block rounded-md bg-pk-surface-tertiary",
+                !failed && (animate ?? true) && "animate-pulse",
+                // Using opacity instead of hidden to prevent layout shifts
+                failed && hideOnFailed && "opacity-0",
+                className,
+            )}
+        />
+    );
+};
diff --git a/components/dashboard/src/onboarding/VideoSection.tsx b/components/dashboard/src/onboarding/VideoSection.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2024 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { MuxPlayerProps } from "@mux/mux-player-react";
+import { cn } from "@podkit/lib/cn";
+import { SkeletonBlock } from "@podkit/loading/Skeleton";
+import { lazy, Suspense, FC } from "react";
+
+const MuxPlayer = lazy(() => import("@mux/mux-player-react"));
+
+type Props = {
+    playbackId: string;
+    metadataVideoTitle: string;
+    poster?: string;
+    className?: string;
+    playerProps?: MuxPlayerProps;
+};
+export const VideoSection: FC<Props> = ({ playbackId, metadataVideoTitle, poster, className, playerProps }) => (
+    <div
+        className={cn(
+            "flex w-full flex-col items-start justify-start overflow-hidden rounded-md drop-shadow-xl",
+            className,
+        )}
+    >
+        <Suspense fallback={<SkeletonBlock ready={false} className="max-h-[300px] w-full" />}>
+            <MuxPlayer
+                aria-label={"Video: " + metadataVideoTitle}
+                streamType="on-demand"
+                playbackId={playbackId}
+                metadataVideoTitle={metadataVideoTitle}
+                primaryColor="#FFFFFF"
+                secondaryColor="#000000"
+                accentColor="#FF8A00"
+                defaultHiddenCaptions={playerProps?.defaultHiddenCaptions ?? true}
+                poster={poster}
+                style={{
+                    aspectRatio: "16 / 9",
+                    backgroundColor: "var(--surface-tertiary)",
+                    borderRadius: "6px",
+                }}
+                preload={"metadata"}
+                disableCookies
+                disableTracking
+                {...playerProps}
+            />
+        </Suspense>
+    </div>
+);
diff --git a/components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx b/components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx
@@ -8,37 +8,23 @@ import { LinkButton } from "@podkit/buttons/LinkButton";
 import { Heading2, Subheading } from "@podkit/typography/Headings";
 import { trackVideoClick } from "../Analytics";
 
-import "lite-youtube-embed/src/lite-yt-embed.css";
-import "lite-youtube-embed/src/lite-yt-embed";
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "lite-youtube": any;
-        }
-    }
-}
+import { VideoSection } from "../onboarding/VideoSection";
 
 export const EmptyWorkspacesContent = () => {
-    const onPlayerStateChange = () => {
+    const handlePlay = () => {
         trackVideoClick("create-new-workspace");
     };
 
     return (
         <div className="app-container flex flex-col space-y-2">
             <div className="px-6 mt-16 flex flex-col xl:flex-row items-center justify-center gap-x-14 gap-y-10 min-h-96 min-w-96">
-                <lite-youtube
-                    videoid="1ZBN-b2cIB8"
-                    width="535"
-                    height="307"
-                    onClick={onPlayerStateChange}
-                    style={{
-                        width: "535px",
-                        backgroundImage: "url('https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp')",
-                    }}
-                    class="rounded-xl"
-                    playlabel="Gitpod in under 120 seconds"
-                ></lite-youtube>
+                <VideoSection
+                    metadataVideoTitle="Gitpod demo"
+                    playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
+                    poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
+                    playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
+                    className="w-[535px] rounded-xl"
+                />
                 <div className="flex flex-col items-center xl:items-start justify-center">
                     <Heading2 className="mb-4 !font-semibold !text-lg">Create your first workspace</Heading2>
                     <Subheading className="max-w-xs xl:text-left text-center">

diff --git a/yarn.lock b/yarn.lock
@@ -2125,6 +2125,43 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@mux/mux-player-react@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@mux/mux-player-react/-/mux-player-react-3.1.0.tgz#fed522ddb1e7fd59593e320773eab61a7aebe5de"
+  integrity sha512-oJWcRtDNE84KKSi/5tz7CKGHBLA34V9XlLnv30qqVMAvfifa3S0lY82gP41YA0OfYANwp5Sg29bbh3quekusPg==
+  dependencies:
+    "@mux/mux-player" "3.1.0"
+    "@mux/playback-core" "0.27.0"
+    prop-types "^15.7.2"
+
+"@mux/[email protected]":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@mux/mux-player/-/mux-player-3.1.0.tgz#cb017d427a3676c5e20c51ca58ecdb23a76fcc4f"
+  integrity sha512-vU7HjvM3KLDfMwMfjbotlhjQrakwm9A4zixxtzBdxwDMLKf0FUKiFOGyTGOdsIKNBRVlS5Ffz9ERU+3Hh+XcBQ==
+  dependencies:
+    "@mux/mux-video" "0.22.0"
+    "@mux/playback-core" "0.27.0"
+    media-chrome "~4.2.1"
+    player.style "^0.0.8"
+
+"@mux/[email protected]":
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/@mux/mux-video/-/mux-video-0.22.0.tgz#7369022d40e8811be540a57ddef547981df01790"
+  integrity sha512-VrY4AVc6KkQcG0EPOtHf7aGXFwO1DTLZKtRRdPCx0KWSAlwR1II5YnHcEAwPbi1Uv94Hykq3Lbjt5dLqRNXKtA==
+  dependencies:
+    "@mux/playback-core" "0.27.0"
+    castable-video "~1.1.0"
+    custom-media-element "~1.3.1"
+    media-tracks "~0.3.2"
+
+"@mux/[email protected]":
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/@mux/playback-core/-/playback-core-0.27.0.tgz#1bc7496c52c08c6a1c1963761e414882cd39f8c3"
+  integrity sha512-9kzpGRJNXLNMfFV6hvOde2+Uy3HyllwwEt9H5r4gYXOmrivQ6IWIGr9nXrUy7fmNkx6H05W+96zt1GhtBTlSDQ==
+  dependencies:
+    hls.js "~1.5.11"
+    mux-embed "^5.3.1"
+
 "@nicolo-ribaudo/[email protected]":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -5589,6 +5626,13 @@ case-sensitive-paths-webpack-plugin@^2.4.0:
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
   integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
 
+castable-video@~1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/castable-video/-/castable-video-1.1.3.tgz#d43d34e9cecc1eed3f9c71fe0e7682887247952b"
+  integrity sha512-FouzepsK6q1cUxBgKX6I2SaYN4OXZ/A3G+HS0Urpj8DPXfSRhdGOuHLk4ijOxuHxmQd6Se4V70M6Rn9fLUh0AA==
+  dependencies:
+    custom-media-element "~1.4.1"
+
 catharsis@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.9.0.tgz#40382a168be0e6da308c277d3a2b3eb40c7d2121"
@@ -6462,6 +6506,16 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz"
   integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
 
+custom-media-element@~1.3.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.3.3.tgz#1f9ab10265f84a96437281bc3607490eb9bfef12"
+  integrity sha512-5Tenv3iLP8ZiLHcT0qSyfDPrqzkCMxczeLY7cTndbsMF7EkVgL/74a6hxNrn/F6RuD74TLK6R2r0GsmntTTtRg==
+
+custom-media-element@~1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.4.1.tgz#799d86e91d5feaa60fa351e649d8d577826aa407"
+  integrity sha512-kWPRk+6tEebklkd9QWbeCAEOzgL72Uhra4ZSmjN3R9mxg4emqh/0vKyKgxzLtuak76SiaSstzCY6zFrBZ8kyJg==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -8849,6 +8903,11 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
+hls.js@~1.5.11:
+  version "1.5.17"
+  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.5.17.tgz#8a4a9bae2df4dab23168156f5f7d0f39a71026fd"
+  integrity sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -10919,6 +10978,21 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
+media-chrome@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-4.3.0.tgz#e18a7bb910f005746261ddbaa1a0a2624ed2c74e"
+  integrity sha512-Gr8Jd7eEjG53u8w0kJSWVUf1AbqUhRmMO9g2CvMDU4/V3ixy+FRKNRDNkPTQLHU6YN8PsCwfQVv619HL7lm8+Q==
+
+media-chrome@~4.2.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-4.2.3.tgz#adb0f289eac9412ad18e17356b4cfc384d2ca364"
+  integrity sha512-gzwFy2b+RLsEtnPzUzqzf2L5XkaTLQr8POOyLOcoebWSAWg31cPy2vfXNiUnd93sc5IxwJ8OAwkKxnaJNZ8Gjg==
+
+media-tracks@~0.3.2:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/media-tracks/-/media-tracks-0.3.3.tgz#cca72bd791dcb76cd6427dfa6b2baa25601ea192"
+  integrity sha512-9P2FuUHnZZ3iji+2RQk7Zkh5AmZTnOG5fODACnjhCVveX1McY3jmCRHofIEI+yTBqplz7LXy48c7fQ3Uigp88w==
+
 [email protected]:
   version "0.3.0"
   resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
@@ -11191,6 +11265,11 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+mux-embed@^5.3.1:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/mux-embed/-/mux-embed-5.4.3.tgz#eb33b4d5f5d8348e9dd0404cdffe1a1d32174d58"
+  integrity sha512-vNEtD9KM6yq1EcQxFpvSpQhn34IIYbvugTeoifkSmfK6LbKvCxkXoJ1FLDvT+mRcRADewv4WvHccvmuZ4qvKZA==
+
 mysql@^2.18.1:
   version "2.18.1"
   resolved "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz"
@@ -12036,6 +12115,13 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+player.style@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/player.style/-/player.style-0.0.8.tgz#8efd503a62df70b915e466b4b7ea96c1bc7130fc"
+  integrity sha512-ScmFzio3634eEn+ejpkEw13F5xYvnPghtaZz/Kg7QQP78ECrxdjRVqwVPZhUwbYxmg5OIScByOgHfrHpzTtR1Q==
+  dependencies:
+    media-chrome "^4.1.0"
+
 postcss-attribute-case-insensitive@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"