diff --git a/CHANGELOG.md b/CHANGELOG.md
index df7127bd2..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
@@ -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
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
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 @@
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 @@
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.
+