Ferdium Slack screen share window workaround

user.js

module.exports = (config, Ferdium) => {
  document.body.addEventListener("click", function (event) {
    const qa = event.target.dataset.qa
    const parentQA = event.target.parentElement?.dataset.qa
    if (qa === "open-in-window" || parentQA === "open-in-window" || qa === "mini_player_open_in_new_window_button") {
      toggleCustomStyles()
    }
  })

  function toggleCustomStyles() {
    const styleId = "proper-screenshare-video-styles"
    let styleElement = document.getElementById(styleId)

    if (styleElement) {
      styleElement.remove()
    } else {
      styleElement = document.createElement("style")
      styleElement.id = styleId
      styleElement.type = "text/css"
      styleElement.innerHTML = `
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container {
                width: 89vw;
                background: black;
            }
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container video.p-presented_items_pane__screenshare,
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container .p-presented_items_pane__slider {
                max-height: none;
            }
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container .p-presented_items_pane__video {
                width: auto !important;
                height: 5vh !important;
            }
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container .p-presented_items_pane__screenshare_overlay {
                display: none;
            }
            .p-presented_items_pane__screenshare {
                object-fit: contain;
            }
        `
      document.head.appendChild(styleElement)
    }
  }
}

I have improved the code so the image of the person sharing the screen doesn't take space:

// span p-presented_items_pane__floating_avatar c-avatar
// span c-base_icon__width_only_container
// img c-base_icon c-base_icon--image

module.exports = (config, Ferdium) => {
  document.body.addEventListener("click", function (event) {
    const qa = event.target.dataset.qa
    const parentQA = event.target.parentElement?.dataset.qa
    if (qa === "open-in-window" || parentQA === "open-in-window" || qa === "mini_player_open_in_new_window_button") {
      toggleCustomStyles()
    }
  })

  function toggleCustomStyles() {
    const styleId = "proper-screenshare-video-styles"
    let styleElement = document.getElementById(styleId)

    if (styleElement) {
      styleElement.remove()
    } else {
      styleElement = document.createElement("style")
      styleElement.id = styleId
      styleElement.type = "text/css"
      styleElement.innerHTML = `
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container {
                width: 89vw;
                background: black;
            }
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container video.p-presented_items_pane__screenshare,
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container .p-presented_items_pane__slider {
                max-height: none;
            }
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container .p-presented_items_pane__video {
                width: auto !important;
                height: 5vh !important;
            }
            .p-huddle_sidebar_footer__container .p-file_drag_drop__container .p-presented_items_pane__screenshare_overlay {
                display: none;
            }
            .p-presented_items_pane__screenshare {
                object-fit: contain;
            }
        `
      document.head.appendChild(styleElement)
    }

    let img = document.querySelector('.p-presented_items_pane__floating_avatar.c-avatar .c-base_icon__width_only_container .c-base_icon--image');
    if (img) {
      // img.remove();
      img.style.width = 'auto';
      img.style.height = 'auto';
      img.style.maxWidth = '40px';
      img.style.maxHeight = '40px';
    }
  }
}