webvlc

Introduces a directory for extending Butterchurn visualizations beyond the built-in package, and adds a Visualizer submenu under the Playback menu for switching presets on the fly. — New directory containing preset JSON files and a barrel that exports them as a keyed object. Includes "Royal - Mashup (257)" as a sample preset. Adding presets = drop JSON + register in index. — Shared module that merges custom presets with built-in butterchurn-presets and exports the sorted preset list ( and ), used by both Toolbar and VideoViewport. — Added a "Visualizer ▸" submenu item under the Playback menu. Clicking it opens a scrollable list of all available presets. Selecting a preset dispatches a action to switch to it immediately with a smooth blend transition. — Added state and / actions for cross-component preset switching. — Refactored to import from the shared presets module. Added a that watches for requested preset changes from the Playback menu and loads them. — Added submenu styling (flyout panel, scrollable list, active item highlight). Custom presets participate in all existing preset navigation (next/prev, random, cycling, dropdown selector, and the new Playback submenu) with zero additional wiring. Playback menu with Visualizer submenu !Playback menu with Visualizer submenu Expanded preset list !Visualizer submenu expanded Original prompt This section details on the original issue you should resolve Add support for custom Butterchurn presets This application uses Butterchurn https://github.com/jberg/butterchurn for music visualizations (https://github.com/addyosmani/webvlc/blob/main/package.json#L13) in src/components/VideoViewport.jsx. I would like to introduce a custom-presets directory to the repo which allows me to extend the current Butterchurn presets implementation with further custom presets. To demonstrate that this works, you should support merging loaded custom-presets with the existing butterchurn-presets such that the custom-presets are loaded first. I want you to implement a custom butterchurn preset that is in that directory as a start. below is a butterchurn preset for Royal Mashup you can use as your sample in the custom-presets directory $$$ Royal - Mashup (257).json ```json {"version":2,"baseVals":{"rating":5,"gammaadj":1,"decay":0.9,"echo_zoom":1.104,"echo_alpha":0.5,"wave_mode":7,"additivewave":1,"modwavealphabyvolume":1,"wave_brighten":0,"brighten":1,"darken":1,"wave_a":0.001,"wave_scale":1.286,"wave_smoothing":0.63,"modwavealphastart":0.71,"modwavealphaend":1.3,"warpscale":1.331,"zoom":0.99951,"rot":0.2599,"cx":0.32,"cy":0.29,"warp":0.01105,"wave_r":0.65,"wave_g":0.65,"wave_b":0.65,"ob_size":0.5,"ob_r":0.01,"ib_size":0.26,"mv_a":0},"shapes":[{"baseVals":{"enabled":1,"textured":1,"rad":1.97883,"g":1,"b":1,"r2":1,"b2":1,"a2":1,"border_a":0},"init_eqs_str":"","frame_eqs_str":"a.tex_zoom=div(1,a.rad);a.a=.7;a.a2=a.a;","init_eqs_eel":"","frame_eqs_eel":"tex_zoom = 1/rad;\n\na = .7;\na2 = a;"},{"baseVals":{"sides":54,"x":0.15,"y":0.39,"rad":0.04084,"r":0,"b":1,"r2":1,"g2":0,"enabled":0},"init_eqs_str":"","frame_eqs_str":"","init_eqs_eel":"","frame_eqs_eel":""},{"baseVals":{"enabled":0},"init_eqs_str":"","frame_eqs_str":"","init_eqs_eel":"","frame_eqs_eel":""},{"baseVals":{"enabled":0},"init_eqs_str":"","frame_eqs_str":"","init_eqs_eel":"","frame_eqs_eel":""}],"waves":{"baseVals":{"enabled":1,"additive":1,"r":0,"g":0,"a":0.05},"init_eqs_str":"a.sw=0;a.t5=0;a.t1=0;a.it=0;a.q1=0;a.q5=0;a.ya=0;a.xd=0;a.t8=0;a.xc=0;a.t3=0;a.t6=0;a.ti=0;a.sa=0;a.yb=0;a.yd=0;a.q4=0;a.t7=0;a.xb=0;a.t2=0;a.xa=0;a.t4=0;a.yc=0;a.t1=.2+.0006rand(1001);a.t2=.2+.0006rand(1001);a.t3=.2+.0006rand(1001);a.t4=.2+.0006rand(1001);a.t5=.2+.0006rand(1001);a.t6=.2+.0006rand(1001);a.t7=.2+.0006rand(1001);a.t8=.2+.0006rand(1001);","frame_eqs_str":"","point_eqs_str":"a.ti=a.q1;a.xa=.25+.25Math.sin(a.tia.t1);a.xb=.25+.25Math.sin(a.tia.t2);a.xc=.25+.25Math.sin(a.tia.t3);a.xd=.25+.25Math.sin(a.tia.t4);a.ya=.25+.25Math.sin(a.tia.t5);a.yb=.25+.25Math.sin(a.tia.t6);a.yc=.25+.25Math.sin(a.tia.t7);a.yd=.25+.25Math.sin(a.tia.t8);a.it=(a.it+1)above(a.sample,0);a.sw=(1-a.sw)*above(a.sample,0);a.sa=1-a.sample;a.x=.00001 Fixes addyosmani/webvlc#15 💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey.

This application uses Butterchurn https://github.com/jberg/butterchurn for music visualizations (https://github.com/addyosmani/webvlc/blob/main/package.json#L13) in src/components/VideoViewport.jsx. I would like to introduce a custom-presets directory to the repo which allows me to extend the current Butterchurn presets implementation with further custom presets. To demonstrate that this works, you should support merging loaded custom-presets with the existing butterchurn-presets such that the custom-presets are loaded first. I want you to implement a custom butterchurn preset that is in that directory as a start. below is a butterchurn preset for Royal Mashup you can use as your sample in the custom-presets directory $$$ Royal - Mashup (257).json

Adds M3U playlist export via Media → Save Playlist menu item and shortcut. Also fixes standalone M3U/PLS file opening so users can open playlist files directly. Changes — produces valid M3U with header and entries; triggers browser download — "Save Playlist" menu item in Media dropdown, disabled when playlist is empty — / saves playlist; plain still toggles shuffle — Handle standalone M3U/PLS file opening: immediately populates the playlist with track names. When media files are later added (via Open Directory, drag & drop, or Add to Playlist), unresolved entries are automatically matched by filename and become playable — Enhanced reducer to resolve placeholder entries by matching incoming files against existing playlist entry names, preserving M3U order — Guard against playlist entries without file blobs, showing a helpful message guiding users to add media files M3U output example Round-trips correctly through the existing parser — users can save a playlist, then reopen the alongside their media files to restore order. M3U open support Opening a standalone M3U or PLS file via "Open File(s)..." immediately populates the playlist with the track names from the playlist file — no extra dialogs or directory picker. Since browsers cannot access files by filesystem path, the actual media data is loaded in a second step: 1. Open Directory, drag & drop, or Add to Playlist — incoming media files are automatically matched against unresolved playlist entries by filename, replacing placeholders in-place and preserving M3U order. Extra files not in the M3U are appended at the end. 2. Multi-select M3U + media files together in the Open File(s) dialog — tracks load immediately in M3U order in a single step. Original prompt This section details on the original issue you should resolve* Add 'Save Playlist' support to the Media menu Similar to VLC, add an option to 'Save Playlist' with similar functionality to VLC. It should save the output as a valid M3U playlist. We should also make sure that 'open files' also supports opening M3U in addition to individual files. ## Comments on the Issue (you are @copilot in this section) Fixes addyosmani/webvlc#13 💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.