Change embedded posts to use web UI (#31766)
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
		
							
								
								
									
										105
									
								
								public/embed.js
									
									
									
									
									
								
							
							
						
						
									
										105
									
								
								public/embed.js
									
									
									
									
									
								
							@@ -1,5 +1,7 @@
 | 
			
		||||
// @ts-check
 | 
			
		||||
 | 
			
		||||
const allowedPrefixes = (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.dataset.allowedPrefixes) ? document.currentScript.dataset.allowedPrefixes.split(' ') : [];
 | 
			
		||||
 | 
			
		||||
(function () {
 | 
			
		||||
  'use strict';
 | 
			
		||||
 | 
			
		||||
@@ -18,45 +20,71 @@
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * @param {Map} map
 | 
			
		||||
   */
 | 
			
		||||
  var generateId = function (map) {
 | 
			
		||||
    var id = 0, failCount = 0, idBuffer = new Uint32Array(1);
 | 
			
		||||
 | 
			
		||||
    while (id === 0 || map.has(id)) {
 | 
			
		||||
      id = crypto.getRandomValues(idBuffer)[0];
 | 
			
		||||
      failCount++;
 | 
			
		||||
 | 
			
		||||
      if (failCount > 100) {
 | 
			
		||||
        // give up and assign (easily guessable) unique number if getRandomValues is broken or no luck
 | 
			
		||||
        id = -(map.size + 1);
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return id;
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  ready(function () {
 | 
			
		||||
    /** @type {Map<number, HTMLIFrameElement>} */
 | 
			
		||||
    var iframes = new Map();
 | 
			
		||||
    /** @type {Map<number, HTMLQuoteElement | HTMLIFrameElement>} */
 | 
			
		||||
    var embeds = new Map();
 | 
			
		||||
 | 
			
		||||
    window.addEventListener('message', function (e) {
 | 
			
		||||
      var data = e.data || {};
 | 
			
		||||
 | 
			
		||||
      if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) {
 | 
			
		||||
      if (typeof data !== 'object' || data.type !== 'setHeight' || !embeds.has(data.id)) {
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      var iframe = iframes.get(data.id);
 | 
			
		||||
      var embed = embeds.get(data.id);
 | 
			
		||||
 | 
			
		||||
      if(!iframe) return;
 | 
			
		||||
 | 
			
		||||
      if ('source' in e && iframe.contentWindow !== e.source) {
 | 
			
		||||
        return;
 | 
			
		||||
      if (embed instanceof HTMLIFrameElement) {
 | 
			
		||||
        embed.height = data.height;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      iframe.height = data.height;
 | 
			
		||||
      if (embed instanceof HTMLQuoteElement) {
 | 
			
		||||
        var iframe = embed.querySelector('iframe');
 | 
			
		||||
 | 
			
		||||
        if (!iframe || ('source' in e && iframe.contentWindow !== e.source)) {
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        iframe.height = data.height;
 | 
			
		||||
 | 
			
		||||
        var placeholder = embed.querySelector('a');
 | 
			
		||||
 | 
			
		||||
        if (!placeholder) return;
 | 
			
		||||
 | 
			
		||||
        embed.removeChild(placeholder);
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // Legacy embeds
 | 
			
		||||
    document.querySelectorAll('iframe.mastodon-embed').forEach(iframe => {
 | 
			
		||||
      // select unique id for each iframe
 | 
			
		||||
      var id = 0, failCount = 0, idBuffer = new Uint32Array(1);
 | 
			
		||||
      while (id === 0 || iframes.has(id)) {
 | 
			
		||||
        id = crypto.getRandomValues(idBuffer)[0];
 | 
			
		||||
        failCount++;
 | 
			
		||||
        if (failCount > 100) {
 | 
			
		||||
          // give up and assign (easily guessable) unique number if getRandomValues is broken or no luck
 | 
			
		||||
          id = -(iframes.size + 1);
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      var id = generateId(embeds);
 | 
			
		||||
 | 
			
		||||
      iframes.set(id, iframe);
 | 
			
		||||
      embeds.set(id, iframe);
 | 
			
		||||
 | 
			
		||||
      iframe.scrolling = 'no';
 | 
			
		||||
      iframe.allow = 'fullscreen';
 | 
			
		||||
      iframe.sandbox = 'allow-scripts allow-same-origin';
 | 
			
		||||
      iframe.style.border = 0;
 | 
			
		||||
      iframe.style.overflow = 'hidden';
 | 
			
		||||
      iframe.style.display = 'block';
 | 
			
		||||
 | 
			
		||||
      iframe.onload = function () {
 | 
			
		||||
        iframe.contentWindow.postMessage({
 | 
			
		||||
@@ -65,7 +93,38 @@
 | 
			
		||||
        }, '*');
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      iframe.onload();
 | 
			
		||||
      iframe.onload(); // In case the script is executing after the iframe has already loaded
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // New generation of embeds
 | 
			
		||||
    document.querySelectorAll('blockquote.mastodon-embed').forEach(container => {
 | 
			
		||||
      var id = generateId(embeds);
 | 
			
		||||
 | 
			
		||||
      embeds.set(id, container);
 | 
			
		||||
 | 
			
		||||
      var iframe = document.createElement('iframe');
 | 
			
		||||
      var embedUrl = new URL(container.getAttribute('data-embed-url'));
 | 
			
		||||
 | 
			
		||||
      if (embedUrl.protocol !== 'https:' && embedUrl.protocol !== 'http:') return;
 | 
			
		||||
      if (allowedPrefixes.every((allowedPrefix) => !embedUrl.toString().startsWith(allowedPrefix))) return;
 | 
			
		||||
 | 
			
		||||
      iframe.src = embedUrl.toString();
 | 
			
		||||
      iframe.width = container.clientWidth;
 | 
			
		||||
      iframe.height = 0;
 | 
			
		||||
      iframe.allow = 'fullscreen';
 | 
			
		||||
      iframe.sandbox = 'allow-scripts allow-same-origin';
 | 
			
		||||
      iframe.style.border = 0;
 | 
			
		||||
      iframe.style.overflow = 'hidden';
 | 
			
		||||
      iframe.style.display = 'block';
 | 
			
		||||
 | 
			
		||||
      iframe.onload = function () {
 | 
			
		||||
        iframe.contentWindow.postMessage({
 | 
			
		||||
          type: 'setHeight',
 | 
			
		||||
          id: id,
 | 
			
		||||
        }, '*');
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      container.appendChild(iframe);
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
})();
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user