Merge pull request #2042 from starknet-io/enhancement/what-is-starkne…

…t-page Enhance what is starknet page
starknet-io · Jan 2, 2024 · 05aa006 · 05aa006
2 parents 144a26d + 4f5898e
commit 05aa006
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 60 deletions.
diff --git a/_data/pages/what-is-starknet.yml b/_data/pages/what-is-starknet.yml
@@ -5,8 +5,9 @@ page_last_updated: true
 blocks:
   - type: page_header
     title: "What is Starknet? "
+    description: ""
   - type: markdown
-    body: >
+    body: >-
       Starknet is a Validity-Rollup (aka ZK-Rollup) Layer 2 network that
       operates on top of Ethereum, enabling dApps to massively scale without
       compromising on security.
@@ -61,6 +62,8 @@ blocks:
         The Core contract verifies the proof's authenticity and confirms receiving the State Diff, subsequently updating the Starknet state on the Ethereum blockchain. This updated state is then added to an Ethereum block, distributed across the node network for validation and voting. When the block accumulates sufficient votes, it achieves "finalized" status, cementing its place as an immutable part of Ethereum.
       title: Secure Settlement on Ethereum
       description: Chapter 4 explains how to secure settlement on Ethereum
+    chapterDescriptionFullWidth: true
+    playlistOnBottom: false
   - type: link_list
     heading: Further reading
     listSize: lg

diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts
@@ -692,6 +692,20 @@ export const blocks = [
     label: "Education video section",
     widget: "object",
     fields: [
+      {
+        label: "Chapter description full width",
+        name: "chapterDescriptionFullWidth",
+        widget: "boolean",
+        default: false,
+        required: false,
+      },
+      {
+        label: "Chapters playlist on bottom of video desktop",
+        name: "playlistOnBottom",
+        widget: "boolean",
+        default: true,
+        required: false,
+      },
       {
         crowdin: true,
         label: 'Chapter 1',

diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts
@@ -158,6 +158,8 @@ export interface VideoSectionBlock {
   readonly sequencer: ChapterInfo;
   readonly prover: ChapterInfo;
   readonly 'eth-settlement': ChapterInfo;
+  readonly chapterDescriptionFullWidth: boolean;
+  readonly playlistOnBottom: boolean;
 }
 
 export interface NewsletterBlock {

diff --git a/workspaces/website/src/blocks/VideoSectionBlock.tsx b/workspaces/website/src/blocks/VideoSectionBlock.tsx
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 
-import { Box } from "@chakra-ui/react";
+import { Box, Show } from "@chakra-ui/react";
 import {
   VideoSectionBlock as VideoSectionProps,
   ChapterInfo
@@ -26,6 +26,8 @@ type ChapterType = Chapter & ChapterInfo;
  */
 
 export default function VideoSectionBlock(props: VideoSectionProps) {
+  const { playlistOnBottom, chapterDescriptionFullWidth } = props;
+
   const normalizedPlaylist = useMemo(() => {
     return playlist.map((chapter) => {
       const chapterInfo = props[chapter.id as keyof VideoSectionProps] as ChapterInfo;
@@ -55,23 +57,26 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
         onChapterChange={(id) => 
           setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
         }
-        playlistOnBottom
+        playlistOnBottom={playlistOnBottom}
       />
 
-      <Box mt="md">
-        <CategoryTabs
-          activeItemId={currentChapter.id}
-          onTabClick={(id) => 
-            setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
-          }
-          items={normalizedPlaylist.map((p) => ({
-            id: p.id,
-            label: p.subtitle,
-          }))}
-        />
+      <Box marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px"  }}>
+        <Show above="lg">   
+          <CategoryTabs
+            activeItemId={currentChapter.id}
+            onTabClick={(id) => 
+              setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
+            }
+            items={normalizedPlaylist.map((p) => ({
+              id: p.id,
+              label: p.subtitle,
+            }))}
+            playlistOnBottom={playlistOnBottom}
+          />
+        </Show>
 
         <Box
-          maxW="656px"
+          maxW={chapterDescriptionFullWidth ? "100%" : "656px"}
           marginInline="auto"
           marginTop={'32px'}
         >

diff --git a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
@@ -49,9 +49,9 @@ export const CategoryTabs = ({
         width="100%"
         padding={'0 24px'}
       >
-        {items.map((item) => {
+        {items.map((item, index) => {
           return (
-            <Box>
+            <Box key={item.label + index}>
               <Button
                 as={item.link ? "a" : "button"}
                 href={item.link}

diff --git a/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx b/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx
@@ -26,6 +26,7 @@ import { isFinalChapter } from "./utils";
 import "./player-overrides.css";
 import { FinalChapterLeftCTA } from "./chapter-cta/FinalChapterLeftCTA";
 import { FinalChapterRightCTA } from "./chapter-cta/FinalChapterRightCTA";
+import { Box } from "@chakra-ui/react";
 
 export type PlayerRef = React.MutableRefObject<Player | null>;
 
@@ -231,7 +232,15 @@ export function VideoPlayerCore({
     totalDuration - currentTime < 5;
 
   return (
-    <div style={videoWrapperStyle} ref={videoWrapperRef}>
+    <Box
+      sx={{
+        ".video-js, .video-js .vjs-tech, .vjs-poster img": {
+          borderRadius: "8px",
+        },
+      }} 
+      style={videoWrapperStyle} 
+      ref={videoWrapperRef}
+    >
       <div style={videoPositionStyle} onClick={onPlayToggle}>
         <VideoJS
           options={videojsOptions}
@@ -308,6 +317,6 @@ export function VideoPlayerCore({
           onShare={onShareModalOpen}
         />
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx b/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx
@@ -109,6 +109,8 @@ export default function CustomControl(props: CustomControlProps) {
           bg: "rgba(0, 0, 0, .75)",
           backdropBlur: "sm",
           alignItems: "center",
+          borderBottomLeftRadius: "8px",
+          borderBottomRightRadius: "8px",
         }}
       >
         <PlayButton playingStatus={playingStatus} handlePlay={onPlayToggle} />

diff --git a/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx
@@ -5,7 +5,6 @@
 
 import { Box, Image } from "@chakra-ui/react";
 import { Chapter } from "../constants";
-import { useOverflow } from "../hooks/useOverflow";
 import { useRef } from "react";
 
 /**
@@ -30,12 +29,10 @@ export default function BottomPlaylist({
   onChapterSelect
 }: BottomPlaylistProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const { hasOverflowX } = useOverflow(ref);
 
   return (
     <Box
       borderColor="border.divider"
-      borderRightWidth={hasOverflowX ? "1px" : "0px"}
       borderStyle="solid"
       display="flex"
       flexDirection={{ base: "row", lg: 'row' }}
@@ -46,8 +43,7 @@ export default function BottomPlaylist({
       }}
       marginTop={'24px'}
       maxH={{ base: "auto", lg: 'auto' }}
-      overflow={'auto'}
-      paddingRight={hasOverflowX ? "sm" : undefined}
+      overflowX="auto"
       ref={ref}
       sx={{
         overflow: "auto",

diff --git a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
@@ -1,6 +1,13 @@
 import { Box, Image, useBreakpointValue } from "@chakra-ui/react";
 import { Chapter } from "../constants";
 import { useUpdateEffect } from "react-use";
+import styled from "@emotion/styled";
+
+const ChaptersPlaylistWrapper = styled(Box)`
+  ::-webkit-scrollbar {
+    width: thin;
+  }
+`;
 
 type ChaptersPlaylistProps = {
   height: number;
@@ -29,19 +36,25 @@ export default function ChaptersPlaylist({
   }, [currentChapter, isMobile]);
 
   return (
-    <Box
+    <ChaptersPlaylistWrapper
       sx={{
-        overflow: "scroll",
         maxHeight: height,
-        gap: "16px",
         cursor: "pointer",
       }}
       display={{ base: "flex", lg: "grid" }}
       maxH={{ base: "auto", lg: height }}
+      gap={{ base: "40px", lg: "16px" }}
+      paddingBottom={{ base: "12px", lg: "0px" }}
+      overflowY="auto"
+      overflowX="auto"
       flexWrap="nowrap"
     >
       {chapters.map((chapter) => {
         const isActive = chapter.id === currentChapter;
+        const textColor = isActive
+          ? "heading-navy-fg"
+          : "content.accent.disabled";
+
         return (
           <Box
             key={chapter.id}
@@ -52,62 +65,59 @@ export default function ChaptersPlaylist({
               gap: "16px",
               pointer: "cursor",
             }}
-            minW={{ base: "151px", lg: "auto" }}
+            maxW={{ base: "151px", md: "175px", lg: "100%" }}
             flexDir={{ base: "column", lg: "row" }}
             flexWrap="nowrap"
-            padding={{ base: "0px 0px 2rem", lg: "0px 1rem 0px" }}
+            padding={{ lg: "0px 4px 0px 0px" }}
             height="max-content"
           >
-            <Box
-              maxW={{ base: "151px", lg: "99px", xl: "151px" }}
-              height="min-content"
-            >
+            <Box minW={{ base: "151px", md: "175px" }}>
               <Image
                 src={chapter.thumbnail}
                 width={{
                   base: "151px",
-                  lg: "99px",
-                  xl: "151px",
+                  md: "175px"
                 }}
                 height="auto"
                 alt={chapter.title}
                 style={{
-                  // borderBottom: isActive ? "1px solid#EC796B" : "",
-                  borderRadius: "10px",
+                  borderRadius: "8px",
                 }}
                 aspectRatio="16/9"
+                objectFit="cover"
               />
             </Box>
-            <Box display="flex" flexDir="column" gap="4px">
+
+            <Box display="flex" width="100%" flexDir="column" gap="4px" color={textColor}>            
               <Box
-                as="h5"
-                fontSize="sm"
-                fontWeight="bold"
-                color={isActive ? "heading-navy-fg" : "fg-muted"}
+                fontSize="12px"
+                fontWeight={500}
                 lineHeight="normal"
+                display="flex"
+                justifyContent="space-between"
               >
+                {chapter.subtitle}
+                <Box
+                  display={{
+                    base: "block"
+                  }}
+                >
+                  {chapter.durationTime}
+                </Box>
+              </Box>
+
+              <Box as="h5" fontSize="15px" fontWeight="600" lineHeight="21px">
                 {chapter.title}
               </Box>
+
               <Box
                 as="p"
                 fontSize="12px"
-                lineHeight="15px"
-                sx={{
-                  maxW: "200px",
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
-              >
-                {chapter.description}
-              </Box>
-              <Box
-                as="p"
-                fontSize="xs"
-                lineHeight={1}
-                sx={{
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
+                lineHeight="normal"
                 flex={1}
-                display="flex"
+                display={{
+                  base: "none"
+                }}
                 alignItems="flex-end"
               >
                 {chapter.durationTime}
@@ -116,6 +126,6 @@ export default function ChaptersPlaylist({
           </Box>
         );
       })}
-    </Box>
+    </ChaptersPlaylistWrapper>
   );
 }
diff --git a/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx b/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx
@@ -86,7 +86,7 @@ export function VideoPlayerWebsite({
         display: "grid",
         position: "relative",
       }}
-      gap="2xl"
+      gap="32px"
       gridTemplateColumns={{
         base: "1fr",
         lg: playlistOnBottom ? "1fr" : "2fr 1fr",