Play-pause gifs

pausable-gifs.js

javascript: (
  function () {
    /* Inspired by https://codepen.io/hoanghals/pen/dZrWLZ */
    /* Uses: https://github.com/buzzfeed/libgif-js */
    console.log('Start');
    const PAUSED_CLASS = 'paused';
    const GIF_CONTROL_CLASS = `gif-control`;

    const run = () => {
      console.log('Run');
      [ ...document.querySelectorAll('img[src*=gif]') ]
        .forEach((imgNode, index) => {
          const src = imgNode.src;
          try {
            const url = new URL(src);
            const segments = url.pathname.split('/');
            const fileName = segments.pop() || segments.pop(); /* If trailing /, first pop yields '' */
            if (fileName.endsWith('.gif')) {
              imgNode.classList.toggle('gif', true);
              const superGif = new SuperGif({
                gif: imgNode,
                progressbar_height: 0,
                auto_play: false,
              });

              const controlNode = document.createElement('div');
              controlNode.className = `${GIF_CONTROL_CLASS} gif-${index}`;

              superGif.load((function onLoad (controller) {
                controller.classList.toggle(PAUSED_CLASS, true);
                controller.addEventListener('click', function onClick () {
                  console.log('Clicked');
                  if (controller.classList.contains(PAUSED_CLASS)) {
                    this.play();
                    controller.classList.toggle(PAUSED_CLASS, false);
                  } else {
                    this.pause();
                    controller.classList.toggle(PAUSED_CLASS, true);
                  }
                }.bind(this, controller));

              }.bind(superGif))(controlNode));

              const canvas = superGif.get_canvas();
              controlNode.style.width = canvas.width + 'px';
              controlNode.style.height = canvas.height + 'px';
              controlNode.style.left = canvas.offsetLeft + 'px';
              const containerElement = canvas.parentNode;
              containerElement.appendChild(controlNode);
            }
          } catch (error) {
            console.error('Pausing gifs failed', error);
          }
        });
    };

    console.log('Load');
    const scriptNode = document.createElement('script');
    scriptNode.onload = run;
    scriptNode.classList.toggle('gif-control-script', true);
    scriptNode.src = 'https://cdn.jsdelivr.net/npm/libgif@0.0.3/libgif.min.js';
    document.body.appendChild(scriptNode);

    const style = `
      img.gif { visibility: hidden; } 
      
      .jsgif { position: relative; }
      
      .gif-control {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        
        &:after {
          position: absolute;
          content: '';
          display: block;
          left: calc(50% - 25px);
          top: calc(50% - 25px);
        }
      
        &.paused {
          &:after {
            content: '⏸';
            font-size: 50px;
            width: 50px;
            height: 50px;
            /*color: #f90;*/
            transition: opacity 0.25s ease-in-out;
            box-sizing: border-box;
            opacity: 1;
          }
        }
      
        transition: background 0.25s ease-in-out;
        z-index: 100;
      }
    `;
    const styleNode = document.createElement('style');
    styleNode.classList.toggle('gif-control-style', true);
    styleNode.innerHTML = style;
    document.head.appendChild(styleNode);
  }
)();