Automatically loop and play Twitter animated gifs without video controls

This commit is contained in:
Maurice Parker 2020-10-30 16:43:32 -05:00
parent 198a5c29bf
commit 5338cd88fe
2 changed files with 21 additions and 2 deletions

View File

@ -36,8 +36,10 @@ struct TwitterExtendedMedia: Codable {
switch type {
case "photo":
html += renderPhotoAsHTML()
case "video", "animated_gif":
case "video":
html += renderVideoAsHTML()
case "animated_gif":
html += renderAnimatedGIFAsHTML()
default:
break
}
@ -74,6 +76,21 @@ private extension TwitterExtendedMedia {
return html
}
func renderAnimatedGIFAsHTML() -> String {
guard let bestVariantURL = findBestVariant()?.url else { return "" }
var html = "<video class=\"nnwAnimatedGIF\" "
if let httpsMediaURL = httpsMediaURL {
html += "poster=\"\(httpsMediaURL)\" "
} else if let mediaURL = mediaURL {
html += "poster=\"\(mediaURL)\" "
}
html += "src=\"\(bestVariantURL)\" autoplay muted loop></video>"
return html
}
func findBestVariant() -> TwitterVideo.Variant? {
var best: TwitterVideo.Variant? = nil
if let variants = video?.variants {

View File

@ -53,7 +53,9 @@ function wrapTables() {
function inlineVideos() {
document.querySelectorAll("video").forEach(element => {
element.setAttribute("playsinline", true)
if !element.classList.contains("nnwAnimatedGIF") {
element.setAttribute("controls", true)
}
});
}