From 5681038c22979106d44e26f833873bb859d29fc2 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sat, 29 Mar 2025 16:22:00 +0900 Subject: [PATCH] [bugfix] Plugins(VRCT Subtitles as testing one): Apply styles by importing css file. --- .../_app_controllers/PluginsController.jsx | 2 ++ .../hotkeys_entry/HotkeysEntry.jsx | 2 +- .../setting_box/_components/slider/Slider.jsx | 2 +- .../SupportUsContainer.jsx | 2 +- .../setting_section/setting_box/vr/Vr.jsx | 2 +- .../version_label/VersionLabel.jsx | 2 +- .../SnackbarController.jsx | 2 +- .../common_components/checkbox/Checkbox.jsx | 2 +- src-ui/logics/configs/plugins/usePlugins.js | 22 +++++++++++++++++++ .../index.jsx | 19 ++++++++++++++-- .../plugin_info.json | 2 +- .../store/store.js | 0 .../SubtitleSystemContainer.jsx | 0 .../SubtitleSystemContainer.module.scss | 0 .../_controllers/SubtitlesController.jsx | 0 .../_logics/useSubtitles.jsx | 0 .../_subtitles_utils.js | 0 .../CountdownContainer.jsx | 0 .../CountdownContainer.module.scss | 0 .../InputFileContainer.jsx | 0 .../InputFileContainer.module.scss | 0 .../ModeSelectorContainer.jsx | 0 .../ModeSelectorContainer.module.scss | 0 .../PlayControlContainer.jsx | 2 +- .../PlayControlContainer.module.scss | 0 .../SubtitlesListContainer.jsx | 0 .../SubtitlesListContainer.module.scss | 0 src-ui/plugins/index.js | 4 ++-- 28 files changed, 52 insertions(+), 13 deletions(-) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/index.jsx (55%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/plugin_info.json (86%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/store/store.js (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/SubtitleSystemContainer.jsx (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/SubtitleSystemContainer.module.scss (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/_controllers/SubtitlesController.jsx (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/_logics/useSubtitles.jsx (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/_subtitles_utils.js (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/countdown_container/CountdownContainer.jsx (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/countdown_container/CountdownContainer.module.scss (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/input_file_container/InputFileContainer.jsx (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/input_file_container/InputFileContainer.module.scss (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/play_control_container/PlayControlContainer.jsx (94%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/play_control_container/PlayControlContainer.module.scss (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx (100%) rename src-ui/plugins/{plugin_examples => dev_plugin_subtitles}/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss (100%) diff --git a/src-ui/app/_app_controllers/PluginsController.jsx b/src-ui/app/_app_controllers/PluginsController.jsx index d6f97ab4..8689e2f0 100644 --- a/src-ui/app/_app_controllers/PluginsController.jsx +++ b/src-ui/app/_app_controllers/PluginsController.jsx @@ -1,8 +1,10 @@ import React, { useEffect, useRef } from "react"; import { usePlugins } from "@logics_configs"; +import clsx from "clsx"; if (typeof window !== "undefined") { window.React = React; + window.clsx = clsx; } export const PluginsController = ({ fetchPluginsHasRunRef }) => { diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx index 750095e0..4e9efb65 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx @@ -2,7 +2,7 @@ import styles from "./HotkeysEntry.module.scss"; import { _Entry } from "../_atoms/_entry/_Entry"; import { useState, useRef, useEffect } from "react"; import DeleteSvg from "@images/cancel.svg?react"; -import { clsx } from "clsx"; +import clsx from "clsx"; export const HotkeysEntry = (props) => { const [isAcceptingInput, setIsAcceptingInput] = useState(false); diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx index 07c70ff2..8f61d725 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx @@ -1,7 +1,7 @@ import React from "react"; import styles from "./Slider.module.scss"; import MUI_Slider from "@mui/material/Slider"; -import { clsx } from "clsx"; +import clsx from "clsx"; export const Slider = (props) => { return ( diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.jsx index 7c357a9f..1c305fe6 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.jsx @@ -3,7 +3,7 @@ import fanbox_logo from "@images/supporters/fanbox_logo.png"; import kofi_logo from "@images/supporters/kofi_logo.png"; import patreon_logo from "@images/supporters/patreon_logo.png"; import styles from "./SupportUsContainer.module.scss"; -import { clsx } from "clsx"; +import clsx from "clsx"; export const SupportUsContainer = () => { return ( diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx index e1197b22..06920712 100644 --- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { clsx } from "clsx"; +import clsx from "clsx"; import styles from "./Vr.module.scss"; import { ui_configs } from "@ui_configs"; import { Slider } from "../_components/"; diff --git a/src-ui/app/config_page/version_label/VersionLabel.jsx b/src-ui/app/config_page/version_label/VersionLabel.jsx index f6325165..be095e5c 100644 --- a/src-ui/app/config_page/version_label/VersionLabel.jsx +++ b/src-ui/app/config_page/version_label/VersionLabel.jsx @@ -1,6 +1,6 @@ import { useTranslation } from "react-i18next"; import { useState } from "react"; -import { clsx } from "clsx"; +import clsx from "clsx"; import styles from "./VersionLabel.module.scss"; import { useSoftwareVersion } from "@logics_configs"; diff --git a/src-ui/app/snackbar_controller/SnackbarController.jsx b/src-ui/app/snackbar_controller/SnackbarController.jsx index 0c116c09..0b7c9609 100644 --- a/src-ui/app/snackbar_controller/SnackbarController.jsx +++ b/src-ui/app/snackbar_controller/SnackbarController.jsx @@ -1,4 +1,4 @@ -import { clsx } from "clsx"; +import clsx from "clsx"; import Snackbar from "@mui/material/Snackbar"; import Slide from "@mui/material/Slide"; diff --git a/src-ui/common_components/checkbox/Checkbox.jsx b/src-ui/common_components/checkbox/Checkbox.jsx index b9cdd7d3..50ee51a9 100644 --- a/src-ui/common_components/checkbox/Checkbox.jsx +++ b/src-ui/common_components/checkbox/Checkbox.jsx @@ -1,4 +1,4 @@ -import { clsx } from "clsx"; +import clsx from "clsx"; import styles from "./Checkbox.module.scss"; export const Checkbox = ({ checkboxId, diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js index 9a801674..a2b7857f 100644 --- a/src-ui/logics/configs/plugins/usePlugins.js +++ b/src-ui/logics/configs/plugins/usePlugins.js @@ -59,6 +59,7 @@ export const usePlugins = () => { const asyncLoadPlugin = async (plugin_folder_relative_path) => { const init_path = "plugins/" + plugin_folder_relative_path + "/index.esm.js"; const plugin_info_path = "plugins/" + plugin_folder_relative_path + "/plugin_info.json"; + const plugin_css_path = "plugins/" + plugin_folder_relative_path + "/main.css"; try { const plugin_info_json = await readTextFile(plugin_info_path, { dir: BaseDirectory.Resource, recursive: true }); const plugin_info = JSON.parse(plugin_info_json); @@ -80,6 +81,8 @@ export const usePlugins = () => { if (plugin_module && plugin_module.init) { plugin_module.init(generatePluginContext(plugin_info)); } + await loadPluginCSS(plugin_css_path); + } catch (error) { console.error("Failed to load plugin from", plugin_folder_relative_path, error); } @@ -290,3 +293,22 @@ const removeImportStatements = (code) => { .filter(line => !line.match(/^import\s+.*['"]react['"]/)) .join("\n"); }; + +// import { readTextFile, BaseDirectory } from "@tauri-apps/api/fs"; + +const loadPluginCSS = async (plugin_css_path) => { + try { + // プラグインフォルダのルートにある main.css を読み込む + const css_content = await readTextFile(plugin_css_path, { dir: BaseDirectory.Resource }); + // style タグを作成して head に挿入する + const style_tag = document.createElement("style"); + style_tag.id = `plugin-css-${plugin_css_path.replace(/[^a-zA-Z0-9_-]/g, "")}`; + style_tag.textContent = css_content; + document.head.appendChild(style_tag); + console.log("Plugin CSS loaded for:", plugin_css_path); + } catch (error) { + console.error("Failed to load plugin CSS from", plugin_css_path, error); + } +}; + +export { loadPluginCSS }; diff --git a/src-ui/plugins/plugin_examples/index.jsx b/src-ui/plugins/dev_plugin_subtitles/index.jsx similarity index 55% rename from src-ui/plugins/plugin_examples/index.jsx rename to src-ui/plugins/dev_plugin_subtitles/index.jsx index 011c133d..2312d9d9 100644 --- a/src-ui/plugins/plugin_examples/index.jsx +++ b/src-ui/plugins/dev_plugin_subtitles/index.jsx @@ -1,11 +1,13 @@ import { initStore, StoreContext } from "./store/store.js"; import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSystemContainer"; -import { SubtitlesController } from "./subtitle_system_container/_controllers/subtitlesController.jsx"; +import { SubtitlesController } from "./subtitle_system_container/_controllers/SubtitlesController.jsx"; export const init = (plugin_context) => { initStore(plugin_context.createAtomWithHook); const { logic_configs } = plugin_context; + loadPluginCSS("./main.css"); + const EntryComponents = () => { return ( @@ -19,4 +21,17 @@ export const init = (plugin_context) => { plugin_context.registerComponent(EntryComponents); }; -export default init; \ No newline at end of file +export default init; + + +// CSS を動的に読み込む関数 +const loadPluginCSS = (cssUrl) => { + if (typeof document === "undefined") return; + // すでに読み込まれているかチェック + if (document.getElementById("plugin-main-css")) return; + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = cssUrl; + link.id = "plugin-main-css"; + document.head.appendChild(link); +}; \ No newline at end of file diff --git a/src-ui/plugins/plugin_examples/plugin_info.json b/src-ui/plugins/dev_plugin_subtitles/plugin_info.json similarity index 86% rename from src-ui/plugins/plugin_examples/plugin_info.json rename to src-ui/plugins/dev_plugin_subtitles/plugin_info.json index f388a9cc..3bb37720 100644 --- a/src-ui/plugins/plugin_examples/plugin_info.json +++ b/src-ui/plugins/dev_plugin_subtitles/plugin_info.json @@ -3,7 +3,7 @@ "plugin_id": "vrct_plugin_subtitles", "asset_name": "vrct_plugin_subtitles.zip", "location": "main_section", - "plugin_version": "0.0.1", + "plugin_version": "0.0.0", "min_supported_vrct_version": "3.0.4", "max_supported_vrct_version": "3.0.6" } \ No newline at end of file diff --git a/src-ui/plugins/plugin_examples/store/store.js b/src-ui/plugins/dev_plugin_subtitles/store/store.js similarity index 100% rename from src-ui/plugins/plugin_examples/store/store.js rename to src-ui/plugins/dev_plugin_subtitles/store/store.js diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.jsx similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.jsx diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.module.scss b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.module.scss similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/SubtitleSystemContainer.module.scss rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.module.scss diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/_controllers/SubtitlesController.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/_controllers/SubtitlesController.jsx similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/_controllers/SubtitlesController.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/_controllers/SubtitlesController.jsx diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/_logics/useSubtitles.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/_logics/useSubtitles.jsx similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/_logics/useSubtitles.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/_logics/useSubtitles.jsx diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/_subtitles_utils.js b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/_subtitles_utils.js similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/_subtitles_utils.js rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/_subtitles_utils.js diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/countdown_container/CountdownContainer.jsx similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/countdown_container/CountdownContainer.jsx diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.module.scss b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/countdown_container/CountdownContainer.module.scss similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/countdown_container/CountdownContainer.module.scss rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/countdown_container/CountdownContainer.module.scss diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/input_file_container/InputFileContainer.jsx similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/input_file_container/InputFileContainer.jsx diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.module.scss b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/input_file_container/InputFileContainer.module.scss similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/input_file_container/InputFileContainer.module.scss rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/input_file_container/InputFileContainer.module.scss diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/mode_selector_container/ModeSelectorContainer.jsx diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/mode_selector_container/ModeSelectorContainer.module.scss diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/play_control_container/PlayControlContainer.jsx similarity index 94% rename from src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/play_control_container/PlayControlContainer.jsx index 0e4fdbeb..05e45e01 100644 --- a/src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.jsx +++ b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/play_control_container/PlayControlContainer.jsx @@ -1,7 +1,7 @@ // import React, { useState, useRef, useEffect } from "react"; import styles from "./PlayControlContainer.module.scss"; import { useSubtitles } from "../_logics/useSubtitles"; -import { clsx } from "clsx"; +import clsx from "clsx"; export const PlayControlContainer = () => { const { diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.module.scss b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/play_control_container/PlayControlContainer.module.scss similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/play_control_container/PlayControlContainer.module.scss rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/play_control_container/PlayControlContainer.module.scss diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.jsx diff --git a/src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss similarity index 100% rename from src-ui/plugins/plugin_examples/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss rename to src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/subtitles_list_container/SubtitlesListContainer.module.scss diff --git a/src-ui/plugins/index.js b/src-ui/plugins/index.js index 010c3ff0..f92cb86b 100644 --- a/src-ui/plugins/index.js +++ b/src-ui/plugins/index.js @@ -1,5 +1,5 @@ -import plugin_index_1 from "./plugin_examples/index.jsx"; -import plugin_info_1 from "./plugin_examples/plugin_info.json"; +import plugin_index_1 from "./dev_plugin_subtitles/index.jsx"; +import plugin_info_1 from "./dev_plugin_subtitles/plugin_info.json"; export const dev_plugins = [ {