Add functionality to open zip archive, public file on Google Drive.

.github/workflows/static.yml

@@ -37,6 +37,8 @@ jobs:
           node-version: 18
       - run: npm ci
       - run: npm run build
+        env: 
+          VITE_GD_API_KEY: ${{ secrets.GD_API_KEY }}        
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact

package.json

@@ -1,7 +1,7 @@
 {
   "name": "m3disp",
   "private": true,
-  "version": "0.11.2",
+  "version": "0.12.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,6 @@
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.20",
     "@types/sha1": "^1.1.5",
-    "fflate": "^0.8.1",
     "libkss-js": "^2.2.0",
     "md5": "^2.3.0",
     "mgsc-js": "^2.0.0",
@@ -33,6 +32,7 @@
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.2.1",
+    "fflate": "^0.8.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.7"
   }

src/contexts/AppProgressContext.tsx

@@ -19,6 +19,8 @@ const defaultContextData: AppProgresssContextData = {
 export const AppProgressContext = createContext(defaultContextData);
 
 export function AppProgressContextProvider(props: PropsWithChildren) {
+  const [state, setState] = useState(defaultContextData);
+
   const setTitle = (value: string | null) => {
     setState((oldState) => ({ ...oldState, title: value }));
   };
@@ -27,8 +29,6 @@ export function AppProgressContextProvider(props: PropsWithChildren) {
     setState((oldState) => ({ ...oldState, progress: value, rev: oldState.rev + 1 }));
   };
 
-  const [state, setState] = useState(defaultContextData);
-
   return (
     <AppProgressContext.Provider value={{ ...state, setProgress, setTitle }}>
       {props.children}

src/contexts/FileDropContext.tsx

@@ -2,7 +2,7 @@ import { Box, useTheme } from "@mui/material";
 import { PropsWithChildren, useContext, useRef, useState } from "react";
 import { FileDrop } from "react-file-drop";
 import { BinaryDataStorage } from "../utils/binary-data-storage";
-import { loadFilesFromFileList } from "../utils/load-urls";
+import { createEntriesFromFileList } from "../utils/loader";
 import { PlayerContext } from "./PlayerContext";
 
 export function useFileDrop(playOnDrop: boolean, clearOnDrop: boolean = false) {
@@ -35,7 +35,7 @@ export function useFileDrop(playOnDrop: boolean, clearOnDrop: boolean = false) {
   };
 
   const loadFiles = async (storage: BinaryDataStorage, files: FileList, insertionIndex: number) => {
-    const entries = await loadFilesFromFileList(storage, files);
+    const entries = await createEntriesFromFileList(storage, files);
     context.reducer.addEntries(entries, insertionIndex);
     if (playOnDrop) {
       context.reducer.play(insertionIndex);

src/contexts/PlayerContext.tsx

@@ -3,7 +3,7 @@ import { AudioPlayerState } from "webaudio-stream-player";
 import { KSSChannelMask } from "../kss/kss-device";
 import { KSSPlayer } from "../kss/kss-player";
 import { BinaryDataStorage } from "../utils/binary-data-storage";
-import { loadEntriesFromUrl } from "../utils/load-urls";
+import { loadEntriesFromFileList, loadEntriesFromUrl } from "../utils/loader";
 import { isIOS, isSafari } from "../utils/platform-detect";
 import { unmuteAudio } from "../utils/unmute";
 import AppGlobal from "./AppGlobal";
@@ -163,9 +163,14 @@ export function PlayerContextProvider(props: React.PropsWithChildren) {
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
+    console.log('attach');
+    console.log(window.opener);
+    window.addEventListener("message", onWindowMessage, false);
     state.player.addEventListener("statechange", onPlayerStateChange);
     initialize();
     return () => {
+      console.log('detach');
+      window.removeEventListener("message", onWindowMessage, false);
       state.player.removeEventListener("statechange", onPlayerStateChange);
     };
   }, []);
@@ -232,6 +237,18 @@ export function PlayerContextProvider(props: React.PropsWithChildren) {
     }
   };
 
+  const onWindowMessage = async (ev: MessageEvent) => {
+    console.log(ev);
+    if (ev.data instanceof Uint8Array && ev.data.length <= 65536) {
+      reducer.clearEntries();
+      const file = new File([ev.data], 'external.mgs');
+      const entries = await loadEntriesFromFileList(state.storage, [new File([ev.data], file.name)]);
+      reducer.addEntries(entries, 0);
+      reducer.resume();
+      reducer.play(0);
+    }
+  };
+
   return (
     <PlayerContext.Provider
       value={{