plex-viewer

A simple electron app for viewing plex in it's own window.

Features

• Keyboard shortcuts
• Sticks on top and remembers window location
• Toggle-able window chrome for a cleaner look
• Media controls for Play/Pause/Skip/Back
• Simple player mode for condensed playback windows
• Quick aspect ratio switching from context menu (4:3 and 16:9)
• Automatically pause content on minimize
• Lock window position
• Change window opacity
• [OSX only] Show across all workspaces

Shortcuts

• Toggle minimize - Shift + Ctrl + X
• Toggle window frame (chrome) - Shift + Ctrl + Z
• Navigate back - Shift + Ctrl + ←
• Navigate forward - Shift + Ctrl + →
• Simple player mode - Shift + Ctrl + M

Todo

• Persistent settings
• Keyboard shortcut editor/viewer
• Keyboard shortcut for pause/play/mute
• Auto pause on minimize
• Hide/show top navigation
• Custom background colors
• Headphone controls

Features

Electron [][electron]

• Template use the latest electron version with all the latest security patches.
• The architecture of the application is built according to the security guids and best practices.
• The latest version of the [electron-builder] is used to compile the application.

Vite [][vite]

• [Vite] is used to bundle all source codes. This is an extremely fast packer that has a bunch of great features. You can learn more about how it is arranged in this video.
• Vite supports reading .env files. My template has a separate command to generate .d.ts file with type definition your environment variables.

Vite provides you with many useful features, such as: TypeScript, TSX/JSX, CSS/JSON Importing, CSS Modules, Web Assembly and much more.

See all Vite features.

Vue [][vue] (optional)

• By default, web pages are built using [Vue]. However, you can easily change it. Or do not use additional frameworks at all. (See React fork)
• Also, by default, the [vue-router] version [][vue-router] is used.
• Code formatting rules follow the latest Vue recommendations and best practices thanks to [eslint-plugin-vue].
• Installed Vue.js devtools beta with Vue 3 support.

See examples of web pages for different frameworks.

Continuous Integration

• The configured workflow for check the types for each push and PR.
• The configured workflow for check the code style for each push and PR.
• Automatic tests used [spectron]. Simple, automated test check:
  • Does the main window created and visible?
  • Is the main window not empty?
  • Is dev tools closed?

Continuous delivery

• Each time you push changes to the main branch, release workflow starts, which creates release draft.
  • The version is automatically set based on the current date in the format "yy.mm.dd".
  • Notes are automatically generated and added to the release draft.
  • Code signing supported. See compile job in release workflow.
• Auto-update is supported. After the release will be published, all client applications will download the new version and install updates silently.

How it works

The template required a minimum dependencies. Only Vite is used for building, nothing more.

Project Structure

The structure of this template is very similar to the structure of a monorepo.

The entire source code of the program is divided into three modules (packages) that are bundled each independently:

• packages/main Electron main script.
• packages/preload Used in BrowserWindow.webPreferences.preload. See Checklist: Security Recommendations.
• packages/renderer Electron web page.

Build web resources

Packages main and preload are built in library mode as it is a simple javascript. renderer package build as regular web app.

The build of web resources is performed in the scripts/build.js. Its analogue is a sequential call to vite build for each package.

Compile App

Next step is run packaging and compilation a ready for distribution Electron app for macOS, Windows and Linux with "auto update" support out of the box.

To do this, using the [electron-builder]:

• In npm script compile: This script is configured to compile the application as quickly as possible. It is not ready for distribution, is compiled only for the current platform and is used for debugging.
• In GitHub Action: The application is compiled for any platform and ready-to-distribute files are automatically added to the draft GitHub release.