From 03adde1d21ff211a8ba2e4ece7d92660e9226c3f Mon Sep 17 00:00:00 2001
From: Piotr Kumorek <piotr.kumorek@netguru.co>
Date: Tue, 29 Oct 2019 00:04:47 +0100
Subject: [PATCH] fix(www): Eliminate horizontal scroll on mobile devices
 (#18892)

* fix(www): Make egghead iframe videos responsive (eliminate horizontal scroll on mobile)

* fix: Eliminate linter/prettier errors

* refactor: wrap useCallback around settIframeWidth function

* fix: use VIDEO_RATIO variable instead of magic number

* Update www/src/components/shared/egghead-embed.js

Co-Authored-By: Sidhartha Chatterjee <me@sidharthachatterjee.com>

* chore: format
---
 www/src/components/shared/egghead-embed.js | 62 +++++++++++++++-------
 www/src/utils/styles/global.js             |  1 +
 2 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/www/src/components/shared/egghead-embed.js b/www/src/components/shared/egghead-embed.js
index d8a3b8f10af2a..f6da0d9509f04 100644
--- a/www/src/components/shared/egghead-embed.js
+++ b/www/src/components/shared/egghead-embed.js
@@ -1,25 +1,47 @@
-import React, { Fragment } from "react"
+import React, { useRef, useState, useCallback, useLayoutEffect } from "react"
 import PropTypes from "prop-types"
 
-const EggheadEmbed = ({ lessonLink, lessonTitle }) => (
-  <Fragment>
-    <iframe
-      className="egghead-video"
-      width={600}
-      height={348}
-      src={`${lessonLink}/embed`}
-      title={`Video: ${lessonTitle}`}
-      allowFullScreen
-    />
-
-    <p>
-      <em>
-        Video hosted on <a href={lessonLink}>egghead.io</a>
-      </em>
-      .
-    </p>
-  </Fragment>
-)
+const VIDEO_RATIO = 9 / 16
+
+const EggheadEmbed = ({ lessonLink, lessonTitle }) => {
+  const [iframeWidth, setIframeWidth] = useState(0)
+  const iframeRef = useRef()
+
+  const handleResize = useCallback(
+    () => setIframeWidth(iframeRef.current.clientWidth),
+    [iframeRef.current]
+  )
+
+  useLayoutEffect(() => {
+    handleResize()
+    window.addEventListener(`resize`, handleResize)
+
+    return () => {
+      window.removeEventListener(`resize`, handleResize)
+    }
+  }, [iframeRef.current])
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        className="egghead-video"
+        width={600}
+        height={iframeWidth * VIDEO_RATIO}
+        src={`${lessonLink}/embed`}
+        title={`Video: ${lessonTitle}`}
+        allowFullScreen
+      />
+
+      <p>
+        <em>
+          Video hosted on <a href={lessonLink}>egghead.io</a>
+        </em>
+        .
+      </p>
+    </>
+  )
+}
 
 EggheadEmbed.propTypes = {
   lessonLink: PropTypes.string.isRequired,
diff --git a/www/src/utils/styles/global.js b/www/src/utils/styles/global.js
index 01b2dbe9c0b7d..1c679dc4527f5 100644
--- a/www/src/utils/styles/global.js
+++ b/www/src/utils/styles/global.js
@@ -339,6 +339,7 @@ export const globalStyles = t => {
     },
     ".egghead-video": {
       border: `none`,
+      "max-width": `100%`,
     },
     // Fancy external links in posts, borrowed from
     // https://github.com/comfusion/after-dark/