feat: Add npm dependencies and update vendor paths
- 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
@@ -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
|
||||
@@ -0,0 +1,5 @@
|
||||
@if (!isset($disableBanners) || !$disableBanners)
|
||||
<div class="d-flex justify-content-center my-4">
|
||||
<ins data-revive-zoneid="2" data-revive-id="{{ env('REVIVE_ID') }}"></ins>
|
||||
</div>
|
||||
@endif
|
||||
@@ -0,0 +1,50 @@
|
||||
<?php
|
||||
$banners = [
|
||||
// ['ligterink-en-de-wit.jpg', 'https://www.ligterink-dewit.nl', 'Ligterink en De Wit']
|
||||
// ['websteen.gif', 'https://www.websteen.nl/?utm_source=websitenhgooi&utm_medium=banner&utm_campaign=branding', 'Websteen websites & online marketing']
|
||||
];
|
||||
|
||||
shuffle($banners);
|
||||
if(count($banners)):
|
||||
list($img, $url, $alt) = $banners[0];
|
||||
?>
|
||||
<div class="banner">
|
||||
<h4 class="box_header">Advertentie</h4>
|
||||
<p class='ad'>
|
||||
<a href="{{$url}}" target="_nhgooi_adbanner" class="ad_banner"><img src="/images/banners/{{$img}}" alt="{{$alt}}" title="{{$alt}}" /></a>
|
||||
</p>
|
||||
<p class='abnotice'></p>
|
||||
<p><a href="{{ route('adverteren') }}">Hier adverteren?</a></p>
|
||||
</div>
|
||||
<style>
|
||||
.banner {
|
||||
}
|
||||
.banner .ad {
|
||||
padding-top: 10px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.banner .ad img {
|
||||
width: 100%;
|
||||
}
|
||||
.banner p, .banner a {
|
||||
font-size: 90%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #3A3A3A;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(function() {
|
||||
if($('.ad').filter(':visible').length == 0 || $('.ad').height() == 0) {
|
||||
$('.abnotice').text("Wij zijn mede afhankelijk van advertentie-inkomsten om u gratis radio- en tv-uitzendingen en regionaal nieuws aan te kunnen bieden. Als u uw ad blocker uitschakelt, verschijnt hier een kleine onopvallende advertentie die ons helpt onze kosten te dekken.").show();
|
||||
setTimeout(function() { $('.banner').slideUp('slow'); }, 5000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
<?php
|
||||
endif;
|
||||
?>
|
||||
@@ -0,0 +1,57 @@
|
||||
|
||||
<?php
|
||||
if($data && count($data)):
|
||||
shuffle($data);
|
||||
$img = $data[0];
|
||||
?>
|
||||
<h4 class="page_margin_top box_header"><span class="fa fa-camera"></span> Beelden uit 't Gooi</h4>
|
||||
|
||||
<div class='featured' style='display: none;'>
|
||||
<p>
|
||||
<a href="{{ route('beelden') }}"><img src="images/logo.png" alt="{{$img->images[0]->title}}" title="{{$img->images[0]->title}}" /></a>
|
||||
<b>{{ $img->title }}</b>
|
||||
{{ $img->images[0]->title }}
|
||||
</p>
|
||||
</div>
|
||||
<p><a class="read_more" href="{{ route('beelden') }}" title="Bekijk meer beelden uit het Gooi"><span class="arrow"></span><span>Meer beelden</span></a></p>
|
||||
<div class="clearfix"></div>
|
||||
<p class='bouwmee'><a href="mailto:beelden@nhgooi.nl">Jouw foto hier? Mail naar beelden@nhgooi.nl!</a></p>
|
||||
|
||||
<style>
|
||||
.featured {
|
||||
padding-top: 10px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.featured img {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.featured p, .featured a {
|
||||
font-size: 90%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #3A3A3A;
|
||||
text-align: center;
|
||||
}
|
||||
a.bouwmee {
|
||||
color: #3333CC;
|
||||
}
|
||||
</style>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(function() {
|
||||
$('.featured').hide().attr('display', '');
|
||||
$('.featured img')
|
||||
.load(function() {
|
||||
$('.featured').slideDown();
|
||||
})
|
||||
.attr('src', '{{$imgBase . $img->images[0]->url}}');
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
<?php
|
||||
endif;
|
||||
?>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="box contact_box">
|
||||
<img class="logo-whatsapp" src="/images/logo-whatsapp.png"/>
|
||||
<h2>Contact met de redactie</h2>
|
||||
<p>Heb jij een tip voor onze streekredactie? Bel of app de tiplijn:
|
||||
<a href="tel:0356424774" target="_blank">035 - 64 24 774</a>, of stuur een
|
||||
<a href="mailto:info@nhgooi.nl">mail</a>.</p>
|
||||
<a class="read_more" href="{{url('contact')}}">Contactinformatie <i class="fa-solid fa-angle-right"></i></a>
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="latest_news_scrolling_list_container">
|
||||
<ul>
|
||||
<li class="category">Laatste nieuws:</li>
|
||||
<li class="left"><a href="#"></a></li>
|
||||
<li class="right"><a href="#"></a></li>
|
||||
<li class="posts">
|
||||
<ul class="latest_news_scrolling_list">
|
||||
@foreach($data as $item)
|
||||
<li>
|
||||
<a href="{{url($item->url)}}" title="{{$item->title}}">{{substr($item->title, 0, 60)}}{{strlen($item->title) < 60 ? "" : "..."}}</a>
|
||||
<span class="when">{{Formatter::relativeDate($item->published)}} {{$item->published->format('H:i')}}</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<ul class="list no_border spacing clearfix">
|
||||
@foreach($data as $podcast)
|
||||
<li class="bullet_style_2">
|
||||
<h5>
|
||||
<a href="{{route('gemist.fragment') . $podcast->url}}" title="{{$podcast->title}}" style="color: inherit;">{{$podcast->titleWithoutProgram()}}</a>
|
||||
</h5>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<?php
|
||||
if(!isset($MEDIAPLAYER_INCLUDED)):
|
||||
// Make sure mediaplayer JS is not applied more than once on a page.
|
||||
View::share('MEDIAPLAYER_INCLUDED', true);
|
||||
|
||||
function createVideoElement($url) {
|
||||
$type = "application/x-mpegurl";
|
||||
if(strpos($url, "youtube.com") !== false) { $type = "video/youtube"; }
|
||||
if(strpos($url, "youtu.be") !== false) { $type = "video/youtube"; }
|
||||
?>
|
||||
<video controls>
|
||||
<source src="{!!$url!!}" type="{!!$type!!}" />
|
||||
</video>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
@push('scripts')
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.5/mediaelement-and-player.min.js"></script>
|
||||
<script type="text/javascript" src="/js/mediaplayer_plugins.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var pluginPath = 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.5/';
|
||||
var features = ['playpause','skipback','jumpforward','current','progress','duration','volume','airplay','chromecast','fullscreen'];
|
||||
$("audio").mediaelementplayer({
|
||||
pluginPath: pluginPath,
|
||||
stretching: 'responsive',
|
||||
features: features,
|
||||
skipBackInterval: 15,
|
||||
jumpForwardInterval: 15,
|
||||
});
|
||||
$("video").mediaelementplayer({
|
||||
pluginPath: pluginPath,
|
||||
videoWidth: '100%',
|
||||
videoHeight: '100%',
|
||||
enableAutosize: true,
|
||||
features: features,
|
||||
skipBackInterval: 15,
|
||||
jumpForwardInterval: 15,
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.16/mediaelementplayer.css" />
|
||||
<link rel="stylesheet" href="/css/mediaplayer_plugins.min.css" />
|
||||
@endpush
|
||||
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,149 @@
|
||||
<?php $menu = array(
|
||||
"Radio" => array(
|
||||
"" => "/gids",
|
||||
"Luister live" => "/luister/live",
|
||||
"Kijk in de studio" => "/kijk/studio",
|
||||
"Regionieuws" => "/luister/regionieuws",
|
||||
"Programmagids" => "/gids",
|
||||
"Programma gemist" => "/gemist/programma",
|
||||
"Fragment gemist" => "/gemist/fragment"
|
||||
),
|
||||
// "Zondagsdienst" => "/kerkdienst"),
|
||||
"TV" => array(
|
||||
"" => "/kijk/live",
|
||||
"Kijk live" => "/kijk/live",
|
||||
"TV-programmering" => "/kijk/gids",
|
||||
),
|
||||
// "NHGOOI TV @ YouTube" => "https://www.youtube.com/channel/UC0qLwqmXiLoL5PrLlgB6B4Q"),
|
||||
// "Evenementen" => array(
|
||||
// "Debatten gemeenteraad" => "/debat"),
|
||||
// "24 uur Scherp de Zeis (4 december)" => "/programma/1030/scherp-zeis",
|
||||
// "Winterse 50 (25 december)" => "/programma/1080/winterse-50",
|
||||
// "Vroeger of Later Luisterlijst (2 januari)" => "/vol-luisterlijst"),
|
||||
"Podcasts" => array(
|
||||
"" => "/podcast",
|
||||
"NH Gooi Spreekuur" => "/podcast/1091/nh-gooi-spreekuur",
|
||||
"Gooise Mythes Ontrafeld" => "/podcast/1106/gooise-mythes-ontrafeld",
|
||||
"NH Gooi Wijsneuzen" => "/podcast/1098/nh-gooi-wijsneuzen",
|
||||
"Hilversum in de oorlog" => "/podcast/1097/hilversum-in-de-oorlog",
|
||||
),
|
||||
"Gemist" => "/gemist/programma",
|
||||
"Streekagenda" => "/agenda",
|
||||
"Over NH Gooi" => array(
|
||||
"" => "/contact",
|
||||
"Contact" => "/contact",
|
||||
"Redactie" => "/redactie",
|
||||
"Vacatures" => "/vacatures",
|
||||
"Klachtenregeling" => "/klachten",
|
||||
// "Rol en ambities lokale nieuwsvoorziening" => "/uploads/Eigen rol en ambities NH Gooi binnen de lokale nieuwsvoorziening.pdf",
|
||||
"Frequenties" => "/frequenties",
|
||||
"NH Gooi-app" => "/app"
|
||||
),
|
||||
"Adverteren" => "/adverteren"
|
||||
);
|
||||
?>
|
||||
<?php
|
||||
function isActive($link, $checksubmenus)
|
||||
{
|
||||
if (is_array($link)) {
|
||||
if (!$checksubmenus) {
|
||||
return false;
|
||||
}
|
||||
foreach ($link as $item => $link) {
|
||||
if (isActive($link, $checksubmenus)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($link == "/") {
|
||||
return $_SERVER["REQUEST_URI"] == "/" || $_SERVER["REQUEST_URI"] == "";
|
||||
}
|
||||
|
||||
return (substr($_SERVER["REQUEST_URI"], 0, strlen($link)) == $link);
|
||||
}
|
||||
|
||||
function buildMenu($menu, $ismobile)
|
||||
{
|
||||
$result = "";
|
||||
foreach ($menu as $title => $link) {
|
||||
if ($title == "") {
|
||||
continue;
|
||||
}
|
||||
$submenu = is_array($link);
|
||||
$isactive = isActive($link, !$ismobile);
|
||||
$icon = "";
|
||||
$isplayer = false;
|
||||
$isFile = false;
|
||||
$liClass = "";
|
||||
if (!$submenu && substr($link, 0, 8) == '/luister') {
|
||||
$icon = "fas fa-headphones";
|
||||
$isplayer = true;
|
||||
}
|
||||
if (!$submenu && $link == '/kijk/live') {
|
||||
$icon = "fas fa-tv";
|
||||
}
|
||||
if (!$submenu && $link == '/kijk/studio') {
|
||||
$liClass = "watch-studio";
|
||||
$icon = "fas fa-video";
|
||||
}
|
||||
if (!$submenu && substr($link, 0, 23) == 'https://www.youtube.com') {
|
||||
$icon = "fab fa-youtube";
|
||||
}
|
||||
if (!$submenu && substr($link, strlen($link) - 4, 4) == '.pdf') {
|
||||
$icon = "fas fa-file-pdf";
|
||||
$isFile = true;
|
||||
}
|
||||
|
||||
$submenulink = $submenu && isset($link[""]) ? $link[""] : "#";
|
||||
$target = substr($submenu ? $submenulink : $link, 0, 4) == "http" || $isFile ? "target='_blank'" : "";
|
||||
if ($icon) {
|
||||
$icon = "<span class='$icon'></span> ";
|
||||
} else {
|
||||
$icon = "";
|
||||
}
|
||||
$result .=
|
||||
"<li class=\"" . ($submenu ? "has_submenu" : "") . ($isactive ? " selected" : "") . ($liClass ? " $liClass" : "") . "\">
|
||||
<a href=\"" . ($submenu ? $submenulink : $link) . "\" class=\"" . ($isplayer ? "player" : "") . "\" title=\"{$title}\" {$target}>{$icon}{$title}</a>";
|
||||
if ($submenu) {
|
||||
$result .= "\t\t\t<ul class=\"submenu\">\n"
|
||||
. buildMenu($link, $ismobile)
|
||||
. "\t\t\t</ul>\n";
|
||||
}
|
||||
$result .= "\t\t</li>\n";
|
||||
}
|
||||
|
||||
return $result;
|
||||
}
|
||||
?>
|
||||
<nav class="d-none d-md-flex">
|
||||
<div></div>
|
||||
<ul class="menu d-none d-lg-block">
|
||||
<li class="{{isActive('/', false) || isActive('/nieuws', false) ? "selected" : ""}}">
|
||||
<a href="/" title="Nieuws">Nieuws</a>
|
||||
</li>
|
||||
{!! buildMenu($menu, false) !!}
|
||||
<li></li>
|
||||
</ul>
|
||||
<div></div>
|
||||
</nav>
|
||||
<div class="mobile_menu_container">
|
||||
<nav id="mobile_menu_nav">
|
||||
<ul class="mobile-menu">
|
||||
<li class="logo_close_button">
|
||||
<div class="logo">
|
||||
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg"/></a>
|
||||
</div>
|
||||
<div class="mobile_close_menu_button">
|
||||
<a href="javascript:void(0)"><i class="fa-solid fa-xmark"></i></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="{{isActive('/', false) || isActive('/nieuws', false) ? "selected" : ""}}">
|
||||
<a href="/" title="Nieuws">Nieuws</a>
|
||||
</li>
|
||||
{!! buildMenu($menu, true) !!}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<div data-tabs>
|
||||
<div class="tabs">
|
||||
<h4 data-tab-content-id="tab_gooi_radio_live" class="box_header flex-grow-1 {{$headerClass ?? ''}} active"><span>NH Gooi Radio live</span>
|
||||
</h4>
|
||||
<h4 data-tab-content-id="tab_gooi_tv_live" class="box_header {{$headerClass ?? ''}}">
|
||||
<span>NH Gooi TV live</span></h4>
|
||||
</div>
|
||||
<div id="tab_gooi_radio_live" class="tab_content active box radio_box mb-0">
|
||||
<img class="logo-radio" src="/images/logo-NHGooi-radio.svg"/>
|
||||
@include('widgets.nustraks')
|
||||
<a class="btn" href="/gids">Programmering</a>
|
||||
<a class="btn" href="/contact">Contact de studio</a>
|
||||
<a class="btn player" href="/luister/live">Luister live</a>
|
||||
<a class="btn" href="/kijk/live">Kijk live mee</a>
|
||||
</div>
|
||||
<div id="tab_gooi_tv_live" class="tab_content box radio_box mb-0">
|
||||
<img class="logo-radio" src="/images/logo-NHGooi-televisie.svg"/>
|
||||
<h2 class="post_title">Live</h2>
|
||||
@include('widgets.mediaplayer')
|
||||
<div width="50%" style="width:100%; position:relative; margin-left: -15px;">
|
||||
<video width="640" height="360" style="max-width:100%; height:100%;" preload="auto" controls="controls">
|
||||
<source src="https://rrr.sz.xlcdn.com/?account=nhnieuws&file=nhgooi&type=live&service=wowza&protocol=https&output=playlist.m3u8" type="application/x-mpegURL" />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,93 @@
|
||||
@php($program = $data[0])
|
||||
<h2 class="post_title"><a href="{{route('programma') . $program->url}}" title="{{$program->name}}">{{$program->name}}</a></h2>
|
||||
<span class="post_date">
|
||||
<i class="fa-regular fa-clock"></i> {{$program->start->format('H:i')}} - {{$program->end->format('H:i')}}
|
||||
</span>
|
||||
@if($program->tagline)
|
||||
<p>{{$program->tagline}}</p>
|
||||
@endif
|
||||
<p class="now-playing-header-small">
|
||||
<strong>Nu:</strong>
|
||||
<span class="artist"></span> -
|
||||
<span class="title"></span>
|
||||
</p>
|
||||
<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
|
||||
<script>
|
||||
function updateOnAir() {
|
||||
$.ajax({
|
||||
url: '{{route('onair')}}',
|
||||
success: function (data) {
|
||||
$(document).trigger('onAirUpdated', data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
updateOnAir();
|
||||
var onAirUpdater = setInterval(updateOnAir, 5000);
|
||||
var $nowPlaying = {
|
||||
container: $(".now-playing-header-small").hide(),
|
||||
title: $(".now-playing-header-small .title"),
|
||||
artist: $(".now-playing-header-small .artist"),
|
||||
};
|
||||
$(document).on('onAirUpdated', function (evt, data) {
|
||||
var title = data.current ? data.current.title : '';
|
||||
var artist = data.current ? data.current.artist : '';
|
||||
if (!data.current) {
|
||||
// title = data.program.name;
|
||||
// artist = data.program.tagline;
|
||||
$nowPlaying.container.slideUp();
|
||||
return;
|
||||
}
|
||||
$nowPlaying.title.text(title).attr('title', title);
|
||||
$nowPlaying.artist.text(artist).attr('title', artist);
|
||||
$nowPlaying.container.slideDown();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h3 class="post_title">Daarna:</h3>
|
||||
<div class="podcast_items">
|
||||
<ul class="">
|
||||
@php($startDay = $program->start->format('d'))
|
||||
@foreach($data as $program)
|
||||
@php($isToday = $program->start->format('d') == $startDay)
|
||||
@if($loop->index > 5)
|
||||
@break
|
||||
@elseif(($loop->index >= 3) && $program->nonstop)
|
||||
@break
|
||||
@elseif(!$loop->first)
|
||||
<li class="post" style="margin-bottom: 0">
|
||||
<div class="sub_title">
|
||||
<a class="program_name" href="{{route('programma') . $program->url}}" title="{{$program->name}}"><strong>{{$program->name}}</strong></a>
|
||||
<span class="post_date" title="{{Formatter::relativeDate($program->start)}} om {{$program->start->format('H:i')}}.">
|
||||
<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($program->start)}} om {{$program->start->format('H:i')}}.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@if(isset($recent))
|
||||
<h3 class="post_title">Net gemist?</h3>
|
||||
<div class="podcast_items">
|
||||
<ul class="">
|
||||
<li class="post" style="margin-bottom: 0">
|
||||
<div class="sub_title">
|
||||
<a class="program_name" href="{{route('programma') . $recent->url}}" title="{{$recent->name}}"><strong>{{$recent->name}}</strong></a>
|
||||
<span class="post_date" title="{{Formatter::relativeDate($recent->start)}} om {{$recent->start->format('H:i')}}.">
|
||||
<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($recent->start)}} om {{$recent->start->format('H:i')}}.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@php($duration = $recent->end->diff($recent->start)->h)
|
||||
<a class="action_button player" style="margin-top: 0;" href="{{route('luister.programma') . '/' . $recent->start->format('Y/m/d/H') . '/' . $duration}}" title="Luister live">
|
||||
<span class="fa fa-history"></span>
|
||||
<span>Terugluisteren</span>
|
||||
</a>
|
||||
</p>
|
||||
@endif
|
||||
@@ -0,0 +1,56 @@
|
||||
<div class="content pt-2">
|
||||
@if($podcast == null)
|
||||
<span>De podcast kan helaas (op dit moment) niet weergegeven worden.</span>
|
||||
@else
|
||||
@include('widgets/mediaplayer')
|
||||
|
||||
@if ($podcast)
|
||||
<?php
|
||||
$audioUrl = url($apiUrl . 'podcast/download' . $podcast->url . "?auth=" . $podcast->auth);
|
||||
$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
|
||||
?>
|
||||
<div class="announcement p-3">
|
||||
<h3 class="page_title">{{$podcast->title}}</h3>
|
||||
<div class="post_body">
|
||||
<ul class="post_details clearfix">
|
||||
<li class="detail date">
|
||||
<i class="fa-regular fa-clock"></i>
|
||||
{{ Formatter::relativeDate($podcast->created) }}
|
||||
</li>
|
||||
@if($podcast->program)
|
||||
<li class="detail author">
|
||||
<a href="{{ route('programma') . $podcast->program->url }}">{{ $podcast->program->name }}</a>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
|
||||
<audio controls>
|
||||
<source src="{{$audioUrl}}" type="audio/mpeg" />
|
||||
</audio>
|
||||
<div class="clearfix">
|
||||
<a class="action_button btn" href="{{$audioUrl}}" title="Download dit fragment als MP3">
|
||||
<span>Download fragment</span>
|
||||
</a>
|
||||
<a class="action_button btn player" href="{{$popoutUrl}}">
|
||||
<span>Luister in nieuw venster</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row content_box clearfix mt-2">
|
||||
@if($podcast->image)
|
||||
<div class="col-3">
|
||||
<img src="{{$imgBase . $podcast->image->url}}" title="{{$podcast->image->title}}"
|
||||
style="display: block; width: 100%;" />
|
||||
<div class="sentence">
|
||||
<span class="text">{{$podcast->image->title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div class="col excerpt">{!!$podcast->content!!}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div class="vertical_carousel_container clearfix">
|
||||
<ul class="blog small vertical_carousel autoplay-1 scroll-1 navigation-1 easing-easeInOutQuint duration-750">
|
||||
@foreach($data as $news)
|
||||
<li class="post">
|
||||
<a href="{{url($news->url)}}" title="{{$news->title}}">
|
||||
<img src="{{$news->images && count($news->images) ? $imgBase . $news->images[0]->url : '/images/noimage.png'}}" alt="{{$news->title}}">
|
||||
</a>
|
||||
<div class="post_content">
|
||||
<h5>
|
||||
<a href="{{url($news->url)}}" title="{{$news->title}}">{{$news->title}}</a>
|
||||
</h5>
|
||||
<ul class="post_details simple">
|
||||
<li class="category"><a href="{{route('nieuws.regio', $news->region->slug)}}" title="{{$news->region->title}}">{{$news->region->title}}</a></li>
|
||||
<li class="date">
|
||||
{{Formatter::relativeDate($news->published)}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<h2 title="De meest bekeken nieuwsberichten van de afgelopen 60 dagen">Populair nieuws</h2>
|
||||
@foreach($news as $newsItem)
|
||||
<p class="details">
|
||||
<span class="fa fa-angle-right"></span>
|
||||
<a href="{{url($newsItem->url)}}">{{$newsItem->title}}</a><br />
|
||||
<time class="post-date">{{$newsItem->region->title}}, {{Formatter::fullDate($newsItem->published, 'd m y?')}}</span>
|
||||
</p>
|
||||
@endforeach
|
||||
@@ -0,0 +1,10 @@
|
||||
<ul class="list no_border spacing clearfix">
|
||||
@foreach($data as $item)
|
||||
@if($loop->index >= 5) @break @endif
|
||||
<li class="bullet_style_2">
|
||||
<h5>
|
||||
<a href="{{url($item->url)}}" title="{{$item->title}}" style="color: inherit;">{{$item->title}}</a>
|
||||
</h5>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@@ -0,0 +1,43 @@
|
||||
<div class="row page_margin_top">
|
||||
<div class="share_box clearfix">
|
||||
<label>Share:</label>
|
||||
<ul class="social_icons clearfix">
|
||||
<li>
|
||||
<a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="#" class="social_icon skype">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="#" class="social_icon instagram">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="#" class="social_icon pinterest">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user