diff --git a/resources/js/turbolinks.js b/resources/js/turbolinks.js index f6feb0ae9..71a8c1ae7 100644 --- a/resources/js/turbolinks.js +++ b/resources/js/turbolinks.js @@ -8,3 +8,48 @@ document.addEventListener('turbo:before-visit', function (e) { Turbo?.navigator?.history?.replace(window.location) } }) + +document.addEventListener('vue:loaded', (e) => { + // https://github.com/vuejs/core/issues/6154 + // This ensures the `v-bind:muted.attr` attribute is set before vue mounts + // This way you will only need to add `muted` to the video element + let videos = document.querySelectorAll('video[muted]') + for (let i = 0; i < videos.length; i++) { + videos[i].setAttribute('v-bind:muted.attr', true) + } +}) + +document.addEventListener('turbo:before-render', (event) => { + // https://github.com/hotwired/turbo-rails/issues/147 + // Before storing in cache we disable autoplay, but add autoplay it to the dataset. + // This way it will not keep playing after navigating away + let videos = document.querySelectorAll('video[autoplay]') + for (let i = 0; i < videos.length; i++) { + videos[i].autoplay = false + videos[i].dataset.autoplay = true + } + + // https://github.com/vuejs/core/issues/6154 + // Before storing in cache re-add the attribute since Vue removes it + // upon mounting + videos = document.querySelectorAll('video[muted]') + for (let i = 0; i < videos.length; i++) { + videos[i].setAttribute('v-bind:muted.attr', true) + } +}) + +document.addEventListener('turbo:load', (event) => { + // https://github.com/hotwired/turbo-rails/issues/147 + // On load from cache re-enable autoplay and remove the dataset attribute + let videos = document.querySelectorAll('video[data-autoplay]') + for (let i = 0; i < videos.length; i++) { + videos[i].autoplay = true + delete videos[i].dataset.autoplay + } + + videos = document.querySelectorAll('video[muted],video[dataset-muted]') + for (let i = 0; i < videos.length; i++) { + videos[i].setAttribute('v-bind:muted.attr', true) + delete videos[i].dataset.muted + } +})