Giter Club home page Giter Club logo

vibinui's Introduction

vibinui

vibinui is a browser-based user interface for StreamMagic audio streamers. vibinui also requires installation of the vibin backend.

Vibin was developed for my specific music streaming needs. It should however work for anyone with a StreamMagic audio streamer, but has only been tested with the following:

  • Cambridge Audio CXNv2 (StreamMagic) streamer.
  • Local media stored on a NAS running Asset UPnP (optional).
  • A Hegel amplifier for volume/mute control (optional).
  • AirPlay from a MacBook.
  • Running the UI in Chrome on a MacBook and iPad.

Vibin is mostly an experiment. It is not intended to be a complete replacement for the official StreamMagic apps. Vibin lacks features like browsing internet radio (although it can play internet radio presets configured in the StreamMagic app), and has no support for TIDAL or Qobuz. Nor is Vibin intended to replace general-purpose solutions like Plexamp, Audirvana, Roon, etc.

Watch the overview video (4m:15s) to see Vibin's features in action. (Does not show some features, like Hegel amplifier controls and all-media searching).

โ€‚
Vibin โ€‚

Installation

See the Vibin backend documentation for complete information on how to install both the backend and this UI.

In summary:

  1. Install the vibin backend first.
  2. Use the backend's commandline interface to download and install the UI application onto the backend.

The backend will then be able to serve the UI to a browser running on any other device on the same network (a laptop, iPad, etc) via a URL hosted on the backend, such as http://192.168.1.100/ui.

The backend expects to be installed on an always-on machine on the network (such as a server or Raspberry Pi), to ensure it's always available to any browser running on any other device on the network. This is not strictly required however, and it's possible to run everything on (say) a single laptop.

Developers

See the Developers README for more information.

Features

Note: Some features will only be available when a supported local media server or amplifier are detected.

Vibin's features include:

  • Streamer transport controls.
    • Play, pause, next track, previous track, shuffle, repeat, etc.
  • Amplifier volume and mute controls.
  • Streamer and amplifier source selection.
  • Showing what's currently playing on the streamer.
    • Track details.
    • Album art.
    • Lyrics.
    • Waveform.
    • Related links to external sites.
  • Browsing local media.
    • Viewing Artists, Albums, and Tracks.
    • Filtering.
    • Sorting.
    • Viewing as art cards or in a table.
    • Searching by title, date, genre, etc.
    • Searching for lyrics.
    • Searching across all media at once (Albums, Tracks, Presets, Favorites).
  • Playlists.
    • Viewing and interacting with the active streamer Playlist.
    • Saving and switching between stored Playlists.
  • Presets (like internet radio).
  • Favorites.

Additional features

  • Display settings are remembered between browser sessions.
  • Supports keyboard shortcuts for transport controls, lyrics display, volume/mute, etc.
  • Streamer changes made by other apps (like the StreamMagic app) will be automatically reflected in Vibin.
  • Multiple instances of the UI can be running on one or more devices at once. Changes made by one device will be automatically reflected on the other devices.
  • Can set a maximum amplifier volume.

Examples

Transport controls

Full streamer transport controls are available.

Streamer transport controls

Amplifier controls

Amplifier controls for volume and mute are available. Maximum amplifier volume can be set.

Currently-playing information

Vibin shows information on the currently-playing track. This works for both local media and AirPlay (although the waveform is not shown for AirPlay).

Lyrics

Lyrics are shown for the currently-playing track (when available).

Current track lyrics

Lyrics for the currently-playing track can be viewed from any screen in the application.

Current track lyrics modal

Lyrics from AirPlay source

Lyrics will also be shown for tracks not coming from local media (such as AirPlay).

Current track airplay

Waveform

A waveform is shown for tracks sourced from local media. The playhead position can be changed by dragging the playhead over the waveform image.

Current track waveform

Playlists

Vibin supports custom Playlist creation. Playlists can be saved for later use. The detailed Playlist view shows more information than the summary view.

Detailed view

Playlist detailed view

Summary view

Playlist summary view

Playlist entry actions

Various actions can be performed on each entry in the playlist.

Playlist management

Playlist names can be changed, and playlists can be removed.

Playlist manager

Browse local media

Local media (stored on a NAS) can be browsed by Artist, Album, and Track. Media browsing supports filtering.

View all albums

Albums

View albums as a tiny wall

The art size can be changed.

Albums tiny wall

View media as a table

Media can be viewed either as cards or in a table.

Albums as table

View artists

The Artists screen provides an artist-oriented display of albums and tracks.

Artists

Filter tracks by title

Media can be filtered by various fields, such as title, artist, genre, date, etc.

Tracks filtered by title

Filter tracks by lyrics

Tracks can be filtered by lyrics. The following shows tracks with lyrics containing the word "happy".

Tracks filtered by lyrics

Presets

Vibin supports playing of StreamMagic Presets, like internet radio stations.

Presets

Favorites

Albums and Tracks can be favorited.

Favorites

General features

Vibin supports additional features including all-media searches, filtering, art display settings, input switching, and more.

Search across all media at once

All media can be searched at once (Albums, Tracks, Presets, Favorites).

Media search

Media filtering

Media display can be filtered based on various metadata criteria.

Media display settings

Media can be displayed as either cards or tables, and can be sorted by metadata fields. Cards can have their sizing and spacing configured, and text details can be turned on and off. These settings can be configured differently for each screen and will be remembered between sessions.

Input switching

The streamer and amplifier input sources can be set.

Keyboard shortcuts

Application features can be triggered using keyboard shortcuts.

vibinui's People

Contributors

mjoblin avatar

Stargazers

 avatar

Watchers

 avatar

vibinui's Issues

"Cannot read properties of null (reading 'toLocaleUpperCase')" in Playlist.tsx

If my CXNv2 isn't on standby when I open vibinui, it just shows a black screen with the error Apologies, an unexpected error has occurred.

Vibinui does start successfully if the streamer is in standby when the page is loaded. If I then take the streamer out of standby (either using vibinui or the IR remote) vibinui immediately fails with the same error. I was able to successfully turn the streamer on via vibinui without crashing the UI and play/pause the music, but I can't repro that now.

Chrome's console reports a number of variations of the same error in Playlist.tsx:

ErrorBoundary.tsx:18 vibin error TypeError: Cannot read properties of null (reading 'toLocaleUpperCase')
    at Playlist.tsx:376:87
    at Array.map (<anonymous>)
    at M5 (Playlist.tsx:373:10)
    at Oi (react-dom.production.min.js:167:137)
    at Pl (react-dom.production.min.js:197:258)
    at Oc (react-dom.production.min.js:292:88)
    at ws (react-dom.production.min.js:280:389)
    at gs (react-dom.production.min.js:280:320)
    at ys (react-dom.production.min.js:280:180)
    at ss (react-dom.production.min.js:273:245)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.