☰

Share Google Slides controls

Share Google Slides controls, useful for meetings...

  1. // ==UserScript==
  2. // @name         Share Google Slides controls
  3. // @namespace    http://lostinbrittany.dev
  4. // @version      2024-07-15
  5. // @description  Share Google Slides controls, useful for meetings...
  6. // @author       Horacio Gonzalez <horacio.gonzalez@gmail.com>
  7. // @match        https://docs.google.com/presentation/*
  8. // @icon         https://lostinbrittany.org/favicon.ico
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. /*jshint esversion: 11 */
  14.  
  15. (async function() {
  16.     'use strict';
  17.     
  18.     const {html, render} = await import('https://cdn.jsdelivr.net/npm/lit-html@3.1.4/+esm');
  19.  
  20.     // Get the pathname of the current page
  21.     const pathname = window.location.pathname;
  22.  
  23.     const slidedeck = pathname.replace('/presentation/d/','').split('/')[0];
  24.  
  25.     console.log(`Presentation Id: ${slidedeck}`);
  26.  
  27.     let generatedQRCode = await getQRCode();
  28.     showDialog();
  29.  
  30.     async function getQRCode() {
  31.         let resp = await fetch("https://shared-google-slides-control.cleverapps.io/qrcode", {
  32.             method: 'POST',
  33.             headers: {
  34.                 'Content-Type': 'application/json',
  35.             },
  36.             body: JSON.stringify({url:`https://shared-google-slides-control.cleverapps.io/ui/#${slidedeck}`}),
  37.         });
  38.         let generatedQRCode = await resp.text();
  39.         return generatedQRCode;
  40.     }
  41.  
  42.     function showDialog() {
  43.         const dialog = html`<dialog id="shareDialog">
  44.               <form method="dialog">
  45.                 <h1>Remote control URL</h1>
  46.                 <p>
  47.                   <a href="https://shared-google-slides-control.cleverapps.io/ui/#${slidedeck}">
  48.                     https://shared-google-slides-control.cleverapps.io/ui/#${slidedeck}
  49.                   </a>
  50.                 </p>
  51.                 <div style="display:flex;flex-flow:row;justify-content:center;"><img src="${generatedQRCode}"></div>
  52.                 <div style="display:flex;flex-flow:row;justify-content:center;gap:2rem;">
  53.                   <button autofocus id="copyDialog" style="padding:0.5rem;min-width:10rem">Copy</button>
  54.                   <button id="closeDialog" style="padding:0.5rem;min-width:10rem">Close</button>
  55.                 </div>
  56.               </form>
  57.             </dialog>`;
  58.  
  59.         let dialogParent = document.createElement('div');
  60.         document.body.appendChild(dialogParent);
  61.         render(dialog, dialogParent);
  62.         document.getElementById('shareDialog').showModal();
  63.  
  64.         const closeButton = document.getElementById("closeDialog");
  65.         closeButton.addEventListener("click", () => {
  66.             document.getElementById('shareDialog').close();
  67.         });
  68.         const copyButton = document.getElementById("copyDialog");
  69.         copyButton.addEventListener("click", () => {
  70.             console.log(`Link:  https://shared-google-slides-control.cleverapps.io/ui/#${slidedeck}`);
  71.             navigator.clipboard.writeText(`https://shared-google-slides-control.cleverapps.io/ui/#${slidedeck}`);
  72.         });
  73.     }
  74.  
  75.     // Function to send a keyboard event
  76.     function sendKeyboardEvent(key, code, keyCode, element = document.body) {
  77.         const event = new KeyboardEvent('keydown', {
  78.             key: key,
  79.             code: code,
  80.             keyCode: keyCode,
  81.             charCode: keyCode,
  82.             which: keyCode,
  83.             bubbles: true,
  84.             cancelable: true
  85.         });
  86.  
  87.         element.dispatchEvent(event);
  88.         console.log(`Sent keyboard event: ${key}`);
  89.     }
  90.  
  91.  
  92.     // URL of the WebSocket server
  93.     const wsUrl = `wss://shared-google-slides-control.cleverapps.io/websocket/${slidedeck}`;
  94.  
  95.  
  96.     let socket;
  97.     let reconnectInterval = 1000; // Start with a 1 second delay
  98.     const maxReconnectInterval = 30000; // Maximum delay of 30 seconds
  99.  
  100.     function connectWebSocket() {
  101.         socket = new WebSocket(wsUrl);
  102.  
  103.         socket.addEventListener('open', function(event) {
  104.             console.log('WebSocket connection opened:', event);
  105.             reconnectInterval = 1000; // Reset reconnect interval on successful connection
  106.  
  107.  
  108.         });
  109.  
  110.         // Event listener for receiving messages from the server
  111.         socket.addEventListener('message', function (event) {
  112.             console.log('Message from server:', event.data);
  113.  
  114.             switch (event.data) {
  115.                 case 'next':
  116.                     sendKeyboardEvent('ArrowRight', 'ArrowRight', 39);
  117.                     break;
  118.                 case 'previous':
  119.                     sendKeyboardEvent('ArrowLeft', 'ArrowLeft', 37);
  120.                     break;
  121.  
  122.             }
  123.         });
  124.  
  125.         // Event listener for when the connection is closed
  126.         socket.addEventListener('close', function (event) {
  127.             console.log('WebSocket connection closed:', event);
  128.             attemptReconnect();
  129.         });
  130.  
  131.         socket.addEventListener('error', function(event) {
  132.             console.error('WebSocket error:', event);
  133.             socket.close(); // Close the socket on error to trigger the reconnect logic
  134.         });
  135.     }
  136.  
  137.     function attemptReconnect() {
  138.         console.log(`Attempting to reconnect in ${reconnectInterval / 1000} seconds...`);
  139.         setTimeout(function() {
  140.             reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval); // Exponential backoff
  141.             connectWebSocket();
  142.         }, reconnectInterval);
  143.     }
  144.  
  145.     // Initial WebSocket connection
  146.     connectWebSocket();
  147. })();