Skip to content

Plex viewer with keyboard controls built with electron and vite

License

Notifications You must be signed in to change notification settings

ztoben/plex-viewer

Repository files navigation

plex-viewer

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

screenshot 1

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

simple player mode 1

simple player mode 2

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 version][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 version][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 version][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 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:

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.

About

Plex viewer with keyboard controls built with electron and vite

Resources

License

Stars

Watchers

Forks

Packages

No packages published