diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 0e66108bfb..4c0a3d6939 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -10,7 +10,7 @@ require.context('../images/', true); const { localeData } = getLocale(); localeData.forEach(IntlRelativeFormat.__addLocaleData); -function main() { +function loaded() { const locale = document.documentElement.lang; const dateTimeFormat = new Intl.DateTimeFormat(locale, { year: 'numeric', @@ -21,24 +21,30 @@ function main() { }); const relativeFormat = new IntlRelativeFormat(locale); - document.addEventListener('DOMContentLoaded', () => { - [].forEach.call(document.querySelectorAll('.emojify'), (content) => { - content.innerHTML = emojify(content.innerHTML); - }); - - [].forEach.call(document.querySelectorAll('time.formatted'), (content) => { - const datetime = new Date(content.getAttribute('datetime')); - const formattedDate = dateTimeFormat.format(datetime); - content.title = formattedDate; - content.textContent = formattedDate; - }); - - [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { - const datetime = new Date(content.getAttribute('datetime')); - content.textContent = relativeFormat.format(datetime);; - }); + [].forEach.call(document.querySelectorAll('.emojify'), (content) => { + content.innerHTML = emojify(content.innerHTML); }); + [].forEach.call(document.querySelectorAll('time.formatted'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + const formattedDate = dateTimeFormat.format(datetime); + content.title = formattedDate; + content.textContent = formattedDate; + }); + + [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + content.textContent = relativeFormat.format(datetime);; + }); +} + +function main() { + if (['interactive', 'complete'].includes(document.readyState)) { + loaded(); + } else { + document.addEventListener('DOMContentLoaded', loaded); + } + delegate(document, '.video-player video', 'click', ({ target }) => { if (target.paused) { target.play();