1 files changed, 143 insertions, 0 deletions

diff --git a/src/webview/screenshare.ts b/src/webview/screenshare.ts
new file mode 100644
index 000000000..91a1623bb
--- /dev/null
+++ b/src/webview/screenshare.ts
@@ -0,0 +1,143 @@
+import { desktopCapturer } from 'electron';
+
+const CANCEL_ID = 'desktop-capturer-selection__cancel';
+
+export async function getDisplayMediaSelector() {
+  const sources = await desktopCapturer.getSources({
+    types: ['screen', 'window'],
+  });
+  return `<div class="desktop-capturer-selection__scroller">
+  <ul class="desktop-capturer-selection__list">
+    ${sources
+      .map(
+        ({ id, name, thumbnail }) => `
+      <li class="desktop-capturer-selection__item">
+        <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
+          <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
+          <span class="desktop-capturer-selection__name">${name}</span>
+        </button>
+      </li>
+    `,
+      )
+      .join('')}
+    <li class="desktop-capturer-selection__item">
+      <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
+        <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
+      </button>
+    </li>
+  </ul>
+</div>`;
+}
+
+export const screenShareCss = `
+.desktop-capturer-selection {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(30,30,30,.75);
+  color: #fff;
+  z-index: 10000000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.desktop-capturer-selection__scroller {
+  width: 100%;
+  max-height: 100vh;
+  overflow-y: auto;
+}
+.desktop-capturer-selection__list {
+  max-width: calc(100% - 100px);
+  margin: 50px;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  overflow: hidden;
+  justify-content: center;
+}
+.desktop-capturer-selection__item {
+  display: flex;
+  margin: 4px;
+}
+.desktop-capturer-selection__btn {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 145px;
+  margin: 0;
+  border: 0;
+  border-radius: 3px;
+  padding: 4px;
+  background: #252626;
+  text-align: left;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color .15s, box-shadow .15s, color .15s;
+  }
+  color: #dedede;
+}
+.desktop-capturer-selection__btn:hover,
+.desktop-capturer-selection__btn:focus {
+  background: rgba(98,100,167,.8);
+  box-shadow: 0 0 4px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.25);
+  color: #fff;
+}
+.desktop-capturer-selection__thumbnail {
+  width: 100%;
+  height: 81px;
+  object-fit: cover;
+}
+.desktop-capturer-selection__name {
+  margin: 6px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  overflow: hidden;
+}
+.desktop-capturer-selection__name--cancel {
+  margin: auto 0;
+}
+`;
+
+export const screenShareJs = `
+window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
+  try {
+    const selectionElem = document.createElement('div');
+    selectionElem.classList = ['desktop-capturer-selection'];
+    selectionElem.innerHTML = await window.ferdi.getDisplayMediaSelector();
+    document.body.appendChild(selectionElem);
+
+    document
+      .querySelectorAll('.desktop-capturer-selection__btn')
+      .forEach((button) => {
+        button.addEventListener('click', async () => {
+          try {
+            const id = button.getAttribute('data-id');
+            if (id === '${CANCEL_ID}') {
+              reject(new Error('Cancelled by user'));
+            } else {
+              const stream = await window.navigator.mediaDevices.getUserMedia({
+                audio: false,
+                video: {
+                  mandatory: {
+                    chromeMediaSource: 'desktop',
+                    chromeMediaSourceId: id,
+                  },
+                },
+              });
+              resolve(stream);
+            }
+          } catch (err) {
+            reject(err);
+          } finally {
+            selectionElem.remove();
+          }
+        });
+      });
+  } catch (err) {
+    reject(err);
+  }
+});
+`;