Home: improve watch tiles (#4955)

Author: Simek

website/src/components/Home/Watch/index.tsx

@@ -5,14 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import {useState} from 'react';
 
 import Section from '../Section';
 import SectionTitle from '../SectionTitle';
 
 import styles from './styles.module.css';
 
 function Watch() {
+  const [playingId, setPlayingId] = useState<string | null>(null);
+
   return (
     <Section>
       <SectionTitle
@@ -34,29 +36,61 @@ function Watch() {
         }
       />
       <div className={styles.videos}>
-        <div className={styles.videoContainer}>
-          <iframe
-            src="https://www.youtube.com/embed/NCAY0HIfrwc"
-            title="Mobile Innovation with React Native, ComponentKit, and Litho"
-            frameBorder="0"
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            className={styles.video}
-          />
+        <div
+          role="button"
+          aria-label="Play: FB 2019: Mobile innovation with React Native"
+          className={[
+            styles.videoContainer,
+            playingId === 'fb2019'
+              ? styles.videoContainerPlaying
+              : styles.videoContainerHover,
+          ].join(' ')}
+          onClick={() => setPlayingId('fb2019')}>
+          {playingId === 'fb2019' ? (
+            <iframe
+              src="https://www.youtube.com/embed/NCAY0HIfrwc?autoplay=1"
+              title="Mobile Innovation with React Native, ComponentKit, and Litho"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              className={styles.video}
+            />
+          ) : (
+            <img
+              src="https://img.youtube.com/vi/NCAY0HIfrwc/maxresdefault.jpg"
+              alt="Mobile Innovation with React Native, ComponentKit, and Litho"
+              className={styles.video}
+            />
+          )}
           <div className={styles.videoInfo}>
             <h4>FB 2019: Mobile innovation with React Native</h4>
             <p>45:29</p>
           </div>
         </div>
-        <div className={styles.videoContainer}>
-          <iframe
-            src="https://www.youtube.com/embed/wUDeLT6WXnQ"
-            title="Explain Like I'm 5: React Native"
-            frameBorder="0"
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            className={styles.video}
-          />
+        <div
+          role="button"
+          aria-label="Play: Why React Native?"
+          className={[
+            styles.videoContainer,
+            playingId === 'why'
+              ? styles.videoContainerPlaying
+              : styles.videoContainerHover,
+          ].join(' ')}
+          onClick={() => setPlayingId('why')}>
+          {playingId === 'why' ? (
+            <iframe
+              src="https://www.youtube.com/embed/wUDeLT6WXnQ?autoplay=1"
+              title="Explain Like I'm 5: React Native"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              className={styles.video}
+            />
+          ) : (
+            <img
+              src="https://img.youtube.com/vi/wUDeLT6WXnQ/maxresdefault.jpg"
+              alt="Explain Like I'm 5: React Native"
+              className={styles.video}
+            />
+          )}
           <div className={styles.videoInfo}>
             <h4>Why React Native?</h4>
             <p>1:42</p>

website/src/components/Home/Watch/styles.module.css

@@ -15,32 +15,50 @@
 .videoContainer {
   border: 1px solid var(--home-border);
   border-radius: 12px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   max-width: 400px;
   background: var(--home-background);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.videoContainerHover {
+  &:hover {
+    background: var(--home-secondary-background);
+  }
+}
+
+.videoContainerPlaying {
+  cursor: auto;
 }
 
 .video {
   width: 100%;
-  height: 200px;
+  max-height: 206px;
   border-radius: 8px;
   border: 1px solid var(--home-border);
+  aspect-ratio: 16/9;
 }
 
 .videoInfo {
   display: flex;
+  flex: 1;
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
-}
 
-.videoInfo p {
-  position: relative;
-  top: 2px;
+  h4 {
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-bottom: 0;
+    line-height: 21px;
+  }
 }
 
 @media only screen and (max-width: 700px) {

website/src/css/customTheme.scss

@@ -113,7 +113,7 @@
   --home-feature-background-1: #f4e3fc;
   --home-feature-background-2: #e1eefc;
   --home-feature-background-3: #d4f3e7;
-  --home-border: #e5e7eb;
+  --home-border: #dfe1e6;
   --home-background: #fff;
   --home-secondary-background: #f6f7f9;
   --home-text: #1c1e21;