Basic implementation of TikTok embeds

CHANGELOG.md

@@ -1,5 +1,6 @@
 3.8.22 (Not yet released)
 -------------------------
+* #782 Support TikTok embeds
 * A bounty of accessibility improvements contributed by @OleksandrDanylchenko:
     * #744 Contrast improvements
     * #747 Reading order improvements for better screen reader experience
@@ -12,6 +13,7 @@
     * #766 Improved keyboard navigation of Timeline navigation element
     * #768 Accessibility improvements for TimeMarkers
     * #770 Add state-based aria labels to zoom in/out to explain their effects
+    * #783 rendering fix for media-only slides
 
 
 

src/js/media/MediaType.js

@@ -33,6 +33,7 @@ import PDF from "./types/PDF"
 import Audio from "./types/Audio"
 import Video from "./types/Video"
 import Wistia from "./types/Wistia"
+import TikTok from "./types/TikTok"
 
 /**
  * Given a JavaScript Object for an event from a TimelineConfig,
@@ -199,6 +200,12 @@ export function lookupMediaType(m, image_only) {
                 match_str: /(mp3|wav|m4a)(\?.*)?$/i,
                 cls: Audio
             },
+            {
+                type: "tiktok",
+                name: "TikTok",
+                match_str: /https:\/\/www.tiktok.com\/@\S+?\/video\//,
+                cls: TikTok
+            },
             {
                 type: "imageblank",
                 name: "Imageblank",

src/js/media/types/TikTok.js

@@ -0,0 +1,30 @@
+import { Media } from "../Media";
+import { getJSON } from "../../net/Net";
+import { loadJS } from "../../core/Load";
+
+export default class TikTok extends Media {
+    _loadMedia() {
+
+        this._el.content_item = this.domCreate("div", "tl-media-item tl-media-iframe tl-media-tiktok tl-media-shadow", this._el.content);
+        this.media_id = this.data.url
+        let api_url = `https://www.tiktok.com/oembed?url=${this.media_id}`
+
+        // oembed includes script tag which won't be loaded 
+        // when innerHTML is set. If that tag URL changes
+        // this will need updating
+        let self = this
+        getJSON(api_url, function(d) {
+            loadJS("https://www.tiktok.com/embed.js", function() {
+                self.createMedia(d);
+            });
+        });
+    }
+
+    createMedia(d) {
+        this._el.content_item.innerHTML = d.html;
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+}

src/js/media/types/Wistia.js

@@ -12,8 +12,8 @@ export default class Wistia extends Media {
 
         // Get Media ID
         this.media_id = this.data.url.split(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/medias\/(.*)/)[3];
-        trace(`Wistia: media_id: ${this.media_id}`)
-            // API URL
+
+        // API URL
         api_url = "https://fast.wistia.com/embed/iframe/" + this.media_id + "?version=v1&controlsVisibleOnLoad=true&playerColor=aae3d8";
 
         this.player = this.domCreate("iframe", "", this._el.content_item);

src/template/all-media-types.json

@@ -96,7 +96,8 @@
             "text": {
                 "headline": "Twitter",
                 "text": "To display a Tweet, just copy the URL in the embed code."
-            }
+            },
+            "group": "Social"
         },
         {
             "media": {
@@ -444,7 +445,7 @@
         {
             "media": {
                 "url": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
-                "credit": "file-examples.com"
+                "credit": "w3.org"
             },
             "start_date": {
                 "year": "1926"
@@ -470,8 +471,8 @@
         },
         {
             "media": {
-                "url": "https://file-examples.com/storage/fef12739526267ac9a2b543/2017/04/file_example_MP4_480_1_5MG.mp4",
-                "credit": "file-examples.com"
+                "url": "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4",
+                "credit": "test-videos.co.uk"
             },
             "start_date": {
                 "year": "1927",
@@ -485,8 +486,9 @@
         },
         {
             "media": {
-                "url": "https://file-examples.com/storage/fef12739526267ac9a2b543/2020/03/file_example_WEBM_480_900KB.webm",
-                "credit": "file-examples.com"
+                "url": "https://upload.wikimedia.org/wikipedia/commons/d/d6/Mandelbrotzoom_20191023.webm",
+                "caption": "A video illustrating the depth of the Mandelbrot set, <a href='https://commons.wikimedia.org/wiki/File:Mandelbrotzoom_20191023.webm'>from Wikimedia Commons</a>.",
+                "credit": "<a href='https://commons.wikimedia.org/wiki/User:PantheraLeo1359531'>PantheraLeo1359531</a>"
             },
             "start_date": {
                 "year": "1927",
@@ -511,7 +513,22 @@
                 "text": "Wistia is a commercial video hosting service. I don't even remember who requested that TimelineJS support it, and it's hard to find a suitable test URL, but ... "
             },
             "group": "Video"
+        },
+        {
+            "media": {
+                "url": "https://www.tiktok.com/@6figga_dilla/video/7105763249877978411?is_copy_url=1&is_from_webapp=v1&lang=en",
+                "credit": "<a href='https://www.tiktok.com/@6figga_dilla'>@6figga_dilla</a>"
+            },
+            "start_date": {
+                "year": "1929"
+            },
+            "text": {
+                "headline": "TikTok",
+                "text": "Just use the URL to the TikTok video page."
+            },
+            "group": "Social"
         }
 
+
     ]
 }

website/templates/docs/media-types.html

@@ -39,7 +39,7 @@ <h2 class="header-story" id="media-types">Media Types</h2>
           <dd>Use the URL for the <a href="http://google.com/maps">Google Maps</a> page (unless you are using Streetview, which currently requires the embed URL found in the "Share" section). Coordinates, search results, place marks and directions are all honored by Timeline. TimelineJS supports roadmap, hybrid, satellite and terrain Google Maps, as well as directions, places, and Streetview maps.</dd>
 
           <dt id='media-type-instagram'>Instagram</dt>
-          <dd>Use the URL for the <a href="http://www.instagram.com">Instagram</a> photo's page.</dd>
+          <dd><s>Use the URL for the <a href="http://www.instagram.com">Instagram</a> photo's page.</s> Because of changes to Instagram's API terms, Timeline's ability to embed Instagram posts no longer works. We have been unable to satisfy Meta's requirements to get access to use the new API. We do not know if or when we'll be able to restore Instagram embeds to timeline.</dd>
 
           <dt id='media-type-flickr'>Flickr</dt>
           <dd>Use the URL for the <a href="http://www.flickr.com">Flickr</a> photo's page. The shortened link  provided in the share menu  (e.g. <code>https://flic.kr/p/sv3VN6</code>) will also work.</dd>
@@ -74,6 +74,9 @@ <h2 class="header-story" id="media-types">Media Types</h2>
           <dt id="media-type-wistia">Wistia</dt>
           <dd>Use the URL of the <a href="https://wistia.com">Wistia</a> video. You can find this in either the "Social Sharing" or "Embed Code" tab of your video.</dd>
 
+          <dt id="media-type-tiktok">TikTok</dt>
+          <dd>Use the URL of the <a href="https://tiktok.com">TikTok</a> video. You can get this with "copy link" from the sharing menu. Note: TikTok embeds have a fixed height of 740 pixels, which means that in a default timeline configuration, they overflow the slide area. You can, of course, set the height of your timeline to be more than that, or you can let your users scroll or use the TikTok full-screen feature. 
+
         </dl>
       </div>
     </div>