Subtitles Forum AFUP 2022

README.md

To use this :

1. Create a new Bookmark in your browser.
2. Name it how you want
3. Paste the Bookmarklet code inside the URL field
4. Click on the bookmark in the page you want to show the subtitles

This should work on HTML presentations, Google slides and PDFs in Chrome in presenter mode.

I guess it will only be reliable on a screen with a 16/9 ratio.

Bookmarklet code

javascript:(function()%7Bfunction%20addSubtitles(node)%20%7B%0A%20%20const%20p%20%3D%20document.createElement('p')%3B%0A%0A%20%20const%20text%20%3D%20document.createTextNode('Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Etiam%20auctor%20mauris%20vitae%20metus%20bibendum%2C%20sed%20aliquet%20est%20condimentum.')%3B%0A%0A%20%20p.appendChild(text)%3B%0A%0A%20%20p.style%20%3D%20'position%3A%20absolute%20!important%3B%20height%3A%2019vh%20!important%3B%20bottom%3A%200px%20!important%3B%20font-size%3A%2040px%20!important%3B%20color%3A%20white%20!important%3B%20background%3A%20rgba(51%2C%2051%2C%2051%2C%200.7)%20!important%3B%20text-align%3A%20center%20!important%3B%20margin%3A%200px%20!important%3B%20padding%3A%2010px%2030px%20!important%3B%20z-index%3A%202147483647%20!important%3B'%0A%0A%20%20node.appendChild(p)%3B%0A%7D%0A%0AaddSubtitles(document.body)%3B%0A%0Avar%20observer%20%3D%20new%20MutationObserver(function%20(mutations)%20%7B%0A%20%20mutations.forEach(function%20(mutation)%20%7B%0A%20%20%20%20mutation.addedNodes.forEach(function%20(addedNode)%20%7B%0A%20%20%20%20%20%20if%20(addedNode.classList.contains('punch-full-screen-element'))%20%7B%0A%20%20%20%20%20%20%20%20addSubtitles(addedNode)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%7D)%3B%0A%7D)%3B%0A%0Aobserver.observe(document.body%2C%20%7BchildList%3A%20true%2C%20subtree%3A%20true%7D)%3B%7D)()%3B

source.js

// The bookmarklet above is this code converted using https://caiorss.github.io/bookmarklet-maker/
function addSubtitles(node) {
  const p = document.createElement('p');

  const text = document.createTextNode('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor mauris vitae metus bibendum, sed aliquet est condimentum.');

  p.appendChild(text);

  p.style = 'position: absolute !important; height: 19vh !important; bottom: 0px !important; font-size: 40px !important; color: white !important; background: rgba(51, 51, 51, 0.7) !important; text-align: center !important; margin: 0px !important; padding: 10px 30px !important; z-index: 2147483647 !important;'

  node.appendChild(p);
}

addSubtitles(document.body);

// To work in Google Slides full-screen mode
const observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    mutation.addedNodes.forEach(function (addedNode) {
      if (addedNode.classList.contains('punch-full-screen-element')) {
        addSubtitles(addedNode);
      }
    });
  });
});

observer.observe(document.body, {childList: true, subtree: true});