From 9858514bb4605070096637e87a8109bceb0d6d85 Mon Sep 17 00:00:00 2001
From: David Palmer <david.palmer@adscale.co.nz>
Date: Wed, 21 Jun 2023 16:15:02 +1200
Subject: [PATCH 1/4] wrap video embeds in the ratio container

This should correctly size the embedded video iframe to the full
available width, which looks better and is compatible with mobile
devices.

Also add the "allowfullscreen" modifier to the iframe so that the video
can be expanded to the browser's fullscreen mode.

Also add the post.embed_title as the iframe "title" attribute.
---
 src/shared/components/post/metadata-card.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index e6a864af..3c6f6bbb 100644
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -75,10 +75,14 @@ export class MetadataCard extends Component<
           </div>
         )}
         {this.state.expanded && post.embed_video_url && (
-          <iframe
-            className="post-metadata-iframe"
-            src={post.embed_video_url}
-          ></iframe>
+          <div className="ratio ratio-16x9">
+            <iframe
+              allowFullScreen
+              className="post-metadata-iframe"
+              src={post.embed_video_url}
+              title={post.embed_title}
+            ></iframe>
+          </div>
         )}
       </>
     );

From c16c00db0dffbe9503c3c61cb8067614f8424549 Mon Sep 17 00:00:00 2001
From: David Palmer <david.palmer@adscale.co.nz>
Date: Wed, 21 Jun 2023 16:28:27 +1200
Subject: [PATCH 2/4] add a prefix to hint to screenreaders what this iframe is

---
 src/shared/components/post/metadata-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index 3c6f6bbb..80ce173b 100644
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -80,7 +80,7 @@ export class MetadataCard extends Component<
               allowFullScreen
               className="post-metadata-iframe"
               src={post.embed_video_url}
-              title={post.embed_title}
+              title={"Embedded Video: " + post.embed_title}
             ></iframe>
           </div>
         )}

From f7df8314990b3f0152993eac42d125a65b54552b Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Wed, 21 Jun 2023 19:48:43 -0400
Subject: [PATCH 3/4] v0.18.0-rc.5

---
 package.json | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9a285463..1055d853 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0-rc.4",
+  "version": "0.18.0-rc.5",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
@@ -22,9 +22,16 @@
     "translations:update": "git submodule update --remote --recursive"
   },
   "lint-staged": {
-    "*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
-    "*.{css, scss}": ["prettier --write"],
-    "package.json": ["sortpack"]
+    "*.{ts,tsx,js}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{css, scss}": [
+      "prettier --write"
+    ],
+    "package.json": [
+      "sortpack"
+    ]
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.21.0",

From 924e6706993c5d291aa9f269ad933d83da4a4147 Mon Sep 17 00:00:00 2001
From: David Palmer <david.palmer@adscale.co.nz>
Date: Thu, 22 Jun 2023 12:23:36 +1200
Subject: [PATCH 4/4] remove embed prefix until a translation can be added

---
 src/shared/components/post/metadata-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index 0b28b28f..bc6576a4 100644
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -80,7 +80,7 @@ export class MetadataCard extends Component<
               allowFullScreen
               className="post-metadata-iframe"
               src={post.embed_video_url}
-              title={"Embedded Video: " + post.embed_title}
+              title={post.embed_title}
             ></iframe>
           </div>
         )}