feat: follow OS reduced motion setting (#1757)

- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>

1 files changed, 12 insertions, 4 deletions

diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js
index ab548a625..e7e43c04e 100644
--- a/src/webview/screenshare.js
+++ b/src/webview/screenshare.js
@@ -3,17 +3,23 @@ import { desktopCapturer } from 'electron';
 const CANCEL_ID = 'desktop-capturer-selection__cancel';
 
 export async function getDisplayMediaSelector() {
-  const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
+  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 }) => `
+    ${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('')}
+    `,
+    )
+    .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>
@@ -67,7 +73,9 @@ export const screenShareCss = `
   padding: 4px;
   background: #252626;
   text-align: left;
-  transition: background-color .15s, box-shadow .15s, color .15s;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color .15s, box-shadow .15s, color .15s;
+  }
   color: #dedede;
 }
 .desktop-capturer-selection__btn:hover,