Skip to content

Commit fa9ea14

Browse files
filiptronicekfiliptronicek
committed
Replace YouTube with Mux for Gitpod demo video
1 parent 7f43d48 commit fa9ea14

File tree

5 files changed

+186
-28
lines changed

5 files changed

+186
-28
lines changed

‎components/dashboard/package.json‎

Lines changed: 1 addition & 0 deletions
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-dropdown-menu": "^2.0.6",
1415
"@radix-ui/react-label": "^2.0.2",
1516
"@radix-ui/react-popover": "^1.0.7",

‎components/dashboard/src/components/podkit/loading/Skeleton.tsx‎

Lines changed: 39 additions & 0 deletions
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+
};

‎components/dashboard/src/onboarding/VideoSection.tsx‎

Lines changed: 51 additions & 0 deletions
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+
);

‎components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx‎

Lines changed: 9 additions & 23 deletions
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">

‎yarn.lock‎

Lines changed: 86 additions & 5 deletions
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/[email protected]":
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/[email protected]":
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/[email protected]":
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/[email protected]":
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"
@@ -5547,6 +5584,13 @@ case-sensitive-paths-webpack-plugin@^2.4.0:
55475584
resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
55485585
integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
55495586

5587+
castable-video@~1.1.0:
5588+
version "1.1.3"
5589+
resolved "https://registry.yarnpkg.com/castable-video/-/castable-video-1.1.3.tgz#d43d34e9cecc1eed3f9c71fe0e7682887247952b"
5590+
integrity sha512-FouzepsK6q1cUxBgKX6I2SaYN4OXZ/A3G+HS0Urpj8DPXfSRhdGOuHLk4ijOxuHxmQd6Se4V70M6Rn9fLUh0AA==
5591+
dependencies:
5592+
custom-media-element "~1.4.1"
5593+
55505594
catharsis@^0.9.0:
55515595
version "0.9.0"
55525596
resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.9.0.tgz#40382a168be0e6da308c277d3a2b3eb40c7d2121"
@@ -6420,6 +6464,16 @@ csstype@^3.0.2:
64206464
resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz"
64216465
integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
64226466

6467+
custom-media-element@~1.3.1:
6468+
version "1.3.3"
6469+
resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.3.3.tgz#1f9ab10265f84a96437281bc3607490eb9bfef12"
6470+
integrity sha512-5Tenv3iLP8ZiLHcT0qSyfDPrqzkCMxczeLY7cTndbsMF7EkVgL/74a6hxNrn/F6RuD74TLK6R2r0GsmntTTtRg==
6471+
6472+
custom-media-element@~1.4.1:
6473+
version "1.4.1"
6474+
resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.4.1.tgz#799d86e91d5feaa60fa351e649d8d577826aa407"
6475+
integrity sha512-kWPRk+6tEebklkd9QWbeCAEOzgL72Uhra4ZSmjN3R9mxg4emqh/0vKyKgxzLtuak76SiaSstzCY6zFrBZ8kyJg==
6476+
64236477
damerau-levenshtein@^1.0.8:
64246478
version "1.0.8"
64256479
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -8807,6 +8861,11 @@ history@^4.9.0:
88078861
tiny-warning "^1.0.0"
88088862
value-equal "^1.0.1"
88098863

8864+
hls.js@~1.5.11:
8865+
version "1.5.17"
8866+
resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.5.17.tgz#8a4a9bae2df4dab23168156f5f7d0f39a71026fd"
8867+
integrity sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==
8868+
88108869
hmac-drbg@^1.0.1:
88118870
version "1.0.1"
88128871
resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -10877,6 +10936,21 @@ mdurl@^1.0.1:
1087710936
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
1087810937
integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
1087910938

10939+
media-chrome@^4.1.0:
10940+
version "4.3.0"
10941+
resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-4.3.0.tgz#e18a7bb910f005746261ddbaa1a0a2624ed2c74e"
10942+
integrity sha512-Gr8Jd7eEjG53u8w0kJSWVUf1AbqUhRmMO9g2CvMDU4/V3ixy+FRKNRDNkPTQLHU6YN8PsCwfQVv619HL7lm8+Q==
10943+
10944+
media-chrome@~4.2.1:
10945+
version "4.2.3"
10946+
resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-4.2.3.tgz#adb0f289eac9412ad18e17356b4cfc384d2ca364"
10947+
integrity sha512-gzwFy2b+RLsEtnPzUzqzf2L5XkaTLQr8POOyLOcoebWSAWg31cPy2vfXNiUnd93sc5IxwJ8OAwkKxnaJNZ8Gjg==
10948+
10949+
media-tracks@~0.3.2:
10950+
version "0.3.3"
10951+
resolved "https://registry.yarnpkg.com/media-tracks/-/media-tracks-0.3.3.tgz#cca72bd791dcb76cd6427dfa6b2baa25601ea192"
10952+
integrity sha512-9P2FuUHnZZ3iji+2RQk7Zkh5AmZTnOG5fODACnjhCVveX1McY3jmCRHofIEI+yTBqplz7LXy48c7fQ3Uigp88w==
10953+
1088010954
[email protected]:
1088110955
version "0.3.0"
1088210956
resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
@@ -11149,6 +11223,11 @@ multicast-dns@^7.2.5:
1114911223
dns-packet "^5.2.2"
1115011224
thunky "^1.0.2"
1115111225

11226+
mux-embed@^5.3.1:
11227+
version "5.4.3"
11228+
resolved "https://registry.yarnpkg.com/mux-embed/-/mux-embed-5.4.3.tgz#eb33b4d5f5d8348e9dd0404cdffe1a1d32174d58"
11229+
integrity sha512-vNEtD9KM6yq1EcQxFpvSpQhn34IIYbvugTeoifkSmfK6LbKvCxkXoJ1FLDvT+mRcRADewv4WvHccvmuZ4qvKZA==
11230+
1115211231
mysql@^2.18.1:
1115311232
version "2.18.1"
1115411233
resolved "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz"
@@ -11994,6 +12073,13 @@ pkg-up@^3.1.0:
1199412073
dependencies:
1199512074
find-up "^3.0.0"
1199612075

12076+
player.style@^0.0.8:
12077+
version "0.0.8"
12078+
resolved "https://registry.yarnpkg.com/player.style/-/player.style-0.0.8.tgz#8efd503a62df70b915e466b4b7ea96c1bc7130fc"
12079+
integrity sha512-ScmFzio3634eEn+ejpkEw13F5xYvnPghtaZz/Kg7QQP78ECrxdjRVqwVPZhUwbYxmg5OIScByOgHfrHpzTtR1Q==
12080+
dependencies:
12081+
media-chrome "^4.1.0"
12082+
1199712083
postcss-attribute-case-insensitive@^5.0.2:
1199812084
version "5.0.2"
1199912085
resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
@@ -15326,11 +15412,6 @@ typescript@^5.5.4:
1532615412
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
1532715413
integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
1532815414

15329-
typescript@^5.5.4:
15330-
version "5.5.4"
15331-
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
15332-
integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
15333-
1533415415
ua-parser-js@^1.0.36:
1533515416
version "1.0.36"
1533615417
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.36.tgz#a9ab6b9bd3a8efb90bb0816674b412717b7c428c"

0 commit comments

Comments
 (0)