video fixes

Author: edeetee

src/components/css/main/index.module.css

@@ -28,7 +28,7 @@
 }
 
 .content {
-    max-width: 1000px;
+    max-width: 1200px;
     width: 100%;
     justify-self: "center";
     flex-grow: 1;

src/components/css/main/index.tsx

@@ -95,7 +95,7 @@ export const Main: React.FC = () => {
 
             <Expandable expanded={showContent}>
                 <div ref={contentRef} className={styles.content}>
-                    <div style={{ margin: '5vh 4vw', padding: '5vh 0' }}>{selectedPage?.page}</div>
+                    <div style={{ margin: '32px 24px', padding: '32px 0' }}>{selectedPage?.page}</div>
                 </div>
             </Expandable>
 

src/lib/Portfolio.tsx

@@ -36,7 +36,7 @@ const titleStyle: CSSProperties = {
 export const RenderPortfolioItem: React.FC<{ item: PortfolioItem }> = ({ item }) => {
     const [expanded, setExpanded] = useState(false);
 
-    const media = item.images?.map((image, i) => <div key={i} style={{ width: 'auto', height: '100%', justifySelf: 'end' }} >{image}</div>)
+    const media = item.images?.map((image, i) => <div key={i} style={{ width: '100%', height: '100%', justifySelf: 'end' }} >{image}</div>)
 
     const yearStr = item.date.getFullYear().toString().substring(2);
 
@@ -67,8 +67,8 @@ export const RenderPortfolioItem: React.FC<{ item: PortfolioItem }> = ({ item })
         </a> : header}
 
         <div style={{ display: 'flex', flexDirection: 'column' }}>{item.content}</div>
-        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
-            {media?.map((m, i) => <div key={i} style={{ width: expanded ? '90%' : '30%', minWidth: 128, aspectRatio: expanded ? 'initial' : '1', margin: 8 }}>{m}</div>)}
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'start', flexWrap: 'wrap' }}>
+            {media?.map((m, i) => <div key={i} style={{ width: expanded ? '45%' : 256, minWidth: 128, aspectRatio: expanded ? 'initial' : '1', margin: 8 }}>{m}</div>)}
         </div>
     </div>
 }

src/lib/Video.tsx

@@ -20,7 +20,13 @@ export const Video = ({ style, src, muted, onExitFullscreen, ...props }: VideoPr
 
     const [fullscreen, setFullscreen] = useState(onExitFullscreen != undefined);
 
+    const isBgVideo = onExitFullscreen == null && fullscreen;
+
     function setPlaying(isPlaying: boolean) {
+        if (isBgVideo && isPlaying) {
+            setPlaying(false)
+            return;
+        }
         if (!isPlaying) {
             setShowMutedIcon(true)
             if (videoRef.current != null)
@@ -37,7 +43,7 @@ export const Video = ({ style, src, muted, onExitFullscreen, ...props }: VideoPr
 
     return <MediaContainer style={{ ...style }}
     >
-        <a href={src} role='button' aria-label='video' style={{ position: 'relative', display: 'flex', width: '100%', height: '100%' }}
+        <div role='button' aria-label='video' style={{ cursor: 'pointer', position: 'relative', display: 'flex', width: '100%', height: '100%' }}
             onMouseOver={
                 (e) => {
                     e.preventDefault()
@@ -76,9 +82,10 @@ export const Video = ({ style, src, muted, onExitFullscreen, ...props }: VideoPr
                 play_circle
             </span>}
 
-            <a onClick={(e) => {
+            <div onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
+                setPlaying(false);
                 return onExitFullscreen != null ? onExitFullscreen() : setFullscreen(true);
             }}>
                 <span className="material-symbols-outlined" style={{
@@ -91,16 +98,16 @@ export const Video = ({ style, src, muted, onExitFullscreen, ...props }: VideoPr
                     // cursor: 'zoom-in'
                     // transform: 'translate(-50%, -50%)'
                 }}>fullscreen</span>
-            </a>
+            </div>
 
-            <video muted autoPlay={isPlaying} loop ref={videoRef} src={src} style={{ width: '100%', height: '100%', objectFit: "cover" }} {...props} > </video>
+            <video muted autoPlay={isPlaying} loop ref={videoRef} src={src} style={{ width: '100%', height: '100%' }} {...props} > </video>
 
             {onExitFullscreen == null && <ReactModal isOpen={fullscreen} onRequestClose={() => setFullscreen(false)} style={{
                 overlay: { backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 1000 },
             }}>
-                <Video onExitFullscreen={() => setFullscreen(false)} src={src} muted={muted} />
+                <Video onExitFullscreen={() => setFullscreen(false)} src={src} style={{ objectFit: 'inherit', margin: 0 }} muted={muted} />
             </ReactModal>}
 
-        </a>
+        </div>
     </MediaContainer>
 }

src/lib/Youtube.tsx

@@ -1,12 +1,12 @@
 import { CSSProperties } from "react"
 import { MediaContainer } from "./MediaContainer"
 
-interface YoutubeParams{
+interface YoutubeParams {
     style?: CSSProperties,
     embedId: string
 }
 
-export const Youtube = ({embedId, style}: YoutubeParams) => 
+export const Youtube = ({ embedId, style }: YoutubeParams) =>
     <MediaContainer style={{
         position: "relative",
         aspectRatio: '16/9',