From f8393137b38bb6e361f3003b6c735755da0edadf Mon Sep 17 00:00:00 2001 From: Justin Coyne Date: Thu, 2 Nov 2023 11:58:55 -0500 Subject: [PATCH] Transform audio nodes to video nodes on Safari This should allow Safari to support captions for audio --- .../src/controllers/media_tag_controller.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/app/javascript/src/controllers/media_tag_controller.js b/app/javascript/src/controllers/media_tag_controller.js index f74e4cdca..4209e775a 100644 --- a/app/javascript/src/controllers/media_tag_controller.js +++ b/app/javascript/src/controllers/media_tag_controller.js @@ -47,12 +47,31 @@ export default class extends Controller { } initializeVideoJSPlayer() { + this.transformAudioToVideoForSafari() this.mediaTagTargets.forEach((mediaTag) => { mediaTag.classList.add('video-js', 'vjs-default-skin') videojs(mediaTag.id).removeChild('textTrackSettings') }) } + // Safari 16.6 and below don't render vtt tracks for audio, so change those to be video elements. + transformAudioToVideoForSafari() { + if (!navigator.userAgent.match(/Safari/i)) + return + if (![...this.mediaTagTargets].some((mediaTag) => mediaTag.nodeName === "AUDIO" && mediaTag.querySelector('track'))) + return + + this.mediaTagTargets.forEach((audioTag) => { + if (audioTag.nodeName !== "AUDIO") + return + const videoTag = document.createElement('video'); + [...audioTag.attributes].forEach( attr => videoTag.setAttribute(attr.nodeName, attr.nodeValue)) + audioTag.childNodes.forEach(child => videoTag.appendChild(child)) + audioTag.parentNode.replaceChild(videoTag, audioTag); + }) + + } + setupThumbnails() { const thumbnails = [...this.element.querySelectorAll('[data-slider-object]')]. map((mediaDiv, index) => buildThumbnail(mediaDiv.dataset, index))