; WaveSurferSB Plugins Example
; Demonstrates Timeline, Minimap, and Spectrogram plugins
;
; This example loads wavesurfer.js core + all three plugins,
; creates a waveform with playback controls, and attaches each plugin.

IncludeFile "WaveSurferSB.sbi"

Global ws          ; WaveSurfer instance
Global wsTimeline  ; Timeline plugin instance
Global wsMinimap   ; Minimap plugin instance
Global wsSpectro   ; Spectrogram plugin instance

Enumeration
	#btnPlay
	#btnPause
	#btnStop
	#txtStatus
	#txtTime
EndEnumeration

; ---- Event Callbacks ----

Procedure OnReady(Duration.d)
	Debug "Audio ready! Duration: " + StrD(Duration, 2) + "s"
	SetGadgetText(#txtStatus, "Ready - " + StrD(Duration, 1) + "s")
EndProcedure

Procedure OnTimeUpdate(CurrentTime.d)
	SetGadgetText(#txtTime, StrD(CurrentTime, 1) + " / " + StrD(WaveSurferSB::GetDuration(ws), 1))
EndProcedure

Procedure OnFinish()
	SetGadgetText(#txtStatus, "Finished")
EndProcedure

; ---- Button Events ----

Procedure OnEvent()
	Select EventGadget()
		Case #btnPlay
			WaveSurferSB::Play(ws)
			SetGadgetText(#txtStatus, "Playing")
			
		Case #btnPause
			WaveSurferSB::Pause(ws)
			SetGadgetText(#txtStatus, "Paused")
			
		Case #btnStop
			WaveSurferSB::Stop(ws)
			SetGadgetText(#txtStatus, "Stopped")
	EndSelect
EndProcedure

; ---- Download Callback ----

Procedure OnDownloadComplete(Success)
	If Not Success
		Debug "ERROR: Failed to load wavesurfer.js or plugins"
		SetGadgetText(#txtStatus, "Load failed!")
		ProcedureReturn
	EndIf
	
	Debug "wavesurfer.js + plugins loaded successfully"
	
	; Create the main WaveSurfer instance with drag-to-seek and bar style
	ws = WaveSurferSB::Create("#waveform", WaveSurferSB::#DragToSeek | WaveSurferSB::#BarStyle)
	
	; ---- Attach Plugins ----
	
	; Timeline: time labels below the waveform (default container, 20px height)
	wsTimeline = WaveSurferSB::TimelineCreate(ws)
	
	; Minimap: overview navigation bar with colored overlay
	wsMinimap = WaveSurferSB::MinimapCreate(ws, 40, "#888", "#444", "rgba(100,100,200,0.3)")
	
	; Spectrogram: frequency visualization with labels
	; Renders into the #spectrogram div, 150px tall, with frequency labels
	wsSpectro = WaveSurferSB::SpectrogramCreate(ws, "#spectrogram", 150, #True)
	
	; ---- Advanced plugin example using _ex (JSON options) ----
	; If you need full control, use the _ex variants instead:
	;
	; wsTimeline = WaveSurferSB::TimelineCreate_ex(ws, ~"{\"height\": 25, \"timeInterval\": 5, \"primaryLabelInterval\": 10, \"insertPosition\": \"beforebegin\"}")
	;
	; wsSpectro = WaveSurferSB::SpectrogramCreate_ex(ws, ~"{\"container\": \"#spectrogram\", \"height\": 200, \"labels\": true, \"fftSamples\": 1024, \"scale\": \"mel\", \"colorMap\": \"roseus\"}")
	
	; ---- Bind Events ----
	WaveSurferSB::OnReady(ws, @OnReady())
	WaveSurferSB::OnTimeUpdate(ws, @OnTimeUpdate())
	WaveSurferSB::OnFinish(ws, @OnFinish())
	
	; ---- Load Audio ----
	; Replace with your audio URL
	WaveSurferSB::Load(ws, "WaveSurferTestMusic.ogg")
	
	SetGadgetText(#txtStatus, "Loading audio...")
EndProcedure

; ---- Main UI ----

Procedure Main()
	
	OpenWindow(0, 0, 0, 800, 600, "WaveSurferSB - Plugins Demo", #PB_Window_ScreenCentered)
	
	; Create HTML containers for the waveform and spectrogram
	; The waveform div holds the main wave + timeline + minimap (auto-appended)
	; The spectrogram div is separate so it renders below
	!var _wsRoot = document.body.firstElementChild || document.body;
	!_wsRoot.insertAdjacentHTML('afterbegin',
	!  '<div id="waveform" style="width:100%; margin:10px 0; border:1px solid #ccc; border-radius:4px; overflow:hidden;"></div>' +
	!  '<div id="spectrogram" style="width:100%; margin:10px 0;"></div>'
	!);
	
	; Transport controls
	ButtonGadget(#btnPlay,  10, 420, 80, 30, "Play")
	ButtonGadget(#btnPause, 100, 420, 80, 30, "Pause")
	ButtonGadget(#btnStop,  190, 420, 80, 30, "Stop")
	
	TextGadget(#txtStatus, 290, 425, 200, 25, "Loading...")
	TextGadget(#txtTime,   500, 425, 200, 25, "0.0 / 0.0")
	
	BindGadgetEvent(#btnPlay,  @OnEvent())
	BindGadgetEvent(#btnPause, @OnEvent())
	BindGadgetEvent(#btnStop,  @OnEvent())
	
	; Download core + all three plugins (loaded sequentially)
	; Plugin names must match the filenames on unpkg CDN
	WaveSurferSB::Download(@OnDownloadComplete(), "timeline,minimap,spectrogram")
	
EndProcedure

Main()

; IDE Options = SpiderBasic 3.20 (Windows - x86)
; CursorPosition = 94
; FirstLine = 57
; Folding = --
; iOSAppOrientation = 0
; AndroidAppCode = 0
; AndroidAppOrientation = 0
; EnableXP
; DPIAware
; CompileSourceDirectory