Merge pull request #63 from phuoc-ng/overlay-button

Add overlay play button

client/constants/Pattern.ts

@@ -21,6 +21,7 @@ enum Pattern {
     Menu = 'Menu',
     Modal = 'Modal',
     Notification = 'Notification',
+    OverlayPlayButton = 'Overlay play button',
     Pagination = 'Pagination',
     PresenceIndicator = 'Presence indicator',
     PreviousNextButtons = 'Previous next buttons',

client/pages/ExplorePage.tsx

@@ -104,6 +104,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Menu} />
                         <CoverCard pattern={Pattern.Modal} />
                         <CoverCard pattern={Pattern.Notification} />
+                        <CoverCard pattern={Pattern.OverlayPlayButton} />
                         <CoverCard pattern={Pattern.Pagination} />
                         <CoverCard pattern={Pattern.PresenceIndicator} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />

client/patterns/overlay-play-button/Cover.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Triangle from '../../placeholders/Triangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '2px solid #FFF',
+                                borderRadius: '9999px',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'center',
+                                width: '32px',
+                            }}
+                        >
+                            <Triangle backgroundColor='#FFF' corner='r' size={8} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/overlay-play-button/Details.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Overlay play button">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '100%',
+                                    position: 'relative',
+                                    width: '100%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                                        display: 'flex',
+                                        height: '100%',
+                                        justifyContent: 'center',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: 0,
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            border: '4px solid #FFF',
+                                            borderRadius: '9999px',
+                                            display: 'flex',
+                                            height: '64px',
+                                            justifyContent: 'center',
+                                            width: '64px',
+                                        }}
+                                    >
+                                        <Triangle backgroundColor='#FFF' corner='r' size={8} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the overlay */
+    position: relative;
+">
+    <!-- The video element -->
+    <video src="..." />
+
+    <!-- The overlay area -->
+    <div style="
+        /* Position */
+        left: 0;
+        position: absolute;
+        top: 0;
+
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+
+        /* Content is centered */
+        align-items: center;
+        display: flex;
+        justify-content: center;
+
+        /* Add a dark background */
+        background-color: 'rgba(0, 0, 0, 0.25)',
+    ">
+        <!-- The player button -->
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/placeholders/Triangle.tsx

@@ -1,43 +1,58 @@
 import React from 'react';
 
 interface TriangleProps {
+    backgroundColor?: string;
     corner?: string;
     size?: number;
 }
 
-const Triangle: React.FC<TriangleProps> = ({ size = 16, corner = 'tl' }) => {
+const Triangle: React.FC<TriangleProps> = ({
+    backgroundColor = 'rgba(0, 0, 0, .3)',
+    size = 16,
+    corner = 'tl',
+}) => {
     let bw = '';
     let bc = '';
     switch (corner) {
         case 't':
             bw = `0 ${size}px ${size}px ${size}px`;
-            bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
+            bc = `transparent transparent ${backgroundColor} transparent`;
+            break;
+
+        case 'r':
+            bw = `${size}px 0 ${size}px ${2 * size}px`;
+            bc = `transparent transparent transparent ${backgroundColor}`;
             break;
 
         case 'b':
             bw = `${size}px ${size}px 0 ${size}px`;
-            bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
+            bc = `${backgroundColor} transparent transparent transparent`;
+            break;
+
+        case 'l':
+            bw = `${size}px ${2 * size}px ${size}px 0`;
+            bc = `transparent ${backgroundColor} transparent transparent`;
             break;
 
         case 'tr':
             bw = `0 ${size}px ${size}px 0`;
-            bc = 'transparent rgba(0, 0, 0, .3) transparent transparent';
+            bc = `transparent ${backgroundColor} transparent transparent`;
             break;
 
         case 'br':
             bw = `0 0 ${size}px ${size}px`;
-            bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
+            bc = `transparent transparent ${backgroundColor} transparent`;
             break;
 
         case 'bl':
             bw = `${size}px 0 0 ${size}px`;
-            bc = 'transparent transparent transparent rgba(0, 0, 0, .3)';
+            bc = `transparent transparent transparent ${backgroundColor}`;
             break;
 
         case 'tl':
         default:
             bw = `${size}px ${size}px 0 0`;
-            bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
+            bc = `${backgroundColor} transparent transparent transparent`;
             break;
     }
 

public/sitemap.xml

@@ -26,6 +26,7 @@
     <url><loc>https://csslayout.io/patterns/menu</loc></url>
     <url><loc>https://csslayout.io/patterns/modal</loc></url>
     <url><loc>https://csslayout.io/patterns/notification</loc></url>
+    <url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url>
     <url><loc>https://csslayout.io/patterns/pagination</loc></url>
     <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
     <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>