[Update] Plugins(VRCT Subtitles as testing one): Provide-able store and functions from main app.

src-ui/app/App.jsx

@@ -23,8 +23,6 @@ import { SnackbarController } from "./snackbar_controller/SnackbarController";
 import styles from "./App.module.scss";
 import { useIsBackendReady, useIsSoftwareUpdating, useIsVrctAvailable, useWindow } from "@logics_common";
 
-import { SubtitlesController } from "./main_page/main_section/subtitle_system_container/_controllers/subtitlesController.jsx";
-
 export const App = () => {
     const { currentIsVrctAvailable } = useIsVrctAvailable();
     const { currentIsBackendReady } = useIsBackendReady();
@@ -59,7 +57,6 @@ const Contents = ({ fetchPluginsHasRunRef }) => {
     return (
         <>
             <PluginsController fetchPluginsHasRunRef={fetchPluginsHasRunRef} />
-            <SubtitlesController />
 
             <WindowTitleBar />
             {currentIsSoftwareUpdating.data === false

src-ui/app/main_page/main_section/MainSection.jsx

@@ -8,7 +8,6 @@ import { LanguageSelector } from "./language_selector/LanguageSelector";
 import { useStore_IsOpenedLanguageSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";
 import { useEffect } from "react";
-import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSystemContainer";
 
 import { PluginHost } from "./PluginHost";
 

src-ui/logics/configs/plugins/usePlugins.js

@@ -16,6 +16,7 @@ import JSZip from "jszip";
 
 import { useFetch } from "@logics_common";
 import { useSoftwareVersion } from "@logics_configs";
+import * as logic_configs from "@logics_configs";
 
 
 // PLUGIN_LIST_URL は中央リポジトリにある、各プラグインの plugin_info.json への URL の配列を保持する JSON の URL
@@ -49,7 +50,8 @@ export const usePlugins = () => {
                         : [...new_value, { plugin_id: plugin_info.plugin_id, location: plugin_info.location, component, is_downloaded: true }];
                 });
             },
-            createAtomWithHook: (...args) => createAtomWithHook(...args)
+            createAtomWithHook: (...args) => createAtomWithHook(...args),
+            logic_configs: logic_configs,
         };
         return plugin_context;
     }

src-ui/plugins/plugin_examples/index.jsx

@@ -1,11 +1,19 @@
-import { initStore } from "./store/store";
-import { MainContainer } from "./main_container/MainContainer";
+import { initStore, StoreContext } from "./store/store.js";
+import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSystemContainer";
+import { SubtitlesController } from "./subtitle_system_container/_controllers/subtitlesController.jsx";
 
 export const init = (plugin_context) => {
     initStore(plugin_context.createAtomWithHook);
+    const { logic_configs } = plugin_context;
 
     const EntryComponents = () => {
-        return <MainContainer />;
+        return (
+            <StoreContext.Provider value={logic_configs}>
+                <SubtitlesController />
+
+                <SubtitleSystemContainer />
+            </StoreContext.Provider>
+        );
     };
 
     plugin_context.registerComponent(EntryComponents);

src-ui/plugins/plugin_examples/main_container/MainContainer.jsx

@@ -1,22 +0,0 @@
-import { useStore } from "../store/store";
-import { useEffect } from "react";
-
-export const MainContainer = () => {
-    const { updateCountPluginState, currentCountPluginState } = useStore("useStore_CountPluginState");
-
-    const incrementCount = () => {
-        updateCountPluginState((prev_value) => ({
-            count: prev_value.data.count + 1,
-        }));
-    };
-
-    useEffect(() => {
-    }, [])
-
-    return (
-        <div>
-            <p>1 Zipped Dev Plugin Count: {currentCountPluginState?.data?.count}</p>
-            <button onClick={incrementCount}>Increment Plugin Count</button>
-        </div>
-    );
-};

src-ui/plugins/plugin_examples/plugin_info.json

@@ -1,7 +1,7 @@
 {
-    "title": "VRCT Example Plugins 1",
-    "plugin_id": "vrct_plugin_example_1",
-    "asset_name": "vrct_plugin_example_1.zip",
+    "title": "VRCT Subtitles",
+    "plugin_id": "vrct_plugin_subtitles",
+    "asset_name": "vrct_plugin_subtitles.zip",
     "location": "main_section",
     "plugin_version": "0.0.1",
     "min_supported_vrct_version": "3.0.4",

src-ui/plugins/plugin_examples/store/store.js

@@ -2,15 +2,30 @@ const store_hooks = {};
 
 export const initStore = (createAtomWithHook) => {
     Object.assign(store_hooks, {
-        useStore_CountPluginState: createAtomWithHook(
-            { count: 10 },
-            "CountPluginState"
-        ).useHook,
+        // useStore_CountPluginState: createAtomWithHook(
+        //     { count: 10 },
+        //     "CountPluginState"
+        // ).useHook,
 
-        useStore_AnotherState: createAtomWithHook(
-            { value: "initial" },
-            "AnotherState"
-        ).useHook,
+        // useStore_AnotherState: createAtomWithHook(
+        //     { value: "initial" },
+        //     "AnotherState"
+        // ).useHook,
+
+        useStore_IsSubtitlePlaying: createAtomWithHook(false, "IsSubtitlePlaying", { is_state_ok: true }).useHook,
+        useStore_SubtitlePlaybackMode: createAtomWithHook("relative", "SubtitlePlaybackMode", { is_state_ok: true }).useHook,
+        useStore_SubtitleAbsoluteTargetTime: createAtomWithHook({
+            hour: "23",
+            minute: "00",
+        }, "SubtitleAbsoluteTargetTime", { is_state_ok: true }).useHook,
+        useStore_IsCuesScheduled: createAtomWithHook(false, "IsCuesScheduled", { is_state_ok: true }).useHook,
+        useStore_CountdownAdjustment: createAtomWithHook(0, "CountdownAdjustment", { is_state_ok: true }).useHook,
+        useStore_EffectiveCountdown: createAtomWithHook(null, "EffectiveCountdown", { is_state_ok: true }).useHook,
+        useStore_SubtitleCues: createAtomWithHook([], "SubtitleCues", { is_state_ok: true }).useHook,
+
+        useStore_SubtitleTimers: createAtomWithHook([], "SubtitleTimers", { is_state_ok: true }).useHook,
+        useStore_SubtitleCountdownTimerId: createAtomWithHook([], "SubtitleCountdownTimerId", { is_state_ok: true }).useHook,
+        useStore_SubtitleFileName: createAtomWithHook("ファイルが選択されていません", "SubtitleFileName", { is_state_ok: true }).useHook,
     });
 };
 
@@ -19,4 +34,14 @@ export const useStore = (hook_name) => {
         throw new Error(`Hook ${hook_name} is not initialized.`);
     }
     return store_hooks[hook_name]();
-};
+};
+
+
+// StoreContext.js
+import React, { createContext, useContext } from "react";
+
+export const StoreContext = createContext(null);
+
+export const useStoreContext = () => {
+    return useContext(StoreContext);
+};

src-ui/plugins/plugin_examples/subtitle_system_container/_controllers/SubtitlesController.jsx

@@ -1,9 +1,12 @@
-import { useSendTextToOverlay } from "@logics_configs";
+import { useStoreContext } from "../../store/store.js";
+
 import { useSubtitles } from "../_logics/useSubtitles";
 import { secToDayTime } from "../_subtitles_utils"
 import { useEffect } from "react";
 export const SubtitlesController = () => {
-    const { sendTextToOverlay } = useSendTextToOverlay();
+    const logic_configs = useStoreContext();
+    const { sendTextToOverlay } = logic_configs.useSendTextToOverlay();
+
     const {
         currentIsSubtitlePlaying,
         currentIsCuesScheduled,

src-ui/plugins/plugin_examples/subtitle_system_container/_logics/useSubtitles.jsx

@@ -1,35 +1,39 @@
-import { useSendTextToOverlay } from "@logics_configs";
-import {
-    useStore_SubtitleFileName,
-    useStore_IsSubtitlePlaying,
-    useStore_SubtitlePlaybackMode,
-    useStore_SubtitleAbsoluteTargetTime,
-    useStore_IsCuesScheduled,
-    useStore_CountdownAdjustment,
-    useStore_EffectiveCountdown,
-    useStore_SubtitleCues,
+import { useStore, useStoreContext } from "../../store/store.js";
 
-    useStore_SubtitleTimers,
-    useStore_SubtitleCountdownTimerId,
-} from "@store";
+// import { useSendTextToOverlay } from "@logics_configs";
+// import {
+//     useStore_SubtitleFileName,
+//     useStore_IsSubtitlePlaying,
+//     useStore_SubtitlePlaybackMode,
+//     useStore_SubtitleAbsoluteTargetTime,
+//     useStore_IsCuesScheduled,
+//     useStore_CountdownAdjustment,
+//     useStore_EffectiveCountdown,
+//     useStore_SubtitleCues,
+
+//     useStore_SubtitleTimers,
+//     useStore_SubtitleCountdownTimerId,
+// } from "../../store/store.js";
 
 export const useSubtitles = () => {
-    const { sendTextToOverlay } = useSendTextToOverlay();
-    const { currentSubtitleFileName, updateSubtitleFileName } = useStore_SubtitleFileName();
-    const { currentIsSubtitlePlaying, updateIsSubtitlePlaying } = useStore_IsSubtitlePlaying();
-    const { currentSubtitlePlaybackMode, updateSubtitlePlaybackMode } = useStore_SubtitlePlaybackMode();
-    const { currentSubtitleAbsoluteTargetTime, updateSubtitleAbsoluteTargetTime } = useStore_SubtitleAbsoluteTargetTime();
-    const { currentIsCuesScheduled, updateIsCuesScheduled } = useStore_IsCuesScheduled();
+    const logic_configs = useStoreContext();
+    const { sendTextToOverlay } = logic_configs.useSendTextToOverlay();
 
-    const { currentCountdownAdjustment, updateCountdownAdjustment } = useStore_CountdownAdjustment();
-    const { currentEffectiveCountdown, updateEffectiveCountdown } = useStore_EffectiveCountdown();
-    const { currentSubtitleCues, updateSubtitleCues } = useStore_SubtitleCues();
+    const { currentSubtitleFileName, updateSubtitleFileName } = useStore("useStore_SubtitleFileName");
+    const { currentIsSubtitlePlaying, updateIsSubtitlePlaying } = useStore("useStore_IsSubtitlePlaying");
+    const { currentSubtitlePlaybackMode, updateSubtitlePlaybackMode } = useStore("useStore_SubtitlePlaybackMode");
+    const { currentSubtitleAbsoluteTargetTime, updateSubtitleAbsoluteTargetTime } = useStore("useStore_SubtitleAbsoluteTargetTime");
+    const { currentIsCuesScheduled, updateIsCuesScheduled } = useStore("useStore_IsCuesScheduled");
+
+    const { currentCountdownAdjustment, updateCountdownAdjustment } = useStore("useStore_CountdownAdjustment");
+    const { currentEffectiveCountdown, updateEffectiveCountdown } = useStore("useStore_EffectiveCountdown");
+    const { currentSubtitleCues, updateSubtitleCues } = useStore("useStore_SubtitleCues");
 
     // タイマー（setTimeout/setInterval）のID管理用
-    const { currentSubtitleTimers, updateSubtitleTimers, addSubtitleTimers } = useStore_SubtitleTimers();
+    const { currentSubtitleTimers, updateSubtitleTimers, addSubtitleTimers } = useStore("useStore_SubtitleTimers");
     // const timersRef = useRef([]);
     // カウントダウンタイマー専用の ref
-    const { currentSubtitleCountdownTimerId, updateSubtitleCountdownTimerId, AddSubtitleCountdownTimerId } = useStore_SubtitleCountdownTimerId();
+    const { currentSubtitleCountdownTimerId, updateSubtitleCountdownTimerId, AddSubtitleCountdownTimerId } = useStore("useStore_SubtitleCountdownTimerId");
 
     // cues のスケジュールを行う（字幕開始時のオフセットは調整後のタイミングに合わせる）
     const scheduleCues = (offset) => {

src-ui/store.js

@@ -290,22 +290,4 @@ export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_
 export const { atomInstance: Atom_SupportersData, useHook: useStore_SupportersData } = createAtomWithHook(null, "SupportersData", {is_state_ok: true});
 
 export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
-export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
-
-// -----------------------------------------------
-// Subtitles
-// -----------------------------------------------
-export const { atomInstance: Atom_IsSubtitlePlaying, useHook: useStore_IsSubtitlePlaying } = createAtomWithHook(false, "IsSubtitlePlaying", { is_state_ok: true });
-export const { atomInstance: Atom_SubtitlePlaybackMode, useHook: useStore_SubtitlePlaybackMode } = createAtomWithHook("relative", "SubtitlePlaybackMode", { is_state_ok: true });
-export const { atomInstance: Atom_SubtitleAbsoluteTargetTime, useHook: useStore_SubtitleAbsoluteTargetTime } = createAtomWithHook({
-    hour: "23",
-    minute: "00",
-}, "SubtitleAbsoluteTargetTime", { is_state_ok: true });
-export const { atomInstance: Atom_IsCuesScheduled, useHook: useStore_IsCuesScheduled } = createAtomWithHook(false, "IsCuesScheduled", { is_state_ok: true });
-export const { atomInstance: Atom_CountdownAdjustment, useHook: useStore_CountdownAdjustment } = createAtomWithHook(0, "CountdownAdjustment", { is_state_ok: true });
-export const { atomInstance: Atom_EffectiveCountdown, useHook: useStore_EffectiveCountdown } = createAtomWithHook(null, "EffectiveCountdown", { is_state_ok: true });
-export const { atomInstance: Atom_SubtitleCues, useHook: useStore_SubtitleCues } = createAtomWithHook([], "SubtitleCues", { is_state_ok: true });
-
-export const { atomInstance: Atom_SubtitleTimers, useHook: useStore_SubtitleTimers } = createAtomWithHook([], "SubtitleTimers", { is_state_ok: true });
-export const { atomInstance: Atom_SubtitleCountdownTimerId, useHook: useStore_SubtitleCountdownTimerId } = createAtomWithHook([], "SubtitleCountdownTimerId", { is_state_ok: true });
-export const { atomInstance: Atom_SubtitleFileName, useHook: useStore_SubtitleFileName } = createAtomWithHook("ファイルが選択されていません", "SubtitleFileName", { is_state_ok: true });
+export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");