From 78402eed5132884402a7f7610ec4b7bbb5983003 Mon Sep 17 00:00:00 2001 From: Joe Germuska Date: Wed, 27 Jul 2022 15:29:32 -0500 Subject: [PATCH 1/3] basic implementation of TikTok embeds. It doesn't seem possible to control the height, so the embed overflows, which is annoying. --- src/js/media/MediaType.js | 7 +++++++ src/js/media/types/TikTok.js | 30 ++++++++++++++++++++++++++++++ src/js/media/types/Wistia.js | 4 ++-- src/template/all-media-types.json | 29 +++++++++++++++++++++++------ 4 files changed, 62 insertions(+), 8 deletions(-) create mode 100644 src/js/media/types/TikTok.js diff --git a/src/js/media/MediaType.js b/src/js/media/MediaType.js index 53bc6112c..dec70678a 100644 --- a/src/js/media/MediaType.js +++ b/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", diff --git a/src/js/media/types/TikTok.js b/src/js/media/types/TikTok.js new file mode 100644 index 000000000..fba368053 --- /dev/null +++ b/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(); + } + +} \ No newline at end of file diff --git a/src/js/media/types/Wistia.js b/src/js/media/types/Wistia.js index 34bf70277..645a65ee5 100644 --- a/src/js/media/types/Wistia.js +++ b/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); diff --git a/src/template/all-media-types.json b/src/template/all-media-types.json index 0ff21d91e..32a40600d 100644 --- a/src/template/all-media-types.json +++ b/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, from Wikimedia Commons.", + "credit": "PantheraLeo1359531" }, "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": "@6figga_dilla" + }, + "start_date": { + "year": "1929" + }, + "text": { + "headline": "TikTok", + "text": "Just use the URL to the TikTok video page." + }, + "group": "Social" } + ] } \ No newline at end of file From a87304f1429c5d4917a7b9f34abbc2a06fbd3ad7 Mon Sep 17 00:00:00 2001 From: Joe Germuska Date: Thu, 28 Jul 2022 10:37:20 -0500 Subject: [PATCH 2/3] add note for merged PR --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index df7127bd2..4c23915e0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,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 From 1d761c2631a60a3ab480a451198f66a1fbcf77bc Mon Sep 17 00:00:00 2001 From: Joe Germuska Date: Thu, 28 Jul 2022 14:25:59 -0500 Subject: [PATCH 3/3] document TikTok as an available media type and update CHANGELOG --- CHANGELOG.md | 1 + website/templates/docs/media-types.html | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c23915e0..599cc1635 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/website/templates/docs/media-types.html b/website/templates/docs/media-types.html index b8f35897d..6e0db2145 100644 --- a/website/templates/docs/media-types.html +++ b/website/templates/docs/media-types.html @@ -39,7 +39,7 @@

Media Types

Use the URL for the Google Maps 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.
Instagram
-
Use the URL for the Instagram photo's page.
+
Use the URL for the Instagram photo's page. 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.
Flickr
Use the URL for the Flickr photo's page. The shortened link provided in the share menu (e.g. https://flic.kr/p/sv3VN6) will also work.
@@ -74,6 +74,9 @@

Media Types

Wistia
Use the URL of the Wistia video. You can find this in either the "Social Sharing" or "Embed Code" tab of your video.
+
TikTok
+
Use the URL of the TikTok 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. +