NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Add npm dependencies and update vendor paths

Browse Source 
- Add package.json dependencies: jquery, jquery-ui, moment, daterangepicker, wavesurfer.js, air-datepicker
- Create scripts/setup-vendor.js to copy npm packages to public/assets/vendor
- Update view templates to use vendor paths instead of old /js/ or CDN URLs
- Clean up legacy commented-out scripts in master layout
This commit is contained in:
Mischa Spelt
2026-08-25 16:17:01 +02:00
parent e070c9f374
commit 7b9674110e
8454 changed files with 11623 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views.all/widgets/audioplayer.blade.php
+176
View File
@@ -0,0 +1,176 @@
<?php $id = uniqid('player_'); ?>
<div class="audioplayer" id="{{ $id }}">
@if(!$isStream)
<div class="waveform">
<div class="time">0:00</div>
<div class="duration">0:00</div>
<div class="hover"></div>
</div>
@endif
<div class="volume-controls">
<button class="btn-toggle-mute" type="button" onclick="toggleMute()">
<span class="fa fa-volume-high"></span>
</button>
<input class="volume-slider" type="range" min="0" max="1" step="0.01" value="1"
onchange="setVolume( this.value )" />
</div>
<div class="audio-controls">
@if(!$isStream)
<button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(-60)">
<span class="fa fa-backward-fast"></span>
<label>-60 s</label>
</button>
<button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(-10)">
<span class="fa fa-backward-step"></span>
<label>-10 s</label>
</button>
@endif
<button class="btn btn-play" type="button" onclick="playPause()">
<span class="play-button-icon fa fa-play"></span>
<label class="play-button-label">Afspelen</label>
</button>
@if(!$isStream)
<button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(10)">
<span class="fa fa-forward-step"></span>
<label>+10 s</label>
</button>
<button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(60)">
<span class="fa fa-forward-fast"></span>
<label>+60 s</label>
</button>
@endif
</div>
</div>
@if($isStream)
<audio id="audio_{{ $id }}">
<source src="{{ $source }}" type="audio/mp3" />
</audio>
<script>
var player_{{ $id }};
setVolume = volume => player_{{ $id }}.volume = volume;
function toggleMute () {
var isMuted = !player_{{ $id }}.muted;
player_{{ $id }}.muted = isMuted;
if(isMuted) {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-xmark"></span>');
$('#{{ $id }} .volume-slider').attr('disabled', 'disabled');
} else {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-high"></span>');
$('#{{ $id }} .volume-slider').removeAttr('disabled');
}
}
pause = () => player_{{ $id }}.pause();
function playPause() {
var player = player_{{ $id }};
if (player.paused) {
player.play();
} else {
player.pause();
}
}
addEventListener("DOMContentLoaded", function() {
var player = document.getElementById( "audio_{{ $id }}");
player_{{ $id }} = player;
$(player_{{ $id }}).on('play', () => {
$('#{{ $id }} .play-button-icon').addClass('fa-pause').removeClass('fa-play');
$('#{{ $id }} .play-button-label').text('Pauzeren');
})
$(player_{{ $id }}).on('pause', () => {
$('#{{ $id }} .play-button-icon').addClass('fa-play').removeClass('fa-pause');
$('#{{ $id }} .play-button-label').text('Verder spelen');
});
});
</script>
@else
<script>
var wavesurfer_{{ $id }};
setVolume = volume => wavesurfer_{{ $id }}.setVolume( volume );
playPause = () => wavesurfer_{{ $id }}.playPause();
pause = () => wavesurfer_{{ $id }}.pause();
function toggleMute () {
var isMuted = !wavesurfer_{{ $id }}.getMuted();
wavesurfer_{{ $id }}.setMuted(isMuted);
if(isMuted) {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-xmark"></span>');
$('#{{ $id }} .volume-slider').attr('disabled', 'disabled');
} else {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-high"></span>');
$('#{{ $id }} .volume-slider').removeAttr('disabled');
}
}
addEventListener("DOMContentLoaded", function() {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
// Create the waveform
wavesurfer_{{ $id }} = WaveSurfer.create({
container: '#{{ $id }} .waveform',
waveColor: '#3A96EE',
progressColor: '#0118A1',
height: 50,
barWidth: 1,
@if(isset($lengte))
duration: {{ $lengte }},
@endif
@if($waveform)
peaks: {{ json_encode($waveform->data) }},
normalize: true,
@endif
url: '{{ $source }}',
});
// Play/pause on click
wavesurfer_{{ $id }}.on('click', () => {
wavesurfer_{{ $id }}.play();
})
wavesurfer_{{ $id }}.on('play', () => {
$('#{{ $id }} .play-button-icon').addClass('fa-pause').removeClass('fa-play');
$('#{{ $id }} .play-button-label').text('Pauzeren');
})
wavesurfer_{{ $id }}.on('pause', () => {
$('#{{ $id }} .play-button-icon').addClass('fa-play').removeClass('fa-pause');
$('#{{ $id }} .play-button-label').text('Verder spelen');
})
// Hover effect
{
const hover = document.querySelector('#{{ $id }} .hover')
const waveform = document.querySelector('#{{ $id }} .waveform')
waveform.addEventListener('pointermove', (e) => (hover.style.width = `${e.offsetX}px`))
}
// Current time & duration
{
const formatTime = (seconds) => {
const minutes = Math.floor(seconds / 60)
const secondsRemainder = Math.round(seconds) % 60
const paddedSeconds = `0${secondsRemainder}`.slice(-2)
return `${minutes}:${paddedSeconds}`
}
const timeEl = document.querySelector('#{{ $id }} .time')
const durationEl = document.querySelector('#{{ $id }} .duration')
wavesurfer_{{ $id }}.on('decode', (duration) => (durationEl.textContent = formatTime(duration)))
wavesurfer_{{ $id }}.on('timeupdate', (currentTime) => (timeEl.textContent = formatTime(currentTime)))
}
});
</script>
@endif