☰

Automated Modules Customization

Automatically apply customizations to Canvas modules: check 'mark done' checkbox before navigating to the next video in Canvas; reduce the size of large images; increase the size of Kaltura video player.

  1. // ==UserScript==
  2. // @name         Automated Modules Customization
  3. // @version      1.0.1
  4. // @namespace    http://tampermonkey.net/
  5. // @description  Automatically apply customizations to Canvas modules: check 'mark done' checkbox before navigating to the next video in Canvas; reduce the size of large images; increase the size of Kaltura video player.
  6. // @author       Kyle Nakamura
  7. // @match        https://gatech.instructure.com/courses/*/pages/*
  8. // @icon         https://www.google.com/s2/favicons?domain=instructure.com
  9. // ==/UserScript==
  10.  
  11. // Quick note about delays (timeouts):
  12. // Canvas loads the video player and images last, so customizations to
  13. // those elements must be delayed. You can adjust the delay if your elements
  14. // seem to load slower or faster than the pre-set 1.5 seconds.
  15. (() => {
  16.     'use strict';
  17.  
  18.     // Enable auto-checkbox toggle with a delay of 500ms
  19.     setTimeout(enableAutoCheckboxToggle, 500);
  20.  
  21.     // Reduce the size of images with a delay of 1500ms
  22.     setTimeout(reduceTranscriptImageSizes, 1500);
  23.  
  24.     // Increase the size of the Kaltura video player with a delay of 1500ms
  25.     setTimeout(increaseKalturaSize, 1500);
  26. })();
  27.  
  28. function enableAutoCheckboxToggle() {
  29.     try {
  30.         const checkbox = $('button#mark-as-done-checkbox'),
  31.               checkboxIconClass = $(checkbox).find('i')[0].className,
  32.               buttonNext = $('span.module-sequence-footer-button--next').find('a');
  33.  
  34.         buttonNext.on('click', () => {
  35.             if (checkboxIconClass === 'icon-empty') checkbox.click();
  36.         });
  37.     } catch (err) {
  38.         console.error('Tampermonkey script "Auto Checkbox Toggle" failed.\nDetails:', err);
  39.     }
  40. }
  41.  
  42. function reduceTranscriptImageSizes() {
  43.     try {
  44.         $('.user_content img').each(function() {
  45.             $(this).css('max-width', '30%');
  46.         });
  47.     } catch (err) {
  48.         console.error('Tampermonkey script "Reduce Transcript Image Sizes" failed.\nDetails:', err);
  49.     }
  50. }
  51.  
  52. function increaseKalturaSize() {
  53.     try {
  54.         const kalturaPlayer = $('iframe[src^="https://gatech.instructure.com"')[0];
  55.         kalturaPlayer.width = '';
  56.         kalturaPlayer.height = '';
  57.         kalturaPlayer.style.width = '100%';
  58.  
  59.         helperFuncApplyNewHeight(kalturaPlayer);
  60.  
  61.         let resizeTimer;
  62.         $(window).on('resize', e => {
  63.             clearTimeout(resizeTimer);
  64.             resizeTimer = setTimeout(() => {
  65.                 helperFuncApplyNewHeight(kalturaPlayer);
  66.             }, 250);
  67.         });
  68.     } catch (err) {
  69.         console.error('Tampermonkey script "Increase Kaltura Size" failed.\nDetails:', err);
  70.     }
  71. }
  72.  
  73. // Helper function for `increaseKalturaSize()`
  74. const helperFuncApplyNewHeight = player => {
  75.     // Calculate the new width after window size changed
  76.     const newWidth = parseInt(window.getComputedStyle(player).width.split('px')[0]);
  77.  
  78.     let divider = 1.5;
  79.     if (newWidth < 600) divider = 1.8;
  80.  
  81.     player.style.height = newWidth / divider + 'px';
  82. }