🧑‍🏫 Add the demo video on YPP 2.0 landing page (#5056)

* Add YPP demo from Vimeo * Fix video on small screens * Fix section title
Joystream · Oct 20, 2023 · 60585a5 · 60585a5
1 parent 21d2d82
commit 60585a5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx b/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx
@@ -23,6 +23,7 @@ import { YppCardsSections } from './sections/YppCardsSections'
 import { YppFooter } from './sections/YppFooter'
 import { YppHero } from './sections/YppHero'
 import { YppRewardSection } from './sections/YppRewardSection'
+import { YppSignupVideo } from './sections/YppSignupVideo'
 import { useGetYppSyncedChannels } from './useGetYppSyncedChannels'
 
 const SINGUP_DAILY_QUOTA = 500 // 2% of the total daily quota
@@ -151,7 +152,7 @@ export const YppLandingView: FC = () => {
           selectedChannelTitle={selectedChannelTitle}
         />
         <YppRewardSection />
-        {/*<YppSignupVideo />*/}
+        <YppSignupVideo />
         <YppConnectionDetails />
         <YppCardsSections />
         <YppFooter onSignUpClick={handleYppSignUpClick} />

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppSignupVideo.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppSignupVideo.tsx
@@ -1,10 +1,8 @@
 import styled from '@emotion/styled'
 
-import { useFullVideo } from '@/api/hooks/video'
 import { GridItem } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
-import { VideoPlayer } from '@/components/_video/VideoPlayer'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import {
   BackgroundContainer,
@@ -14,7 +12,6 @@ import {
 import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
 
 export const YppSignupVideo = () => {
-  const { video, loading } = useFullVideo('2')
   const mdMatch = useMediaMatch('md')
   const [titleVariant, subtitleVariant] = useSectionTextVariants()
 
@@ -24,7 +21,7 @@ export const YppSignupVideo = () => {
         <CenteredLayoutGrid data-aos="fade-up" data-aos-delay="0" data-aos-offset="80" data-aos-easing="atlas-easing">
           <GridItem colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }} colStart={{ sm: 2, md: 3, lg: 4 }}>
             <Text variant={titleVariant} as="h1">
-              Sign up in 30 seconds
+              Sign up in 60 seconds
             </Text>
             <Text
               variant={subtitleVariant}
@@ -37,23 +34,18 @@ export const YppSignupVideo = () => {
             </Text>
           </GridItem>
           <GridItem colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }} colStart={{ sm: 2, md: 3, lg: 4 }}>
-            {loading && !video ? (
-              <PlayerSkeletonLoader
-                data-aos="fade-up"
-                data-aos-delay="100"
-                data-aos-offset="40"
-                data-aos-easing="atlas-easing"
+            <PlayerContainer
+              data-aos="fade-up"
+              data-aos-delay="100"
+              data-aos-offset="40"
+              data-aos-easing="atlas-easing"
+            >
+              <IframeVideo
+                src="https://player.vimeo.com/video/875953807?badge=0&amp;autopause=0&amp;quality_selector=1&amp;progress_bar=1&amp;player_id=0&amp;app_id=58479"
+                allow="autoplay; fullscreen; picture-in-picture"
+                title="YPP"
               />
-            ) : (
-              <PlayerContainer
-                data-aos="fade-up"
-                data-aos-delay="100"
-                data-aos-offset="40"
-                data-aos-easing="atlas-easing"
-              >
-                <VideoPlayer videoId={video?.id} videoUrls={video?.media?.resolvedUrls} hideCinematic />
-              </PlayerContainer>
-            )}
+            </PlayerContainer>
           </GridItem>
         </CenteredLayoutGrid>
       </StyledLimitedWidthContainerVideo>
@@ -71,3 +63,11 @@ export const PlayerSkeletonLoader = styled(SkeletonLoader)`
   position: absolute;
   top: 0;
 `
+
+const IframeVideo = styled.iframe`
+  border: none;
+  width: 640px;
+  height: 364px;
+  max-width: 100%;
+  max-height: 55vw;
+`