javascript:(function() {
 /* OPTIONAL VARIABLES */
 var promptInstructionsDomTakeVideoNotes = 1; /* prompt with instructions */

 var allowKeyPressDomTakeVideoNotes = 1;      /* use key press events   */

 /* CONFIG VARIABLES */
 var heightDomTakeVideoNotes = /* set initial height for notes */
  "100px";
 var ignoredKeysDomTakeVideoNotes = /* keys pressed that do not active not box */
  "Home End PageUp PageDown ArrowUp ArrowDown f v k s";

 /* Set max height and width that note box can be sest to. */
 var maxWidthDomTakeVideoNotes = "1000px";
 var maxHeightDomTakeVideoNotes = "600px";

 /* DOM VARIABLES */
 /* Lookout for a video tag.   */
 var checkVideoTagDomTakeVideoNotes =
  document.getElementsByTagName("video");

 /* Lookout for an iframe tag. */
 var checkIframeDomTakeVideoNotes =
  document.getElementsByTagName("iframe");

 /* style applied to video area. */
 var noteBoxStyling = `
  div#noteBoxDomTakeVideoNotes {
   position: fixed;
   z-index: 1000;
   left: 25%;
   bottom: 10px;
   max-width: 500px;
   max-height: 500px;
   margin-left: 20px;
   margin-bottom: 20px;
  }
  div#closeDomTakeVideoNotes {
   box-sizing: content-box;
   cursor: pointer;
   display: inline-block;
   position: absolute;
   z-index: 2;
   width: 15px;
   height: 15px;
   padding: 5px 5px 15px 5px;
   margin-top: -15px;
   margin-left: 5px;
   background: red;
   color: white;
   border-radius: 5px;
   text-align: center;
  }
  div#showHideNoteBoxDomTakeVideoNotes,
   textarea#textareaDomTakeVideoNotes {
   max-width:  ${maxWidthDomTakeVideoNotes}  !important;
   max-height: ${maxHeightDomTakeVideoNotes} !important;
  }
  div#showHideNoteBoxDomTakeVideoNotes {
   resize: both !important;
   overflow: auto;
   transform: rotateX(180deg);
   height: ${heightDomTakeVideoNotes};
   width: 600px;
   padding: 0px;
  }
  textarea#textareaDomTakeVideoNotes {
   box-sizing: border-box;
   position: absolute;
   z-index: 1;
   resize: none;
   transform: rotateX(180deg);
   height: inherit;
   width: inherit;
   margin-left: 10px;
   margin-bottom: 10px;
   padding: 25px;
  }
 `;

 /* GLOBAL VARIABLES */
 var textareaDomTakeVideoNotesID;   /* defined later */
 var textareaDomTakeVideoNotes = 0; /* when not taking notes allow fv to focus on video */

 /* Instructions shown when run. */
 var noteInstructionsDomTakeVideoNotes = `
  TAKE VIDEO NOTES INSTRUCTIONS:\n\n
   I. Taking Notes:\n
    ***************\n
  - Start typing to take notes.\n
  - Press 'Ctrl + Shift' to unfocus note box.\n
  - Start typing again to take notes.\n
  - When not taking notes, and video out of view \n
    press ' f ' and ' v ' within 1 second of each other \n
    to bring in view.
  - Press 'Alt + a' to copy all in note box.\n
  - To hide notes and have option to save click\n
    the red button at top left of notes.\n\n`;

 /************************************* SUPPORT FUNCTIONS *************************************/
 /* Select and copy notes. */
 const copyNotesDomTakeVideoNotes = () => {
  textareaDomTakeVideoNotesID.select();
  navigator.clipboard.writeText(textareaDomTakeVideoNotesID.value);
 };

 /* Get the index of the video clicked. */
 var lastVideoClickedIndexDomTakeVideoNotes = -1;
 var lastVideoTagNameDomTakeVideoNotes;
 const indexVideoClickedDomTakeVideoNotes = (el) => {
  if (!el) return;

  /* collect all video, iframe, or elements with action attr. on the page */  
  if (lastVideoTagNameDomTakeVideoNotes == "a") {
   if (useParDomTakeVideoNotes == 1) {
    lastVideoClickedIndexDomTakeVideoNotes = el.parentElement;
   } else {
    lastVideoClickedIndexDomTakeVideoNotes = el;
   }
  } else {
   let t = el.tagName;
   let unqId = String(t + countIdDomTakeVideoNotes);
   if (el.hasAttribute("id")) {   
    let curId = el.getAttribute("id");
    if (curId.indexOf(t) == -1) {
     let tId = curId + " ";
     el.setAttribute("id", 
                     String(tId + unqId));
    }
   } else {
    el.setAttribute("id", String(unqId));
   }

   /* store id value in global variable */
   lastVideoClickedIndexDomTakeVideoNotes = unqId;
  }
 };

 /* Listen for click and call indexVidoeClickedDomTakeVideoNotes if iframe or video tag. */
 var countIdDomTakeVideoNotes = 0;
 var useParDomTakeVideoNotes = 0;
 const setVideoClickListenerDomTakeVideoNotes = () => {
  let clickOrOverVideo = (e) => {
   const el = e.target;
   if (!el) return;

   /* only handle clicks on <video> or <iframe> elements */
   if (el.tagName === "VIDEO"  || 
       el.tagName === "IFRAME" || 
       el.hasAttribute("action")
      ) {        
    countIdDomTakeVideoNotes += 1; /* to give unique id */
    if (el.hasAttribute("action")) lastVideoTagNameDomTakeVideoNotes = "a";   /* action atr */
    else if (el.tagName == "IFRAME") lastVideoTagNameDomTakeVideoNotes = "i"; /* iframe tag clicked */
    else lastVideoTagNameDomTakeVideoNotes = "v";                             /* video tag clicked  */
    /* HOT-GLUE */
    if (el.tagName == "IFRAME") {
     let elPar = el.parentElement;
     if (elPar.hasAttribute("action")) {
      useParDomTakeVideoNotes = 1;
      lastVideoTagNameDomTakeVideoNotes = "a"; /* action atr */
     } else {
      useParDomTakeVideoNotes = 0;   /* reset use parent switch */
     }
    } else {
     useParDomTakeVideoNotes = 0;   /* reset use parent switch */
    }
    indexVideoClickedDomTakeVideoNotes(el);
   } else {
    let skip; /* do nothing */
   }
  };
  let outIfClick = () => {
   return true;
  };
  document.addEventListener("click", () => {
   outIfClick();
  });
  /* mouse over for when click is not registered */
  document.addEventListener("mouseover", (e) => {
   if (outIfClick() == true) clickOrOverVideo(e);
  });
 };

 /* Check if Control and Shift are sequentially keyup and keydown under 1 second. */
 const checkCtrlShiftDomTakeVideoNotes = (ms = 750) => {
  return new Promise(resolve => {
   let ctrlPressed = false;
   let ctrlReleased = false;
   let shiftPressed = false;
   let shiftReleased = false;
   let deadline = 0;
   let timeoutId = null;

   function cleanup(result) {
    document.removeEventListener('keydown', onKeyDown, true);
    document.removeEventListener('keyup', onKeyUp, true);
    if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; }
    resolve(!!result);
   }

   function startTimeout() {
    /* start or restart the timeout for the shift window */
    if (timeoutId) clearTimeout(timeoutId);
    deadline = Date.now() + ms;
    timeoutId = setTimeout(() => {
     /* timed out waiting for shift sequence */
     cleanup(false);
    }, ms);
   }

   function onKeyDown(e) {
    const k = e.key;
    if (k === 'Control') {
     /* ctrl pressed */
     ctrlPressed = true;
    } else if (k === 'Shift') {
     /* only pay attention to shift if ctrl has already been released */
     if (ctrlReleased && !shiftPressed) {
      shiftPressed = true;
     }
    }
   }

   function onKeyUp(e) {
    const k = e.key;
    if (k === 'Control') {
     /* only consider a ctrl "release" if it was pressed first */
     if (ctrlPressed) {
      ctrlPressed = false;
      ctrlReleased = true;
      startTimeout();
     }
    } else if (k === 'Shift') {
     /* only consider shift release if we saw a shift press after ctrl release */
     if (shiftPressed) {
      shiftPressed = false;
      shiftReleased = true;

      /* check timing and that neither key is currently held down */
      const withinTime = Date.now() <= deadline;
      const ctrlStillHeld = ctrlPressed;  /* should be false */
      const shiftStillHeld = shiftPressed; /* should be false */

      if (withinTime && !ctrlStillHeld && !shiftStillHeld) {
       cleanup(true);
      } else {
       cleanup(false);
      }
     }
    }
   }

   /* attach capturing listeners so they catch keys even if elements stop propagation */
   document.addEventListener('keydown', onKeyDown, true);
   document.addEventListener('keyup', onKeyUp, true);

   /* safety: if nothing happens for (ms + 1000) ms, give up */
   const globalTimeout = setTimeout(() => {
    if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; }
    cleanup(false);
   }, ms + 1000);

   /* ensure the safety timeout cleared on final cleanup */
   const origCleanup = cleanup;
   cleanup = function(result) {
    clearTimeout(globalTimeout);
    origCleanup(result);
   };
  });
 };
 
 /* Focus on textarea whenever keydown occurs. */
 const keypressToNoteDomTakeVideoNotes = () => {
  let activeID = document.activeElement.id;
  let lastKeyPressDomTakeVideoNotes; /* used to check for key combos */
  lastKeyPressDomTakeVideoNotes =
   sessionStorage.getItem("lastKeyPressDomTakeVideoNotes");

  /* for first key press */
  if (lastKeyPressDomTakeVideoNotes == null) {
   sessionStorage.setItem("lastKeyPressDomTakeVideoNotes", event.key);
   lastKeyPressDomTakeVideoNotes =
   sessionStorage.getItem("lastKeyPressDomTakeVideoNotes");
  }

  /* store key press and check active element */
  let currentKeyPress = event.key;

  /* start conditions to activate note box or run function accordingly  */
  /* if any of these elements have focus                                */
  /* then don't take notes - note - variable defined at start           */
  for (i in ignoredKeysDomTakeVideoNotes) {
   if (activeID == ignoredKeysDomTakeVideoNotes[i]) {
    /* quit function */
    return;
   }
  } /* else implied */
  { /* the active element is not in ignored list, run function */
   let checkKeyCombo = /* check for combos */
    lastKeyPressDomTakeVideoNotes + "+" + currentKeyPress;
    
   /* check key combos and run function accordingly */
   checkCtrlShiftDomTakeVideoNotes(750).then((ok) => {
    /* checkKeyCombo = "Control Shift" */
    if (ok) {
     textareaDomTakeVideoNotesID.blur();  /* out of note box            */
     textareaDomTakeVideoNotes = 0;       /* allow video focus combo    */
     if (lastVideoClickedIndexDomTakeVideoNotes != -1) { /* focus video */
      if (lastVideoTagNameDomTakeVideoNotes == "a") {
       let el = lastVideoClickedIndexDomTakeVideoNotes;
       if (el.getAttribute("action") == "pause") el.setAttribute("action", "play");
       else el.setAttribute("action", "pause");
      } else {
       let idx = 
        document.getElementById(lastVideoClickedIndexDomTakeVideoNotes);
       
        /* play or pause video */
       if (idx != null) {
        if (idx.getAttribute("data-pause") == "1") idx.play();
        else idx.pause();
       }
      }
     }
    } else {
     let skip; /* do nothing */
    }
   });
   
   /* select and copy notes to clipboard  */
   if (checkKeyCombo == "Alt+a") {
    copyNotesDomTakeVideoNotes();
   }
   else {
    /* only if note box is not active element */
    if (activeID != "textareaDomTakeVideoNotesID") {
     /* prevent fullscreen from occuring */
     /* use variable for conditions */
     let noIgnoredKeys =
      ignoredKeysDomTakeVideoNotes.indexOf(event.key) == -1;

     let notPauseShortcut = checkKeyCombo != "Shift+ ";
     if (noIgnoredKeys) {
      if (notPauseShortcut) {
       textareaDomTakeVideoNotesID.focus();
       textareaDomTakeVideoNotes = 1;
      }
     }
    }
   }
  }
  /* store key press for next key combo check */
  sessionStorage.setItem("lastKeyPressDomTakeVideoNotes", event.key);
 };

 /* Quickly get back to notes */
 const addKeyDownDomTakeVideoNotes = () => {
  document.body.addEventListener("keydown", 
   function() {
    keypressToNoteDomTakeVideoNotes();
  });
 };

 /* Put video into focus if scrolling and not in view. */
 const scrollToVideoTakeVideoNotes = () => {
  let videoRunningTakeVideoNotes = 0;
  let fvPressed = false;
  let keyHistory = [];

  /* helper: detect if a video or iframe is running */
  let isVideoOrIframePlaying = (el) => {
  if (el.tagName === "VIDEO") {
   return !el.paused && !el.ended;
  }
  if (el.tagName === "IFRAME") {
   /* assume iframes are "running" if they exist — customize if needed */
   return true;
  }
  return false;
  };

  /* update global status variable */
  let updateRunningStatus = () => {
   let mediaElements = [...document.querySelectorAll("video, iframe")];
    videoRunningTakeVideoNotes = mediaElements.some(isVideoOrIframePlaying) ? 1 : 0;
  };

  /* focus on the currently playing video/iframe */
  let focusOnRunningMedia = () => {
   let mediaElements = [...document.querySelectorAll("video, iframe")];
   for (const el of mediaElements) {
    /* scrolls it into view */
    if (
       isVideoOrIframePlaying(el) &&   /* video is playing */
       textareaDomTakeVideoNotes == 0  /* not taking notes */
      ) {
     el.scrollIntoView({
      behavior: "smooth",
      block: "center"
     });
     return;
    }
   }
  };


  /* key listener logic: detect 'f' and 'v' pressed within 1 second */
  document.addEventListener("keydown", (e) => {
   let now = Date.now();
   keyHistory.push({ key: e.key.toLowerCase(), time: now });

   /* keep only recent keystrokes (within 1 second) */
   keyHistory = keyHistory.filter(entry => now - entry.time <= 1000);

   let keys = keyHistory.map(k => k.key);
   if ((keys.includes("f") && keys.includes("v")) ||
       (keys.includes("s") && keys.includes("v"))) {
    fvPressed = true;
   }

   /* run action */
   updateRunningStatus();
   if (fvPressed && /* f and v within a second */
       videoRunningTakeVideoNotes === 1 && /* video is running */
       textareaDomTakeVideoNotes == 0      /* textarea not in focus */
      ) {
    focusOnRunningMedia();
    fvPressed = false; /* reset after action */
    keyHistory = [];
   } else { /* do nothing */
    let skip;
   }
  });

  /* optional: make all videos and iframes focusable */
  document.querySelectorAll("video, iframe").forEach(el => {
   el.setAttribute("tabindex", "-1");
  });

  console.log("Video focus listener initialized.");
 };

 /* Add listener for pause or play. */
 const addPausePlayTakeVideoNotes = (cur) => {
  let curLen = cur.length;
  for (i = 0; i < curLen; i++) {
   cur[i].setAttribute("data-play", "off");
   cur[i].setAttribute("data-pause", "off");
   cur[i].addEventListener("play", function() {
    this.setAttribute("data-play", "1");
    this.setAttribute("data-pause", "0");
   });
   cur[i].addEventListener("pause", function() {
    this.setAttribute("data-play", "0");
    this.setAttribute("data-pause", "1");
   });
  }
 };

 /*********************************************************************************************
                                         MAIN FUNCTION
 *********************************************************************************************/
 function runDOMTakeVideoNotes() {
  /* create elements for take notes area */
  let noteBoxStyleDomTakeVideoNotes = document.createElement("style");
  let noteBoxDomTakeVideoNotes  = document.createElement("div");
  let closeDomTakeVideoNotes    = document.createElement("div");
  let showHideNoteBoxDomTakeVideoNotes = document.createElement("div");
  let textareaDomTakeVideoNotes    = document.createElement("textarea");

  /* add id for styling and additional functionality */
  noteBoxStyleDomTakeVideoNotes.id = "noteBoxStyleDomTakeVideoNotes";       /* checks if notebox exist */
  noteBoxDomTakeVideoNotes.id  = "noteBoxDomTakeVideoNotes";                /* hold all                */
  closeDomTakeVideoNotes.id    = "closeDomTakeVideoNotes";                  /* show and hide notes     */
  showHideNoteBoxDomTakeVideoNotes.id = "showHideNoteBoxDomTakeVideoNotes"; /* style with display none */
  textareaDomTakeVideoNotes.id    = "textareaDomTakeVideoNotes";            /* text box for notes      */

  /* first check if bookmarklet has been applied */
  let checkIfDomTakeVideoNotes =
   document.getElementById("noteBoxStyleDomTakeVideoNotes");

  /* if not applied apply bookmarklet and add note elements    */
  if (!checkIfDomTakeVideoNotes) {
   /* insert style tag and use noteBoxStyling defined at start */
   document.body.appendChild(noteBoxStyleDomTakeVideoNotes);
   noteBoxStyleDomTakeVideoNotes.innerText = noteBoxStyling;

   /* insert and select newly inserted element */
   document.body.appendChild(noteBoxDomTakeVideoNotes);
   let noteBoxDomTakeVideoNotesID =
    document.getElementById("noteBoxDomTakeVideoNotes");

   /* insert and select newly inserted element */
   noteBoxDomTakeVideoNotesID
   .insertAdjacentElement("afterbegin", closeDomTakeVideoNotes);
   let closeDomTakeVideoNotesID =
    document.getElementById("closeDomTakeVideoNotes");

   /* insert and select newly inserted element */
   closeDomTakeVideoNotesID
   .insertAdjacentElement("afterend", showHideNoteBoxDomTakeVideoNotes);

   let showHideNoteBoxDomTakeVideoNotesID =
    document.getElementById("showHideNoteBoxDomTakeVideoNotes");

   /* insert and select newly inserted element */
   showHideNoteBoxDomTakeVideoNotesID
   .insertAdjacentElement("afterbegin", textareaDomTakeVideoNotes);
   textareaDomTakeVideoNotesID =
    document.getElementById("textareaDomTakeVideoNotes");

   /* add ablility for note box to be hidden */
   closeDomTakeVideoNotesID.innerText = "x";
   closeDomTakeVideoNotesID.dataset.showhide = "0";
   closeDomTakeVideoNotesID.addEventListener("click", function() {
    if (this.dataset.showhide == "0") {
     /* hide and focus out of textarea */
     this.dataset.showhide = "1";
     this.innerText = "o";
     this.nextElementSibling.style.display = "none";
     textareaDomTakeVideoNotes = 0;
    } else {
     /* show and focus back on textarea */
     this.dataset.showhide = "0";
     this.innerText = "x";
     this.nextElementSibling.style.display = "";
     textareaDomTakeVideoNotesID.focus();
     textareaDomTakeVideoNotes = 1;
    }
   });

   /***** KEY PRESS FUNCTIONS *****/
   if (allowKeyPressDomTakeVideoNotes == 1) {
    /* check last iframe or video tag clicked */
    setVideoClickListenerDomTakeVideoNotes();

    /* copy notes in textare to clipboard */
    copyNotesDomTakeVideoNotes();

    /* begin taking notes */
    textareaDomTakeVideoNotes.focus();

    /* turn on text box focus indicator */
    textareaDomTakeVideoNotes = 1;

    /* allow video to be scrolled back into view */
    scrollToVideoTakeVideoNotes();

    /* listen for keydonw event */
    addKeyDownDomTakeVideoNotes();
   }
  }
 }

 /* Make sure page has either a video tag or an iframe tag. */
 if (
   checkVideoTagDomTakeVideoNotes.length >= 1 ||
   checkIframeDomTakeVideoNotes.length >= 1
  ) {
  if (checkIframeDomTakeVideoNotes.length >= 1) {
   addPausePlayTakeVideoNotes(checkIframeDomTakeVideoNotes);
  } 
  if (checkVideoTagDomTakeVideoNotes.length >= 1) {
   addPausePlayTakeVideoNotes(checkVideoTagDomTakeVideoNotes);
  }
  
  /* run main function */
  runDOMTakeVideoNotes();

  /* Prompt with instructions if turned on - variable at top is 1. */
  if (promptInstructionsDomTakeVideoNotes == 1) {
   alert(noteInstructionsDomTakeVideoNotes);
  }
 }

 /*************************************************
                     MAYBE LATER
  *************************************************
  II. Saving Notes:\n
   - Press 'Save Notes' button adjacent to close\n
     button when notes are closed to save notes.
  **************************************************/
})();