Merge pull request #243 from swfz/feature/add-platform

feature/add platform

Author: swfz

.prettierignore

@@ -1,3 +1,4 @@
 **/.git
 **/node_modules
 **/dist
+pnpm-lock.yaml

content_script/presenter_subscribe.ts

@@ -1,7 +1,15 @@
 console.log('loaded google slide comment stream');
 let commentSubscribed = false;
 
-const subscribeComments = (observeElement, sendResponse) => {
+const selectors = {
+  gslide: {
+    commentNodeClassName: 'punch-viewer-speaker-questions',
+    listNodeSelector: '.punch-viewer-speaker-questions',
+    extractFn: (el) => el.children[1].children[2],
+  },
+}
+
+const subscribeComments = (platform, observeElement, sendResponse) => {
   const broadcastChannel = new BroadcastChannel('comment_channel');
 
   const extractComment = (mutationRecords: MutationRecord[]): string[] => {
@@ -10,12 +18,12 @@ const subscribeComments = (observeElement, sendResponse) => {
       .filter((record) => {
         const element = record.target as Element;
 
-        return element.className === 'punch-viewer-speaker-questions';
+        return element.className === selectors[platform].commentNodeClassName;
       })
       .map((record) => record.addedNodes[0]);
     const comments = Array.from(nodes).map((node) => {
       const element = node as HTMLElement;
-      const commentElement = element.children[1].children[2] as HTMLElement;
+      const commentElement = selectors[platform].extractFn(element) as HTMLElement;
 
       return commentElement.innerText;
     });
@@ -56,15 +64,16 @@ const extractAllComments = (sendResponse) => {
 };
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  const observeElement = document.querySelector<HTMLDivElement>('.punch-viewer-speaker-questions');
+  const platform = message.platform;
+  const observeElement = document.querySelector<HTMLDivElement>(selectors[platform].listNodeSelector);
 
   if (observeElement === null) {
     return;
   }
 
   if (message.command === 'Load') {
     if (!commentSubscribed) {
-      subscribeComments(observeElement, sendResponse);
+      subscribeComments(platform, observeElement, sendResponse);
       console.log('subscribe presenter usertool started');
     }
   } else if (message.command === 'Download') {

script/patch_manifest.js

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'fs';
 
 const manifest = JSON.parse(fs.readFileSync('dist/manifest.json'));
 

src/App.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import './App.css';
 
 type Config = {
+  platform?: string;
   color?: string;
   font?: string;
   speedPx?: number;
@@ -15,10 +16,14 @@ function App() {
   const [status, setStatus] = useState<string>();
   const [presenter, setPresenter] = useState<number | null>();
 
+  const platforms: Config['platform'][] = ['gslide'];
   const fonts = ['メイリオ', 'ＭＳ ゴシック', 'ＭＳ 明朝', 'HGS行書体', 'HGP創英角ﾎﾟｯﾌﾟ体'];
 
   const claps = ['none', 'black', 'white', 'pink'];
 
+  const handlePlatformChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    setConfig((prev) => ({ ...prev, platform: event.target.value }));
+  };
   const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
     setConfig((prev) => ({ ...prev, color: event.target.value }));
   };
@@ -46,7 +51,7 @@ function App() {
     }
 
     chrome.storage.sync.set({ config });
-    chrome.tabs.sendMessage(tab.id, { command: 'Load' }, (res) => {
+    chrome.tabs.sendMessage(tab.id, { command: 'Load', platform: config?.platform }, (res) => {
       setStatus(res.message);
       if (res.screenType === 'presenter') {
         chrome.storage.sync.set({ presenter: tab.id });
@@ -106,6 +111,23 @@ function App() {
         <p>Click "Start" on both the slide side and the presenter user tools side</p>
         <form>
           <div className="pseudo-table">
+            <div className="pseudo-row">
+              <label htmlFor="platform" className="pseudo-cell">
+                Subscribe Platform:{' '}
+              </label>
+              <div className="pseudo-cell">
+                <select value={config?.platform || 'gslide'} onChange={handlePlatformChange}>
+                  {platforms.map((platform) => {
+                    return (
+                      <option key={platform} value={platform}>
+                        {platform}
+                      </option>
+                    );
+                  })}
+                </select>
+              </div>
+            </div>
+
             <div className="pseudo-row">
               <label htmlFor="color" className="pseudo-cell">
                 Comment Color:{' '}