Big Heads for Hangouts

bigHeads.js

'use strict'

window.bigHeads = window.bigHeads || (function(window, document){
  var edgePadding = 10

  function makeRect(top, right, bottom, left) {
    return { top, right, bottom, left, width: (right - left), height: (bottom - top) }
  }

  function ftosMaxChars(f, maxChars) {
    var s = ('' + f)

    if (s.length > maxChars) {
      s = s.substring(0, maxChars)
    }

    return s
  }

  function clearLayout() {
    document.body.style.transformOrigin = ''
    document.body.style.transform = ''
  }

  function doLayout() {
    clearLayout()

    var els, rects, bounds, frame, meRect, scale, translateX;

    els = [].slice.call(document.querySelectorAll('[aria-label="Video call participants"] > [aria-label^="Open menu for"]'))
    rects = els.map(function (el) { return el.getBoundingClientRect() })

    if (rects.length < 3) {
      console.warn('Refusing embiggen heads with less than three participants. Find some more friends!')
      return
    }

    bounds = rects.slice(0, -1).reduce(function (bounds, rect) {
      bounds = (bounds || rect)

      return makeRect(Math.min(bounds.top, rect.top),
                      Math.max(bounds.right, rect.right),
                      Math.max(bounds.bottom, rect.bottom),
                      Math.min(bounds.left, rect.left))
    })

    frame = makeRect(0, window.innerWidth, window.innerHeight, 0)

    meRect = rects[rects.length - 1]

    // Aspect-fit the width
    scale = (frame.width - edgePadding - edgePadding) / bounds.width
    translateX = Math.round(frame.right - meRect.left - edgePadding/scale)

    document.body.style.transformOrigin = '100% 100%'
    document.body.style.transform = 'scale(' + ftosMaxChars(scale) + ') translateX(' + translateX + 'px)'
  }

  // --- Resize handler

  var resizeTimeout

  function resizeHandler() {
    if (resizeTimeout) return

    resizeTimeout = setTimeout(function () {
      resizeTimeout = null
      doLayout()
    }, 100)
  }

  // --- Main Entrypoint

  function bigHeads(on) {
    on = (on !== false)

    window.removeEventListener('resize', resizeHandler)
    resizeTimeout = clearTimeout(resizeTimeout)

    if (on) {
      doLayout()
      window.addEventListener('resize', resizeHandler)
    } else {
      clearLayout()
    }

    console.log('Heads are now ' + (on ? 'BIG' : 'little'))
  }

  // --- Keyboard Entrypoint

  window.addEventListener('keyup', function (event) {
    if (event.target !== document.body) {
      return
    }

    switch (event.key || event.keyIdentifier) {
      case '-':
      case 'U+002D':
        bigHeads(false)
        break
      case '+':
      case 'U+002B':
        bigHeads(true)
        break
    }
  })

  // --- Exports

  return bigHeads
})(window, window.document)