📦 MediaMatrix

🚀 Установка и запуск

Запуск из исходного кода

• Убедитесь, что установлен Node.js (версия 14+).
• Клонируйте репозиторий или распакуйте архив с исходниками.
• Установите зависимости: npm install
• Запустите в режиме разработки: npm start

Сборка исполняемого файла

npm run dist

Готовые установщики появятся в папке dist/.

✨ Основные возможности

• Установка плагинов из файла, по ссылке или прямым вводом кода.
• Встроенный магазин с каталогом и автоматической проверкой обновлений.
• Управление плагинами: включение/отключение, удаление, настройки.
• Система уведомлений с историей.
• Настраиваемый интерфейс: темы оформления, видимость элементов панели, порядок меню.
• Карусель плагинов на главной для быстрого доступа.
• Экспорт/импорт всех данных.
• Встроенный Express-сервер для раздачи статики.
• Сворачивание в трей и управление из системного лотка.

📘 Руководство пользователя

🏠 Главная страница и карусель

На главной отображается горизонтальная карусель, содержащая пункты меню, добавленные плагинами (кроме стандартных «Главная», «Магазин», «Плагины», «Настройки»). Клик по карточке открывает соответствующую страницу. Карусель можно скрыть в настройках.

🛒 Магазин плагинов

• Поиск — фильтрация по названию, описанию, автору.
• Фильтр по категориям — автоматически заполняется из загруженных плагинов.
• Карточка плагина — иконка, название, версия, автор, краткое описание. Если плагин установлен — кнопка «Настройки».
• Детальный просмотр — клик по карточке открывает модальное окно с полным описанием, скриншотом и кнопкой установки.
• Обновление магазина — кнопка «Обновить» перезагружает список из источника.

🔌 Управление плагинами

На странице «Плагины» для каждого плагина доступны:

• Переключатель включения/отключения.
• Кнопка «Настройки» — открывает окно с настройками плагина, возможностью редактировать название, описание, версию и код.
• Кнопка обновления (если доступна новая версия из магазина).
• Кнопка удаления.

Статистика вверху страницы: общее количество, активные, доступно в магазине.

Установка нового плагина

Кнопка «Установить» открывает модальное окно с тремя вкладками:

• Файл — выбрать локальный .js файл. Автоматический анализ метаданных.
• Ссылка — указать URL на .js файл, нажать «Загрузить» для предпросмотра.
• Код — вставить код плагина вручную, кнопка «Распознать метаданные».

При необходимости можно заполнить название, описание и версию вручную.

🔔 Уведомления

Всплывающие уведомления появляются справа вверху. История доступна по клику на иконку колокольчика (хранится до 50 записей).

🧩 Разработка плагинов

Формат плагина

Плагин — JavaScript-файл, который экспортирует функцию, принимающую объект pluginAPI. Метаданные указываются в блоке комментариев /** ... */.

/**
 * @name Мой плагин
 * @version 1.0.0
 * @description Пример плагина
 * @author Ваше имя
 * @settings [{"id":"apiKey","label":"API ключ","type":"text"}]
 */

(function(pluginAPI) {
    // код плагина
})(pluginAPI);

Метаданные плагина

Тег	Описание
@name	Название плагина
@version	Версия (строка)
@description	Краткое описание
@author	Автор
@settings	JSON-массив с описанием настроек

Настройки плагина (формат)

[{"id": "apiKey","label": "API ключ","type": "password","placeholder": "Введите ключ","hint": "Получите ключ на сайте"}{"id": "enableLogging","label": "Логирование","type": "switch","default": true}]

Внимание! Весь формат настроек плагина пишется в одну строку.

Поддерживаемые типы: text, password, url, textarea, switch (или checkbox), select (с полем options).

Пример плагина

/**
 * @name Hello World
 * @version 1.0.0
 * @description Добавляет страницу с приветствием.
 * @author John Doe
 * @settings [{"id":"greeting","label":"Текст","type":"text","default":"Привет, мир!"}]
 */

(function(api) {
  const settings = api.getSettings();
  api.addMenuItem('hello-page', 'fas fa-smile', 'Приветствие');
  api.addPage('hello-page', `<h1>${settings.greeting}</h1><p>Страница плагина.</p>`);
  api.showNotification('Плагин загружен', 'success');
})(pluginAPI);

⚙️ API для плагинов

Плагин получает объект pluginAPI со следующими методами:

Метод	Описание
showNotification(message, type)	type: 'success' (по умолч.), 'info', 'error'.
getSettings()	Возвращает объект текущих настроек.
saveSettings(settings)	Сохраняет настройки (слияние).
addMenuItem(id, icon, label)	Добавляет пункт в боковое меню. icon — класс FontAwesome (например "fas fa-star").
removeMenuItem(id)	Удаляет пункт меню.
addPage(id, content)	Добавляет страницу с HTML-содержимым.
removePage(id)	Удаляет страницу.
updatePageContent(id, content)	Обновляет содержимое страницы.
navigateTo(pageId)	Переходит на страницу.
getStorePlugins()	Возвращает массив плагинов из магазина.
installFromStore(pluginId)	Устанавливает плагин из магазина.
checkForUpdates()	Проверяет обновления для установленных плагинов.
updatePlugin(pluginId)	Обновляет конкретный плагин.

🛠️ Настройки приложения

Общие настройки (localStorage)

• notifications — уведомления.
• autoStart — автозапуск плагинов.
• saveLogs — зарезервировано.
• showCarousel — показывать карусель на главной.
• panel — объект с видимостью элементов верхней панели.

Настройки меню (порядок пунктов)

Сохраняются как массив идентификаторов страниц в localStorage.menuOrder. Изменяются drag-and-drop в разделе «Настройки меню».

Настройки магазина

• autoUpdate — автоматическая проверка обновлений.
• storeUrl — URL JSON-файла со списком плагинов.

Настройки сервера (для разработчиков)

Хранятся в config.json в папке пользовательских данных приложения.

• port — порт (по умолч. 3000).
• cors — включить CORS.
• webSecurity — отключение политики same-origin в Electron.

Управление данными

Экспорт в JSON, импорт из файла, полная очистка (сброс к умолчанию).

💻 Electron и системная интеграция

Управление окном

Через window.electronAPI (доступно только в Electron-версии):

• reloadWindow()
• minimizeWindow()
• maximizeWindow()
• closeWindow() (скрывает в трей, а не закрывает)
• isMaximized()
• onUpdateMaximize(callback)

Трей (системный лоток)

При запуске появляется значок. Контекстное меню: «Открыть», «Перезагрузить приложение», «Выход». При закрытии окна оно скрывается в трей.

Контекстное меню

Правая кнопка мыши открывает меню с действиями: обновить, навигация, копировать/вставить, перезапустить приложение, выход.

Сервер Express

Встроенный сервер раздаёт статические файлы из корня проекта. Доступен по адресу http://localhost:порт.

🏗️ Техническая архитектура

Структура файлов

/
├── main.js                 # главный процесс Electron
├── preload.js              # мост для безопасного API
├── package.json
├── index.html
├── styles.css
├── engine/                 # рендер-скрипты
│   ├── electron.js
│   ├── main.js
│   ├── navigation.js
│   ├── notifications.js
│   ├── plugins.js
│   ├── settings.js
│   ├── state.js
│   ├── ui.js
│   └── utils.js
├── component/              # компоненты
│   ├── carousel.js
│   ├── menu-settings.js
│   └── store.js
└── ...

Рендер-процесс

Чистый JS без фреймворков. Состояние в глобальных переменных, синхронизация с localStorage. Основные функции: renderPlugins(), renderCarousel(), filterStorePlugins().

Главный процесс

Создание окна, трей, IPC-обработчики, запуск Express-сервера.

Хранилище

• localStorage — плагины, темы, настройки, история уведомлений.
• config.json в userData — настройки сервера.

📦 Сборка и распространение

Требования

Node.js 14+, npm/yarn.

Конфигурация electron-builder (из package.json)

"build": {
  "appId": "com.mediamatrix.app",
  "productName": "MediaMatrix",
  "directories": { "output": "dist" },
  "win": { "target": "nsis", "icon": "build/icon.ico" },
  "mac": { "target": "dmg", "icon": "build/icon.icns" },
  "linux": { "target": "AppImage", "icon": "build/icon.png" }
}

Для сборки: npm run dist.

❓ Часто задаваемые вопросы

---