From 933d82e7c93fd4b1f9c727beffe523eda9b8f2b8 Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Thu, 16 Jul 2020 13:59:09 -0400
Subject: [PATCH] use padding-bottom trick to make giphy mp4s responsive
 (#3024)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../client/stream/common/Media/GiphyMedia.css | 15 ++++++++
 .../client/stream/common/Media/GiphyMedia.tsx | 38 +++++++++++++++----
 2 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 src/core/client/stream/common/Media/GiphyMedia.css

diff --git a/src/core/client/stream/common/Media/GiphyMedia.css b/src/core/client/stream/common/Media/GiphyMedia.css
new file mode 100644
index 000000000..dd1520932
--- /dev/null
+++ b/src/core/client/stream/common/Media/GiphyMedia.css
@@ -0,0 +1,15 @@
+.responsiveVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.responsiveContainer {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
diff --git a/src/core/client/stream/common/Media/GiphyMedia.tsx b/src/core/client/stream/common/Media/GiphyMedia.tsx
index f2bbf93fa..40e47ef2c 100644
--- a/src/core/client/stream/common/Media/GiphyMedia.tsx
+++ b/src/core/client/stream/common/Media/GiphyMedia.tsx
@@ -1,5 +1,8 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
+import styles from "./GiphyMedia.css";
+
 interface Props {
   url: string;
   width?: number | null;
@@ -8,6 +11,10 @@ interface Props {
   title?: string | null;
 }
 
+function calculateBottomPadding(width: number, height: number) {
+  return `${(height / width) * 100}%`;
+}
+
 const GiphyMedia: FunctionComponent<Props> = ({
   url,
   title,
@@ -15,15 +22,30 @@ const GiphyMedia: FunctionComponent<Props> = ({
   width,
   height,
 }) => {
+  const paddingBottom =
+    width && height ? calculateBottomPadding(width, height) : null;
   return video ? (
-    <video
-      width={width || undefined}
-      height={height || undefined}
-      autoPlay
-      loop
-    >
-      <source src={video} type="video/mp4" />
-    </video>
+    <div style={{ maxWidth: `${width}px` }}>
+      <div
+        className={cn({
+          [styles.responsiveContainer]: paddingBottom,
+        })}
+        style={paddingBottom ? { paddingBottom, maxWidth: `${width}px` } : {}}
+      >
+        <video
+          className={cn({
+            [styles.responsiveVideo]: paddingBottom,
+          })}
+          width={width || undefined}
+          height={height || undefined}
+          autoPlay
+          loop
+          playsInline
+        >
+          <source src={video} type="video/mp4" />
+        </video>
+      </div>
+    </div>
   ) : (
     <img src={url} alt={title || ""} />
   );