documentation
Backend Development
PluginEnv
When plugins are loaded in Cider the constructor()
in the plugin class is passed a PluginEnv
object, this object contains:
app
- The Electron appstore
- Electron Storeutils
- Cider utilswin
- The renderer windowdir
- Path to the plugin directorydirName
- Plugin directory name
Load a front end plugin
To load a front end plugin (typically named index.frontend.js
) from index.js
PluginEnv.utils.loadJSFrontend(path: string)
is used.
Example: PluginEnv.utils.loadJSFrontend(path.join(PluginEnv.dir, "index.frontend.js"))
utils
getPath(path: string)
- Returns path used by Cider by name.srcPath
- src/ folderrendererPath
- renderer/ foldermainPath
- main/ pathresourcePath
- resources/ pathi18nPath
- i18n/ pathciderCache
- Cider cache paththemes
- Themesplugins
- Plugins
getLocale(language: string, key: string)
Fetches the i18n locale for the given language.
getStoreValue(key: string)
Gets a store value
getStore()
Returns store
setStoreValue(key: string, value: any)
Sets a store value
getWindow()
Gets the renderer window
loadJSFrontend(path: string)
Loads a JavaScript file into the renderer, this is the main method of loading front end plugins.
playback.
- Controls playback.play()
- Play.pause()
- Pause.playPause()
- Toggles playback.next()
- Next track in queue.previous()
- Previous track in queue
Built in events
Cider plugins support these methods by default, however more can be made with the use of ipcMain and ipcRenderer
onReady(win)
- (Required) Executes when the back end is readyonRendererReady()
- Executes when the renderer has finished loading (app.init())onPlaybackStateDidChange(attributes)
- Executes when playback state changes, passes song attributesonNowPlayingItemDidChange(attributes)
- Executes when song changes, passes song attributesonBeforeQuit
- Executes before Cider quits
Frontend Development
Renderer Helpers
CiderFrontAPI.*
AddMenuEntry(entry: CiderFrontAPI.Objects.MenuEntry)
- Add an entry to the Cider menuStyleSheets
Add(href: string) - Load a
.less
stylesheet from a URL
Registering a Vue component as a page
Registering a Vue component is done by adding plugin.
to the front of the component name. Pages can then be loaded with app.appRoute("plugin/<component name without plugin.>")
Accessing static resources from the renderer
Additional resources in the plugins such as images and other files can be accessed with methods like fetch()
from ./plugins/:packageName/:file
this resolves to http://localhost:{port}/plugins/:packageName/:file
:packageName
refers to the name
property in package.json for the plugin.
Importing Custom Styhesheets
Example:
CiderFrontAPI.StyleSheets.Add("./plugins/:packageName/mystylesheet.less")
:packageName
refers to the name
property in package.json for the plugin.
CiderAudio
Note: CiderAudio requires Advanced Audio Functionality to be enabled in the app settings.
Cider features a custom audio stack, available in the renderer.
CiderAudio.context
- Primary AudioContextCiderAudio.source
- Audio Source
CiderAudio contains the following nodes:
CiderAudio.audioNodes.gainNode
- Main gain nodeCiderAudio.audioNodes.spatialNode
- Used by audio spatializationCiderAudio.audioNodes.audioBands
- Used by EQCiderAudio.audioNodes.vibrantbassNode
- Used to deliver vibrant bass functionalityCiderAudio.audioNodes.llpw
- Used by Cider Adrenaline Processor (CAP)CiderAudio.audioNodes.analogWarmth
- Used by Analog Warmth
audio.js explained
https://github.com/ciderapp/Cider/blob/develop/src/renderer/audio/audio.js
CiderAudio initializes with CiderAudio.hierarchical_loading()
Inside the loading process, all audioNodes are cleared and re-initialized and chained based on what the user has enabled. The designed hierarchy for loading audio functions is as follows:
h1 item
- AudioBand (final output)h2 item 1
- AudioBands vibrantbass_h2_1() (vibrant bass node)h2 item 2
- llpw_h2_2() (CiderAudio.audioNodes.llpw)h2 item 3
- analogWarmth_h2_3() (CiderAudio.audioNodes.analogWarmth)Spatial Node is always the last node in the chain
Publishing to GitHub
Once you have completed your plugin its time to publish! Create a new repository for the plugin and upload the files.
To have the theme indexed into Cider's built in plugin explorer, add cidermusicplugin
as a topic on the repository.
Plugins from GitHub in Cider will display the repos README.md file within the Explore Plugins on GitHub page, so be sure to include some screenshots showing off your plugins.
Resources
Last updated