diff --git a/.env.example b/.env.example index 1fe7dc2..7a33b2c 100644 --- a/.env.example +++ b/.env.example @@ -1,9 +1,12 @@ # This is an example of all the environment variables you can use to configure your build of tinysub. -# Keep in mind that VITE_* values are embedded in the build, so do not put anything secret in here! +# Keep in mind that these values are embedded in the build, so do not put anything secret in here! -VITE_TINYSUB_NAME= # e.g. setting to "Devin's Server" will appear as "Devin's Server / tinysub 2.20.20" in settings modal +VITE_TINYSUB_BASE_URL= # base path, see https://vite.dev/config/shared-options#base +VITE_TINYSUB_BUILD_TARGET= # build target, see https://vite.dev/config/build-options#build-target + +VITE_TINYSUB_NAME= # deployment name, e.g. "Devin's Server" appears as "Devin's Server / tinysub 2.20.20" in settings VITE_TINYSUB_SERVER= # prefilled server url -VITE_TINYSUB_SERVER_LOCK=false # hide server url input from user, preventing them from changing it +VITE_TINYSUB_SERVER_LOCK=false # hide server url input, preventing users from changing it # Please keep in mind that these username and password settings exist for demo servers to use. # Once again, these credentials will be embedded in the build. diff --git a/README.md b/README.md index d817602..24ccf8d 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,40 @@ # tinysub -_tinysub_ is a simple but full-featured web player for _OpenSubsonic compatible music servers_, such as [Navidrome](https://github.com/navidrome/navidrome) and [Gonic](https://github.com/sentriz/gonic). i don't really like Navidrome's web client for various reasons, and i wanted something akin to [Strawberry Music Player](https://www.strawberrymusicplayer.org) that i could run anywhere. +tinysub is a simple web-based audio player for [OpenSubsonic servers](https://opensubsonic.netlify.app/docs/#servers) (Navidrome, Gonic, Ampache, etc). it's written in Svelte, aiming to be very performant and lightweight while still offering all the features you'd expect. -it's written in Svelte, and aims to be very performant and lightweight (as much as a web app can be), while also having all of the typical features you'd expect. +for more information, see https://devins.page/tinysub. for discussion, use the issue tracker or feel free to join my [Discord](https://discord.gg/m5tUgaM3uK) :) -for more information, see https://devins.page/tinysub. +![screenshot of tinysub 2.0.0](./.static/screenshot.png) -for discussion, use the issue tracker or feel free to join my [Discord](https://discord.gg/m5tUgaM3uK) :) +## using -![screenshot of tinysub 2.0.0](./.static/screenshot.png) +you can use my hosted version of tinysub at [tinysub.devins.page](https://tinysub.devins.page). + +you will need to have access to an [OpenSubsonic server](https://opensubsonic.netlify.app/docs/#servers) to use this app of course, as it is an OpenSubsonic client, *not* a local music player. there exist many guides to get one set up. i personally use [Navidrome](https://www.navidrome.org). + +if you just want to try it out, you could try Navidrome's demo server! use `https://demo.navidrome.org` for the server url, and use `demo` for the username and password. + +tinysub is primarily tested on Chromium during development, but any other modern browser should work fine! tinysub's build target is [Baseline Widely Available](https://web-platform-dx.github.io/supported-browsers). if you have any browser-specific issues let me know. + +## deploying + +i always host the latest version of tinysub at [tinysub.devins.page](https://tinysub.devins.page), but you can host it yourself too! + +### the normal way + +tinysub is just a simple [Vite](https://vite.dev) project. to build it, run `npm install` and `npm run build`. the output will appear in `dist`. + +after building, simply serve the output with a web server like Caddy, Nginx, Apache, etc... **IMPORTANT:** [ensure your server is configured properly](https://vite-pwa-org.netlify.app/deployment) for the Vite PWA plugin, or else app updates may not work! + +if you would like to customize your build, such as adding a prefilled server URL, see `.env.example`. + +### the declarative way + +if you're using NixOS/nix-darwin/Nix, i also offer a very simple Nix package in this project's flake. + +[see this module in my personal flake](https://tangled.org/devins.page/flake/blob/main/hosts/nixos/bluepill-proxy/services/tinysub.nix) for an example using Caddy. this is the configuration of [tinysub.devins.page](https://tinysub.devins.page). -## faq +## frequently asked questions ### i can't log in! diff --git a/vite.config.ts b/vite.config.ts index 1a12a6c..5ffd4a1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,53 +1,59 @@ import { svelte } from "@sveltejs/vite-plugin-svelte"; -import { defineConfig } from "vite"; +import { defineConfig, loadEnv } from "vite"; import { VitePWA } from "vite-plugin-pwa"; -export default defineConfig({ - plugins: [ - svelte(), - VitePWA({ - workbox: { - globPatterns: ["**/*.{js,css,html,ico,png,svg}"], - }, - manifest: { - name: "tinysub", - short_name: "tinysub", - description: - "a simple but full-featured web player for OpenSubsonic compatible music servers", - display: "standalone", - display_override: ["window-controls-overlay"], - launch_handler: { - client_mode: "focus-existing", +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd(), "VITE_"); + + return { + base: env.VITE_TINYSUB_BASE_URL || "/", + plugins: [ + svelte(), + VitePWA({ + workbox: { + globPatterns: ["**/*.{js,css,html,ico,png,svg}"], }, - theme_color: "#000000", - icons: [ - { - src: "pwa-64x64.png", - sizes: "64x64", - type: "image/png", - }, - { - src: "pwa-192x192.png", - sizes: "192x192", - type: "image/png", - }, - { - src: "pwa-512x512.png", - sizes: "512x512", - type: "image/png", - purpose: "any", + manifest: { + name: "tinysub", + short_name: "tinysub", + description: + "a simple but full-featured web player for OpenSubsonic compatible music servers", + display: "standalone", + display_override: ["window-controls-overlay"], + launch_handler: { + client_mode: "focus-existing", }, - { - src: "maskable-icon-512x512.png", - sizes: "512x512", - type: "image/png", - purpose: "maskable", - }, - ], - }, - }), - ], - build: { - assetsInlineLimit: 0, - }, + theme_color: "#000000", + icons: [ + { + src: "pwa-64x64.png", + sizes: "64x64", + type: "image/png", + }, + { + src: "pwa-192x192.png", + sizes: "192x192", + type: "image/png", + }, + { + src: "pwa-512x512.png", + sizes: "512x512", + type: "image/png", + purpose: "any", + }, + { + src: "maskable-icon-512x512.png", + sizes: "512x512", + type: "image/png", + purpose: "maskable", + }, + ], + }, + }), + ], + build: { + assetsInlineLimit: 0, + target: env.VITE_TINYSUB_BUILD_TARGET || undefined, + }, + }; });