Skip to content

Commit eaf1055

Browse files
filiptronicekfiliptronicek
authored
Replace YouTube with Mux for Gitpod demo video (#20444)
1 parent da1d931 commit eaf1055

File tree

5 files changed

+186
-23
lines changed

5 files changed

+186
-23
lines changed

Diff for: ‎components/dashboard/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@gitpod/gitpod-protocol": "0.1.5",
1111
"@gitpod/public-api": "0.1.5",
1212
"@gitpod/public-api-common": "0.1.5",
13+
"@mux/mux-player-react": "^3.1.0",
1314
"@radix-ui/react-accordion": "^1.2.1",
1415
"@radix-ui/react-dropdown-menu": "^2.0.6",
1516
"@radix-ui/react-label": "^2.0.2",

Diff for: ‎components/dashboard/src/components/podkit/loading/Skeleton.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Copyright (c) 2024 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License.AGPL.txt in the project root for license information.
5+
*/
6+
7+
import { cn, PropsWithClassName } from "@podkit/lib/cn";
8+
import { PropsWithChildren } from "react";
9+
10+
type SkeletonProps = {
11+
ready: boolean;
12+
failed?: boolean;
13+
hideOnFailed?: boolean;
14+
animate?: boolean;
15+
};
16+
export const SkeletonBlock = ({
17+
failed,
18+
ready,
19+
animate,
20+
children,
21+
className,
22+
hideOnFailed,
23+
}: PropsWithChildren<SkeletonProps & PropsWithClassName>): JSX.Element => {
24+
if (ready && children) {
25+
return <>{children}</>;
26+
}
27+
28+
return (
29+
<div
30+
className={cn(
31+
"block rounded-md bg-pk-surface-tertiary",
32+
!failed && (animate ?? true) && "animate-pulse",
33+
// Using opacity instead of hidden to prevent layout shifts
34+
failed && hideOnFailed && "opacity-0",
35+
className,
36+
)}
37+
/>
38+
);
39+
};

Diff for: ‎components/dashboard/src/onboarding/VideoSection.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* Copyright (c) 2024 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License.AGPL.txt in the project root for license information.
5+
*/
6+
7+
import { MuxPlayerProps } from "@mux/mux-player-react";
8+
import { cn } from "@podkit/lib/cn";
9+
import { SkeletonBlock } from "@podkit/loading/Skeleton";
10+
import { lazy, Suspense, FC } from "react";
11+
12+
const MuxPlayer = lazy(() => import("@mux/mux-player-react"));
13+
14+
type Props = {
15+
playbackId: string;
16+
metadataVideoTitle: string;
17+
poster?: string;
18+
className?: string;
19+
playerProps?: MuxPlayerProps;
20+
};
21+
export const VideoSection: FC<Props> = ({ playbackId, metadataVideoTitle, poster, className, playerProps }) => (
22+
<div
23+
className={cn(
24+
"flex w-full flex-col items-start justify-start overflow-hidden rounded-md drop-shadow-xl",
25+
className,
26+
)}
27+
>
28+
<Suspense fallback={<SkeletonBlock ready={false} className="max-h-[300px] w-full" />}>
29+
<MuxPlayer
30+
aria-label={"Video: " + metadataVideoTitle}
31+
streamType="on-demand"
32+
playbackId={playbackId}
33+
metadataVideoTitle={metadataVideoTitle}
34+
primaryColor="#FFFFFF"
35+
secondaryColor="#000000"
36+
accentColor="#FF8A00"
37+
defaultHiddenCaptions={playerProps?.defaultHiddenCaptions ?? true}
38+
poster={poster}
39+
style={{
40+
aspectRatio: "16 / 9",
41+
backgroundColor: "var(--surface-tertiary)",
42+
borderRadius: "6px",
43+
}}
44+
preload={"metadata"}
45+
disableCookies
46+
disableTracking
47+
{...playerProps}
48+
/>
49+
</Suspense>
50+
</div>
51+
);

Diff for: ‎components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx

+9-23
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,23 @@ import { LinkButton } from "@podkit/buttons/LinkButton";
88
import { Heading2, Subheading } from "@podkit/typography/Headings";
99
import { trackVideoClick } from "../Analytics";
1010

11-
import "lite-youtube-embed/src/lite-yt-embed.css";
12-
import "lite-youtube-embed/src/lite-yt-embed";
13-
14-
declare global {
15-
namespace JSX {
16-
interface IntrinsicElements {
17-
"lite-youtube": any;
18-
}
19-
}
20-
}
11+
import { VideoSection } from "../onboarding/VideoSection";
2112

2213
export const EmptyWorkspacesContent = () => {
23-
const onPlayerStateChange = () => {
14+
const handlePlay = () => {
2415
trackVideoClick("create-new-workspace");
2516
};
2617

2718
return (
2819
<div className="app-container flex flex-col space-y-2">
2920
<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">
30-
<lite-youtube
31-
videoid="1ZBN-b2cIB8"
32-
width="535"
33-
height="307"
34-
onClick={onPlayerStateChange}
35-
style={{
36-
width: "535px",
37-
backgroundImage: "url('https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp')",
38-
}}
39-
class="rounded-xl"
40-
playlabel="Gitpod in under 120 seconds"
41-
></lite-youtube>
21+
<VideoSection
22+
metadataVideoTitle="Gitpod demo"
23+
playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
24+
poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
25+
playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
26+
className="w-[535px] rounded-xl"
27+
/>
4228
<div className="flex flex-col items-center xl:items-start justify-center">
4329
<Heading2 className="mb-4 !font-semibold !text-lg">Create your first workspace</Heading2>
4430
<Subheading className="max-w-xs xl:text-left text-center">

Diff for: ‎yarn.lock

+86
Original file line numberDiff line numberDiff line change
@@ -2125,6 +2125,43 @@
21252125
semver "^7.3.5"
21262126
tar "^6.1.11"
21272127

2128+
"@mux/mux-player-react@^3.1.0":
2129+
version "3.1.0"
2130+
resolved "https://registry.yarnpkg.com/@mux/mux-player-react/-/mux-player-react-3.1.0.tgz#fed522ddb1e7fd59593e320773eab61a7aebe5de"
2131+
integrity sha512-oJWcRtDNE84KKSi/5tz7CKGHBLA34V9XlLnv30qqVMAvfifa3S0lY82gP41YA0OfYANwp5Sg29bbh3quekusPg==
2132+
dependencies:
2133+
"@mux/mux-player" "3.1.0"
2134+
"@mux/playback-core" "0.27.0"
2135+
prop-types "^15.7.2"
2136+
2137+
"@mux/mux-player@3.1.0":
2138+
version "3.1.0"
2139+
resolved "https://registry.yarnpkg.com/@mux/mux-player/-/mux-player-3.1.0.tgz#cb017d427a3676c5e20c51ca58ecdb23a76fcc4f"
2140+
integrity sha512-vU7HjvM3KLDfMwMfjbotlhjQrakwm9A4zixxtzBdxwDMLKf0FUKiFOGyTGOdsIKNBRVlS5Ffz9ERU+3Hh+XcBQ==
2141+
dependencies:
2142+
"@mux/mux-video" "0.22.0"
2143+
"@mux/playback-core" "0.27.0"
2144+
media-chrome "~4.2.1"
2145+
player.style "^0.0.8"
2146+
2147+
"@mux/mux-video@0.22.0":
2148+
version "0.22.0"
2149+
resolved "https://registry.yarnpkg.com/@mux/mux-video/-/mux-video-0.22.0.tgz#7369022d40e8811be540a57ddef547981df01790"
2150+
integrity sha512-VrY4AVc6KkQcG0EPOtHf7aGXFwO1DTLZKtRRdPCx0KWSAlwR1II5YnHcEAwPbi1Uv94Hykq3Lbjt5dLqRNXKtA==
2151+
dependencies:
2152+
"@mux/playback-core" "0.27.0"
2153+
castable-video "~1.1.0"
2154+
custom-media-element "~1.3.1"
2155+
media-tracks "~0.3.2"
2156+
2157+
"@mux/playback-core@0.27.0":
2158+
version "0.27.0"
2159+
resolved "https://registry.yarnpkg.com/@mux/playback-core/-/playback-core-0.27.0.tgz#1bc7496c52c08c6a1c1963761e414882cd39f8c3"
2160+
integrity sha512-9kzpGRJNXLNMfFV6hvOde2+Uy3HyllwwEt9H5r4gYXOmrivQ6IWIGr9nXrUy7fmNkx6H05W+96zt1GhtBTlSDQ==
2161+
dependencies:
2162+
hls.js "~1.5.11"
2163+
mux-embed "^5.3.1"
2164+
21282165
"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
21292166
version "5.1.1-v1"
21302167
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:
55895626
resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
55905627
integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
55915628

5629+
castable-video@~1.1.0:
5630+
version "1.1.3"
5631+
resolved "https://registry.yarnpkg.com/castable-video/-/castable-video-1.1.3.tgz#d43d34e9cecc1eed3f9c71fe0e7682887247952b"
5632+
integrity sha512-FouzepsK6q1cUxBgKX6I2SaYN4OXZ/A3G+HS0Urpj8DPXfSRhdGOuHLk4ijOxuHxmQd6Se4V70M6Rn9fLUh0AA==
5633+
dependencies:
5634+
custom-media-element "~1.4.1"
5635+
55925636
catharsis@^0.9.0:
55935637
version "0.9.0"
55945638
resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.9.0.tgz#40382a168be0e6da308c277d3a2b3eb40c7d2121"
@@ -6462,6 +6506,16 @@ csstype@^3.0.2:
64626506
resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz"
64636507
integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
64646508

6509+
custom-media-element@~1.3.1:
6510+
version "1.3.3"
6511+
resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.3.3.tgz#1f9ab10265f84a96437281bc3607490eb9bfef12"
6512+
integrity sha512-5Tenv3iLP8ZiLHcT0qSyfDPrqzkCMxczeLY7cTndbsMF7EkVgL/74a6hxNrn/F6RuD74TLK6R2r0GsmntTTtRg==
6513+
6514+
custom-media-element@~1.4.1:
6515+
version "1.4.1"
6516+
resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.4.1.tgz#799d86e91d5feaa60fa351e649d8d577826aa407"
6517+
integrity sha512-kWPRk+6tEebklkd9QWbeCAEOzgL72Uhra4ZSmjN3R9mxg4emqh/0vKyKgxzLtuak76SiaSstzCY6zFrBZ8kyJg==
6518+
64656519
damerau-levenshtein@^1.0.8:
64666520
version "1.0.8"
64676521
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -8849,6 +8903,11 @@ history@^4.9.0:
88498903
tiny-warning "^1.0.0"
88508904
value-equal "^1.0.1"
88518905

8906+
hls.js@~1.5.11:
8907+
version "1.5.17"
8908+
resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.5.17.tgz#8a4a9bae2df4dab23168156f5f7d0f39a71026fd"
8909+
integrity sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==
8910+
88528911
hmac-drbg@^1.0.1:
88538912
version "1.0.1"
88548913
resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -10919,6 +10978,21 @@ mdurl@^1.0.1:
1091910978
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
1092010979
integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
1092110980

10981+
media-chrome@^4.1.0:
10982+
version "4.3.0"
10983+
resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-4.3.0.tgz#e18a7bb910f005746261ddbaa1a0a2624ed2c74e"
10984+
integrity sha512-Gr8Jd7eEjG53u8w0kJSWVUf1AbqUhRmMO9g2CvMDU4/V3ixy+FRKNRDNkPTQLHU6YN8PsCwfQVv619HL7lm8+Q==
10985+
10986+
media-chrome@~4.2.1:
10987+
version "4.2.3"
10988+
resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-4.2.3.tgz#adb0f289eac9412ad18e17356b4cfc384d2ca364"
10989+
integrity sha512-gzwFy2b+RLsEtnPzUzqzf2L5XkaTLQr8POOyLOcoebWSAWg31cPy2vfXNiUnd93sc5IxwJ8OAwkKxnaJNZ8Gjg==
10990+
10991+
media-tracks@~0.3.2:
10992+
version "0.3.3"
10993+
resolved "https://registry.yarnpkg.com/media-tracks/-/media-tracks-0.3.3.tgz#cca72bd791dcb76cd6427dfa6b2baa25601ea192"
10994+
integrity sha512-9P2FuUHnZZ3iji+2RQk7Zkh5AmZTnOG5fODACnjhCVveX1McY3jmCRHofIEI+yTBqplz7LXy48c7fQ3Uigp88w==
10995+
1092210996
media-typer@0.3.0:
1092310997
version "0.3.0"
1092410998
resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
@@ -11191,6 +11265,11 @@ multicast-dns@^7.2.5:
1119111265
dns-packet "^5.2.2"
1119211266
thunky "^1.0.2"
1119311267

11268+
mux-embed@^5.3.1:
11269+
version "5.4.3"
11270+
resolved "https://registry.yarnpkg.com/mux-embed/-/mux-embed-5.4.3.tgz#eb33b4d5f5d8348e9dd0404cdffe1a1d32174d58"
11271+
integrity sha512-vNEtD9KM6yq1EcQxFpvSpQhn34IIYbvugTeoifkSmfK6LbKvCxkXoJ1FLDvT+mRcRADewv4WvHccvmuZ4qvKZA==
11272+
1119411273
mysql@^2.18.1:
1119511274
version "2.18.1"
1119611275
resolved "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz"
@@ -12036,6 +12115,13 @@ pkg-up@^3.1.0:
1203612115
dependencies:
1203712116
find-up "^3.0.0"
1203812117

12118+
player.style@^0.0.8:
12119+
version "0.0.8"
12120+
resolved "https://registry.yarnpkg.com/player.style/-/player.style-0.0.8.tgz#8efd503a62df70b915e466b4b7ea96c1bc7130fc"
12121+
integrity sha512-ScmFzio3634eEn+ejpkEw13F5xYvnPghtaZz/Kg7QQP78ECrxdjRVqwVPZhUwbYxmg5OIScByOgHfrHpzTtR1Q==
12122+
dependencies:
12123+
media-chrome "^4.1.0"
12124+
1203912125
postcss-attribute-case-insensitive@^5.0.2:
1204012126
version "5.0.2"
1204112127
resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"

0 commit comments

Comments
 (0)