about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-09-10 17:58:21 +0200
committerThibG <thib@sitedethib.com>2018-09-10 19:53:55 +0200
commitd9a92d504053568ce424f23667c7dc6121d9b20d (patch)
treedc8d4731e49344db964b0acd9c70e0b0f74d6a70 /app/javascript/flavours/glitch/features
parentbc5009cd45a4fd8fb2178909e1da981e878b879e (diff)
[Glitch] After click to embed video, autoplay it
Port 478ca39e5e8463044a259388459da56d2141e104 to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/features')
-rw-r--r--app/javascript/flavours/glitch/features/status/components/card.js25
1 files changed, 24 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js
index 8a6383471..b52f3c4fa 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.js
+++ b/app/javascript/flavours/glitch/features/status/components/card.js
@@ -30,6 +30,29 @@ const trim = (text, len) => {
   return text.substring(0, cut) + (text.length > len ? '…' : '');
 };
 
+const domParser = new DOMParser();
+
+const addAutoPlay = html => {
+  const document = domParser.parseFromString(html, 'text/html').documentElement;
+  const iframe = document.querySelector('iframe');
+
+  if (iframe) {
+    if (iframe.src.indexOf('?') !== -1) {
+      iframe.src += '&';
+    } else {
+      iframe.src += '?';
+    }
+
+    iframe.src += 'autoplay=1&auto_play=1';
+
+    // DOM parser creates html/body elements around original HTML fragment,
+    // so we need to get innerHTML out of the body and not the entire document
+    return document.querySelector('body').innerHTML;
+  }
+
+  return html;
+};
+
 export default class Card extends React.PureComponent {
 
   static propTypes = {
@@ -92,7 +115,7 @@ export default class Card extends React.PureComponent {
 
   renderVideo () {
     const { card }  = this.props;
-    const content   = { __html: card.get('html') };
+    const content   = { __html: addAutoPlay(card.get('html')) };
     const { width } = this.state;
     const ratio     = card.get('width') / card.get('height');
     const height    = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio);