diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 269bf824..c102af71 100644 --- a/src-ui/app/App.jsx +++ b/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 ( <> - {currentIsSoftwareUpdating.data === false diff --git a/src-ui/app/main_page/main_section/MainSection.jsx b/src-ui/app/main_page/main_section/MainSection.jsx index d6b1f298..0eaf272d 100644 --- a/src-ui/app/main_page/main_section/MainSection.jsx +++ b/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"; diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js index 2c337f7c..9a801674 100644 --- a/src-ui/logics/configs/plugins/usePlugins.js +++ b/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; } diff --git a/src-ui/plugins/plugin_examples/index.jsx b/src-ui/plugins/plugin_examples/index.jsx index 4ded2716..011c133d 100644 --- a/src-ui/plugins/plugin_examples/index.jsx +++ b/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 ; + return ( + + + + + + ); }; plugin_context.registerComponent(EntryComponents); diff --git a/src-ui/plugins/plugin_examples/main_container/MainContainer.jsx b/src-ui/plugins/plugin_examples/main_container/MainContainer.jsx deleted file mode 100644 index eaccc0aa..00000000 --- a/src-ui/plugins/plugin_examples/main_container/MainContainer.jsx +++ /dev/null @@ -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 ( -
-

1 Zipped Dev Plugin Count: {currentCountPluginState?.data?.count}

- -
- ); -}; \ No newline at end of file diff --git a/src-ui/plugins/plugin_examples/plugin_info.json b/src-ui/plugins/plugin_examples/plugin_info.json index 303f0ecb..f388a9cc 100644 --- a/src-ui/plugins/plugin_examples/plugin_info.json +++ b/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", diff --git a/src-ui/plugins/plugin_examples/store/store.js b/src-ui/plugins/plugin_examples/store/store.js index 9efd9dcf..40d80bb4 100644 --- a/src-ui/plugins/plugin_examples/store/store.js +++ b/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](); -}; \ No newline at end of file +}; + + +// StoreContext.js +import React, { createContext, useContext } from "react"; + +export const StoreContext = createContext(null); + +export const useStoreContext = () => { + return useContext(StoreContext); +}; diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/SubtitleSystemContainer.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.jsx similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/SubtitleSystemContainer.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.jsx diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/SubtitleSystemContainer.module.scss b/src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.module.scss similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/SubtitleSystemContainer.module.scss rename to src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.module.scss diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/_controllers/SubtitlesController.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/_controllers/SubtitlesController.jsx similarity index 86% rename from src-ui/app/main_page/main_section/subtitle_system_container/_controllers/SubtitlesController.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/_controllers/SubtitlesController.jsx index 720c3d28..53380205 100644 --- a/src-ui/app/main_page/main_section/subtitle_system_container/_controllers/SubtitlesController.jsx +++ b/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, diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/_logics/useSubtitles.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/_logics/useSubtitles.jsx similarity index 82% rename from src-ui/app/main_page/main_section/subtitle_system_container/_logics/useSubtitles.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/_logics/useSubtitles.jsx index 9ce1d626..fe0b6e3c 100644 --- a/src-ui/app/main_page/main_section/subtitle_system_container/_logics/useSubtitles.jsx +++ b/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) => { diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/_subtitles_utils.js b/src-ui/plugins/plugin_examples/subtitle_system_container/_subtitles_utils.js similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/_subtitles_utils.js rename to src-ui/plugins/plugin_examples/subtitle_system_container/_subtitles_utils.js diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/countdown_container/CountdownContainer.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.jsx similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/countdown_container/CountdownContainer.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.jsx diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/countdown_container/CountdownContainer.module.scss b/src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.module.scss similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/countdown_container/CountdownContainer.module.scss rename to src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.module.scss diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/input_file_container/InputFileContainer.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.jsx similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/input_file_container/InputFileContainer.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.jsx diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/input_file_container/InputFileContainer.module.scss b/src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.module.scss similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/input_file_container/InputFileContainer.module.scss rename to src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.module.scss diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss b/src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss rename to src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/play_control_container/PlayControlContainer.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.jsx similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/play_control_container/PlayControlContainer.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.jsx diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/play_control_container/PlayControlContainer.module.scss b/src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.module.scss similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/play_control_container/PlayControlContainer.module.scss rename to src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.module.scss diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx b/src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx rename to src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx diff --git a/src-ui/app/main_page/main_section/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss b/src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss similarity index 100% rename from src-ui/app/main_page/main_section/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss rename to src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss diff --git a/src-ui/store.js b/src-ui/store.js index 410a3809..7e88792b 100644 --- a/src-ui/store.js +++ b/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 }); \ No newline at end of file +export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex"); \ No newline at end of file