From ebc2bf96acdcd1b666d1f6eefa04a9082cd9d428 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 30 Mar 2022 11:03:35 -0500
Subject: [PATCH] external_video_id: render card html instead of hardcoding the
 provider

---
 app/soapbox/components/status.js                  | 15 +++------------
 .../features/status/components/detailed_status.js | 15 +++------------
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index ef9aafdbe..eafc14922 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -439,8 +439,7 @@ class Status extends ImmutablePureComponent {
       } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);
 
-        const external_id = (video.get('external_video_id'));
-        if (external_id) {
+        if (video.external_video_id) {
           const { mediaWrapperWidth } = this.state;
           const height = mediaWrapperWidth / (video.getIn(['meta', 'original', 'width']) / video.getIn(['meta', 'original', 'height']));
           media = (
@@ -449,16 +448,8 @@ class Status extends ImmutablePureComponent {
                 ref={this.setRef}
                 className='status-card__image status-card-video'
                 style={height ? { height } : {}}
-              >
-                <iframe
-                  src={`https://rumble.com/embed/${external_id}/`}
-                  frameBorder='0'
-                  allowFullScreen
-                  webkitallowfullscreen='true'
-                  mozallowfullscreen='true'
-                  title=''
-                />
-              </div>
+                dangerouslySetInnerHTML={{ __html: status.card.html }}
+              />
             </div>
           );
         } else {
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 0ae645129..5e1cb5407 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -110,8 +110,7 @@ class DetailedStatus extends ImmutablePureComponent {
     if (size > 0) {
       if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);
-        const external_id = (video.get('external_video_id'));
-        if (external_id) {
+        if (video.external_video_id) {
           const { mediaWrapperWidth } = this.state;
           const height = mediaWrapperWidth / (video.getIn(['meta', 'original', 'width']) / video.getIn(['meta', 'original', 'height']));
           media = (
@@ -120,16 +119,8 @@ class DetailedStatus extends ImmutablePureComponent {
                 ref={this.setRef}
                 className='status-card-video'
                 style={{ height }}
-              >
-                <iframe
-                  src={`https://rumble.com/embed/${external_id}/`}
-                  frameborder='0'
-                  allowFullScreen='true'
-                  webkitallowfullscreen='true'
-                  mozallowfullscreen='true'
-                  title='Video'
-                />
-              </div>
+                dangerouslySetInnerHTML={{ __html: status.card.html }}
+              />
             </div>
           );
         } else {