Merge pull request 'Fix: "Attempt to read property \"news\" on null" error' (#14) from feature-news-date-filter into dev

Reviewed-on: #14

app/Http/Controllers/CalendarController.php

@@ -10,7 +10,7 @@ class CalendarController extends Controller
     {
         parent::registerView($request, 'agenda', $id);
         $apiResult = $this->API('agenda/item/' . (int)$id);
-        $calendarEvent = new \Model\CalendarEvent($apiResult);
+        $calendarEvent = new \Model\CalendarEvent($apiResult->news);
 
         return view('calendarevent', array_merge($this->getSidebareData(), ['event' => $calendarEvent, 'metadata' => $calendarEvent->metadata]));
     }

app/Http/Controllers/Controller.php

@@ -21,7 +21,7 @@ class Controller extends BaseController
     {
         $data = json_decode(Storage::disk('local')->get($file));
         foreach ($path as $subobject) {
-            $data = $data->$subobject;
+            $data = $data->$subobject ?? [];
 	    }
         $items = [];
         foreach ($data as $item_data) {
@@ -88,7 +88,7 @@ class Controller extends BaseController
                     $this->getDataFromFileAndConvert('laatste_podcasts.json', ['podcasts'], '\Model\Podcast'));
         });
 
-        View::share('disableBanners', env('DISABLE_BANNERS', true));
+        View::share('disableBanners', env('DISABLE_BANNERS', false));
     }
 
     protected function registerView(Request $request, $type, $id)
@@ -120,8 +120,9 @@ class Controller extends BaseController
                              . 'X-User-Agent: ' . request()->server('HTTP_USER_AGENT') . "\r\n"
             ]
         ];
-
-        return json_decode(file_get_contents($this->API_URL . $url, false, stream_context_create($arrContextOptions)));
+//\dump($http_response_header);
+	    $result = @file_get_contents($this->API_URL . $url, false, stream_context_create($arrContextOptions));
+	    return $result ? json_decode($result) : null;
     }
 
     protected function checkAPI($url)

app/Http/Controllers/NewsController.php

@@ -17,16 +17,19 @@ class NewsController extends Controller
     public function show(Request $request, $id)
     {
         parent::registerView($request, 'nieuws', $id);
-        $apiResult = $this->API('nieuws/bericht/' . $id);
+        $preview = "";
+        if(request()->get('preview', null) != null) {
+            $preview = "?preview=" . request()->get('preview');
+        }
+        $apiResult = $this->API('nieuws/bericht/' . $id . $preview);
         $newsItem = new \Model\NewsItem($apiResult->news);
 
         switch ($apiResult->version) {
             case 1:
 	        if (!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
-                return view('newsitem', ['news' => $newsItem, 'metadata' => $newsItem->metadata]);
-                break;
 
 	    case 2:
+		    if(isset($apiResult->source->article)) {
                 $source = $apiResult->source->article;
                 $newsItem->published = self::TimestampToDateTime($source->created);
                 $newsItem->edited = self::TimestampToDateTime($source->updated);
@@ -34,10 +37,10 @@ class NewsController extends Controller
                 $newsItem->images = null; // Images will be embedded
                 $newsItem->video = null; // Videos will be embedded
 		        $newsItem->content = $source->blocks;
-
-
-
-                return view('newsitem', array_merge($this->getSidebareData(), ['news' => $newsItem, 'metadata' => $newsItem->metadata, 'searchURL' => 'nieuws/zoeken']));
+		    } elseif(isset($apiResult->source->blocks)) {
+			    $newsItem->content = $apiResult->source->blocks;
+		    }
+            return view('newsitem', array_merge($this->getSidebareData(), ['type' => $apiResult->type, 'news' => $newsItem, 'metadata' => $newsItem->metadata, 'searchURL' => 'nieuws/zoeken']));
         }
     }
 
@@ -138,6 +141,9 @@ class NewsController extends Controller
             $total = 5;
         }
         $page = (int)$request->get('pagina', 1);
+        if ($url == 'overzicht' && $request->get('dateStart', null) && $request->get('dateEnd', null)) {
+            $url = 'datum/' . $request->get('dateStart', null) . '/' . $request->get('dateEnd', null);
+        }
         $apiResult = $this->API('nieuws/' . $url . '?pagina=' . (int)max(1, $page) . ($total ? '&aantal=' . $total : ''));
         $news = [];
         foreach ($apiResult->news as $newsItem) {
@@ -186,11 +192,15 @@ class NewsController extends Controller
 
     public function regionieuws()
     {
+	$data = $this->API('nieuws/regionieuws.json');
         return view('listen', [
-            'source' => $this->API_URL . 'nieuws/regionieuws',
+            'source' => $this->API_URL . 'nieuws/regionieuws.mp3',
             'title' => 'Regionieuws',
             'content' => 'het laatste nieuws uit de regio',
             'isStream' => false,
-            'canDownload' => true]);
+	    'canDownload' => true,
+	    'lengte' => $data->length * 0.25,
+	    'waveform' => $data
+	]);
     }
 }

app/Http/Controllers/RadioController.php

@@ -50,6 +50,9 @@ class RadioController extends Controller
     public function program($id)
     {
 	$apiResult = $this->API('programma/details/' . (int)$id);
+	if($apiResult == null) {
+		return abort(404);
+	}
         return view('radioprogram', ['program' => new \Model\Program($apiResult)]);
     }
 

app/Http/Controllers/StreamController.php

@@ -14,6 +14,8 @@ class StreamController extends Controller
         return view('listen', [
             'source' => self::$STREAM_URL . 'mp3live',
             'title' => 'Luister live',
+            'lengte' => 0,
+            'waveform' => null,
             'content' => 'de live-uitzending van NH Gooi.',
             'isStream' => true ]);
     }
@@ -53,6 +55,8 @@ class StreamController extends Controller
             'source' => $this->API_URL . 'podcast/stream/' . $apiResult->url,
             'title' => $podcast->title,
             'content' => $podcast->title,
+            'lengte' => $podcast->duration / 1000,
+            'waveform' => $podcast->waveform,
             'isStream' => false,
             'canDownload' => $this->API_URL . 'podcast/download/' . $apiResult->url ]);
     }
@@ -61,6 +65,11 @@ class StreamController extends Controller
         $date = (new \DateTimeImmutable())->setDate($year, $month, $day)->setTime($hour, 0, 0);
         $current = $date->add(\DateInterval::createFromDateString($offset . ' hours'));                
 
+        $programma = $this->API("programma/details/" . $current->Format("Y/m/d/H"));
+        if(!$programma->is_beschikbaar) {
+            return view('listen', ['notAvailable' => true]);
+        }
+
         $hours = [];
         for($i = 0; $i < $duration; $i++) {
           $other = $date->add(\DateInterval::createFromDateString($i . ' hours'));
@@ -72,7 +81,9 @@ class StreamController extends Controller
             'source' => $this->API_URL . 'programma/stream/' . $current->format('Y/m/d/H'),
             'tabs' => $hours,
             'title' => 'Uitzending terugluisteren',
-            'content' => 'de uitzending van ' . $current->format('d-m-Y, H') . ':00 uur',
+            'lengte' => $programma->waveform->length,
+            'waveform' => $programma->waveform,
+            'content' => $programma->programma->name . ' van ' . $current->format('d-m-Y, H') . ':00 uur',
             'isStream' => false,
             'canDownload' => false ]);
     }

public/css/style.css

@@ -162,6 +162,16 @@ div.pp_default .pp_close:hover {
   list-style: none;
 }
 
+.ad-prefix {
+  width: 100%;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: center;
+  color: #666;
+}
+
 .header {
   height: 111px;
 }
@@ -172,10 +182,11 @@ div.pp_default .pp_close:hover {
 .header .logo img {
   height: 95px;
 }
-.header .advertisement {
+.header ins[data-revive-zoneid] {
   float: right;
   width: 728px;
   height: 90px;
+  margin-top: 10px;
 }
 
 @media (max-width: 1170px) {
@@ -190,7 +201,7 @@ div.pp_default .pp_close:hover {
   .header .logo {
     float: none;
   }
-  .header .advertisement {
+  .header ins[data-revive-zoneid] {
     float: none;
   }
 }
@@ -778,6 +789,11 @@ div.pp_default .pp_close:hover {
   color: #fff;
 }
 
+.article-iframe {
+  width: 100%;
+  aspect-ratio: 1;
+}
+
 .box_header {
   border-bottom: 1px solid #efefef;
   padding-right: 20px;
@@ -1151,6 +1167,16 @@ div.pp_default .pp_close:hover {
   white-space: nowrap;
 }
 
+@media (max-width: 576px) {
+  ins[data-revive-zoneid] img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+.homepage-body-banners {
+  margin-top: -4rem;
+}
+
 .news .blog .post {
   height: 115px;
 }
@@ -1204,6 +1230,19 @@ div.pp_default .pp_close:hover {
   font-size: 30px;
 }
 
+.box.featured .sentence, .post_container .post_body .sentence {
+  font-size: 12px;
+  font-style: italic;
+  line-height: 1.3;
+  text-align: right;
+  color: #585858;
+  display: block;
+  width: 100%;
+}
+.box.featured .sentence span, .post_container .post_body .sentence span {
+  padding: 0 5px;
+}
+
 .post_container {
   max-width: 1170px;
   margin: 0 auto;
@@ -1231,20 +1270,6 @@ div.pp_default .pp_close:hover {
 .post_container .post_body h3 {
   font-size: 15px;
 }
-.post_container .post_body .sentence,
-.box.featured .sentence {
-  font-size: 12px;
-  font-style: italic;
-  line-height: 1.3;
-  text-align: right;
-  color: #585858;
-  display: block;
-  width: 100%;
-}
-.post_container .post_body .sentence span,
-.box.featured .sentence span {
-  padding: 0 5px;
-}
 .post_container .post_body blockquote {
   border-left: 3px solid #5ba8f4;
   margin-left: 0;
@@ -1262,6 +1287,9 @@ div.pp_default .pp_close:hover {
   line-height: 3.17;
   color: #585858;
 }
+.post_container .post_body div.text {
+  margin-bottom: 20px;
+}
 .post_container .post_body .post_details {
   margin: 0;
   padding: 0;
@@ -1309,19 +1337,7 @@ div.pp_default .pp_close:hover {
   color: #ED1C24;
 }
 
-.post_tags {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  height: 31px;
-  margin: 20px 0;
-}
-.post_tags li {
-  float: left;
-  margin-right: 10px;
-}
-.post_tags li a,
-#schedule .onair {
+#schedule .onair, .post_tags li a {
   display: block;
   width: 4rem;
   padding: 6px 15px 7px;
@@ -1336,18 +1352,36 @@ div.pp_default .pp_close:hover {
   text-transform: uppercase;
 }
 
-#schedule a {
-  text-decoration: none;
+.post_tags {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  height: 31px;
+  margin: 20px 0;
+}
+.post_tags li {
+  float: left;
+  margin-right: 10px;
 }
 @keyframes tilt-shaking {
-    0% { transform: rotate(0deg); }
-   25% { transform: rotate(5deg); }
-   50% { transform: rotate(0deg); }
-   75% { transform: rotate(-5deg); }
-  100% { transform: rotate(0deg); }
+  0% {
+    transform: rotate(0deg);
   }
-.onair {
-  animation: tilt-shaking 1s linear infinite;
+  25% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  75% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+#schedule a {
+  text-decoration: none;
 }
 #schedule .program-title {
   font-family: Montserrat, serif;
@@ -1387,6 +1421,9 @@ div.pp_default .pp_close:hover {
 #schedule .no-results span, #schedule .loading span {
   margin-right: 10px;
 }
+#schedule .onair {
+  animation: tilt-shaking 1s linear infinite;
+}
 
 .page_container {
   max-width: 1170px;
@@ -1476,6 +1513,90 @@ div.pp_default .pp_close:hover {
   margin: 10px 20px 0 0;
 }
 
+.podcast-player .content {
+  border: solid 1px #333;
+  border-radius: 5px;
+  padding: 0.4rem;
+}
+
+.audioplayer .waveform {
+  cursor: pointer;
+  position: relative;
+}
+.audioplayer .hover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  pointer-events: none;
+  height: 100%;
+  width: 0;
+  mix-blend-mode: overlay;
+  background: rgba(255, 255, 255, 0.5);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.audioplayer .waveform:hover .hover {
+  opacity: 1;
+}
+.audioplayer .time,
+.audioplayer .duration {
+  position: absolute;
+  z-index: 11;
+  top: 50%;
+  margin-top: -1px;
+  transform: translateY(-50%);
+  font-size: 11px;
+  background: rgba(0, 0, 0, 0.75);
+  padding: 2px;
+  color: #ddd;
+}
+.audioplayer .time {
+  left: 0;
+}
+.audioplayer .duration {
+  right: 0;
+}
+.audioplayer .audio-controls {
+  width: 100%;
+  justify-content: center;
+  display: flex;
+}
+.audioplayer .audio-controls .btn {
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-transform: none;
+}
+@media (max-width: 720px) {
+  .audioplayer .audio-controls .btn label {
+    display: none;
+  }
+}
+.audioplayer .audio-controls .btn.btn-play {
+  flex: 50% 1 0;
+}
+.audioplayer .volume-controls {
+  display: flex;
+}
+.audioplayer .volume-controls .volume-slider {
+  flex: 100% 1 1;
+}
+.audioplayer .audio-controls .btn,
+.audioplayer .volume-controls .btn-toggle-mute {
+  flex: 100px 1 1;
+  padding: 10px 0 10px 0;
+  background: #5ba8f4;
+  border-radius: 5px;
+  border-color: solid 1px #0f259d;
+  color: white;
+  font-family: Nunito, serif;
+  text-align: center;
+  text-decoration: none;
+}
+
 .footer_container {
   font-family: Montserrat, serif;
   font-size: 14px;
@@ -1663,10 +1784,4 @@ a, a:hover, a:active {
   }
 }
 
-.podcast-player .content {
-	border: solid 1px #333;
-	border-radius: 5px;
-	padding: 0.4rem;
-}
-
 /*# sourceMappingURL=style.css.map */

public/images/icons/calendar.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m40.873 54.653h72.749v-36.653a12 12 0 0 1 24 0v36.653h106.378v-36.653a12 12 0 0 1 24 0v36.653h106.378v-36.653a12 12 0 0 1 24 0v36.653h72.749a28.958 28.958 0 0 1 28.873 28.873v81.25h-488v-81.25a28.958 28.958 0 0 1 28.873-28.873zm72.749 0v36.653a12 12 0 0 0 24 0v-36.653zm130.378 0v36.653a12 12 0 0 0 24 0v-36.653zm130.378 0v36.653a12 12 0 0 0 24 0v-36.653zm-85.24 186.469a12 12 0 0 1 16.969 16.968l-55.5 55.5a12 12 0 0 1 -16.969 0l-27.748-27.748a12 12 0 0 1 16.969-16.969l19.264 19.264 47.012-47.012zm-148.879 0a12 12 0 0 1 16.968 16.968l-55.5 55.5a12 12 0 0 1 -16.969 0l-27.744-27.751a12 12 0 0 1 16.969-16.969l19.264 19.264zm223 124.551h83.241a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.243a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.247v31.5h59.243v-31.5zm-220.124-24h83.245a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.247a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.247v31.5h59.245v-31.5zm-220.125-24h83.245a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.245a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.245v31.5h59.245zm226.512-152.067h83.243a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.243a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.245v31.5h59.243v-31.5zm65.5-72.83h-488.002v288.351a28.958 28.958 0 0 0 28.873 28.873h430.254a28.958 28.958 0 0 0 28.873-28.873z" fill-rule="evenodd"/></svg>

public/js/functions.js

@@ -31,29 +31,33 @@ $(document).ready(function(){
       loadingElementId: '#loading',
       container: '',
       url: document.location.pathname,
-      nextPage: 2
+      nextPage: 2,
+      dateStart: null,
+      dateEnd:null
     };
 
     $.extend(options, _options);
     var $isLoading = $(options.loadingElementId, this);
     $isLoading.hide();
 
-    this.click(function (e) {
+    this.unbind('click').click(function (e) {
       e.preventDefault();
       if (!isLoading) {
         // Set flag and update UI
         isLoading = 1;
         $isLoading.show();
         var $button = $(this).attr("disabled", "disabled");
-        var $container = $(options.container)
+        var $container = $(options.container);
+        $container.each(function(){$(this).find('.no-results').remove();});
 
         // Fire request for the next page
-        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage})
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage + (options.dateStart ? '&dateStart=' + options.dateStart : '') + (options.dateEnd ? '&dateEnd=' + options.dateEnd : '')})
           .always(function () {
             // Whether success or failure, update the UI again
             isLoading = 0;
             $isLoading.hide();
             $button.removeAttr("disabled");
+            $(options.container + ' .loader').remove();
           })
           .done(function (data) {
             if (!data) {
@@ -67,6 +71,12 @@ $(document).ready(function(){
               var id = this.toString();
               $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
             });
+            $container.each(function () {
+              var id = this.toString();
+              if (!$(id).find('li').length) {
+                $(id).append('<li class="no-results">Geen items gevonden.</li>');
+              }
+            });
             ++options.nextPage;
           });
       }

resources/assets/js/functions/loadMoreNews.js

@@ -9,29 +9,33 @@
       loadingElementId: '#loading',
       container: '',
       url: document.location.pathname,
-      nextPage: 2
+      nextPage: 2,
+      dateStart: null,
+      dateEnd:null
     };
 
     $.extend(options, _options);
     var $isLoading = $(options.loadingElementId, this);
     $isLoading.hide();
 
-    this.click(function (e) {
+    this.unbind('click').click(function (e) {
       e.preventDefault();
       if (!isLoading) {
         // Set flag and update UI
         isLoading = 1;
         $isLoading.show();
         var $button = $(this).attr("disabled", "disabled");
-        var $container = $(options.container)
+        var $container = $(options.container);
+        $container.each(function(){$(this).find('.no-results').remove();});
 
         // Fire request for the next page
-        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage})
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage + (options.dateStart ? '&dateStart=' + options.dateStart : '') + (options.dateEnd ? '&dateEnd=' + options.dateEnd : '')})
           .always(function () {
             // Whether success or failure, update the UI again
             isLoading = 0;
             $isLoading.hide();
             $button.removeAttr("disabled");
+            $(options.container + ' .loader').remove();
           })
           .done(function (data) {
             if (!data) {
@@ -45,6 +49,12 @@
               var id = this.toString();
               $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
             });
+            $container.each(function () {
+              var id = this.toString();
+              if (!$(id).find('li').length) {
+                $(id).append('<li class="no-results">Geen items gevonden.</li>');
+              }
+            });
             ++options.nextPage;
           });
       }

resources/assets/sass/base/_base.scss

@@ -5,6 +5,7 @@
 @use "../components/pretty_photo";
 @use "../components/cookie";
 @use "../components/list";
+@use "../components/banners";
 
 @use "../layout";
 

resources/assets/sass/components/_banners.scss

@@ -0,0 +1,9 @@
+.ad-prefix {
+  width: 100%;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: center;
+  color: #666;
+}

resources/assets/sass/components/_header.scss

@@ -7,10 +7,11 @@
       height: 95px;
     }
   }
-  .advertisement {
+  ins[data-revive-zoneid] {
     float: right;
     width: 728px;
     height: 90px;
+    margin-top: 10px;
   }
 }
 
@@ -25,7 +26,7 @@
     .logo {
       float: none;
     }
-    .advertisement {
+    ins[data-revive-zoneid] {
       float: none;
     }
   }

resources/assets/sass/components/_main_news.scss

@@ -61,7 +61,8 @@
 
       .post_details {
         @include reset-list;
-
+        display: flex;
+        gap: 3px;
         .category a {
           padding: 6px 11px 7px;
           border-radius: 3px;
@@ -105,3 +106,8 @@
     }
   }
 }
+
+.article-iframe {
+  width: 100%;
+  aspect-ratio: 1;
+}

resources/assets/sass/components/_media.scss

@@ -0,0 +1,91 @@
+.audioplayer {
+  .waveform {
+    cursor: pointer;
+    position: relative;
+  }
+
+  .hover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    pointer-events: none;
+    height: 100%;
+    width: 0;
+    mix-blend-mode: overlay;
+    background: rgba(255, 255, 255, 0.5);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  .waveform:hover .hover {
+    opacity: 1;
+  }
+
+  .time,
+  .duration {
+    position: absolute;
+    z-index: 11;
+    top: 50%;
+    margin-top: -1px;
+    transform: translateY(-50%);
+    font-size: 11px;
+    background: rgba(0, 0, 0, 0.75);
+    padding: 2px;
+    color: #ddd;
+  }
+
+  .time {
+    left: 0;
+  }
+
+  .duration {
+    right: 0;
+  }
+
+  .audio-controls {
+    width: 100%;
+    justify-content: center;
+    display: flex;
+  }
+
+  .audio-controls .btn {
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-transform: none;
+  }
+
+  @media(max-width: 720px) {
+    .audio-controls .btn label {
+      display: none;
+    }
+  }
+
+  .audio-controls .btn.btn-play {
+    flex: 50% 1 0;
+  }
+
+  .volume-controls {
+    display: flex;
+  }
+
+  .volume-controls .volume-slider {
+    flex: 100% 1 1;
+  }
+
+  .audio-controls .btn,
+  .volume-controls .btn-toggle-mute {
+    flex: 100px 1 1;
+    padding: 10px 0 10px 0;
+    background: #5ba8f4;
+    border-radius: 5px;
+    border-color: solid 1px #0f259d;
+    color: white;
+    font-family: Nunito, serif;
+    text-align: center;
+    text-decoration: none;
+  }
+}

resources/assets/sass/components/_menu.scss

@@ -124,7 +124,7 @@
         margin: 8px auto;
       }
 
-      &:last-child {
+      &.search {
         border: none;
         line-height: 1;
       }

resources/assets/sass/components/_podcast_item.scss

@@ -12,3 +12,9 @@
   float: left;
   margin: 10px 20px 0 0;
 }
+
+.podcast-player .content {
+  border: solid 1px #333;
+  border-radius: 5px;
+  padding: 0.4rem;
+}

resources/assets/sass/components/_post.scss

@@ -1,6 +1,20 @@
 @use "../abstracts/mixin" as *;
 @use "../abstracts/variables" as *;
 
+%sentence {
+  font-size: 12px;
+  font-style: italic;
+  line-height: 1.3;
+  text-align: right;
+  color: $text-description-color;
+  display: block;
+  width: 100%;
+
+  span {
+    padding: 0 5px;
+  }
+}
+
 .post_container {
   @include container;
   @media (min-width: 768px) {
@@ -30,17 +44,15 @@
     }
 
     .sentence {
-      font-size: 12px;
-      font-style: italic;
-      line-height: 1.3;
-      text-align: right;
-      color: $text-description-color;
-      display: block;
-      width: 100%;
-
-      span {
-        padding: 0 5px;
+      @extend %sentence
     }
+
+    @at-root .box.featured .sentence {
+      @extend %sentence
+    }
+
+    div.text {
+      margin-bottom: 20px;
     }
 
     blockquote {
@@ -106,17 +118,10 @@
     }
   }
 }
-.post_tags {
-  @include reset-list;
-  height: 31px;
-  margin: 20px 0;
 
-  li {
-    float: left;
-    margin-right: 10px;
-
-    a {
+%post-tags-link {
   display: block;
+  width: 4rem;
   padding: 6px 15px 7px;
   border-radius: 3px;
   background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
@@ -128,5 +133,22 @@
   text-decoration: none;
   text-transform: uppercase;
 }
+
+.post_tags {
+  @include reset-list;
+  height: 31px;
+  margin: 20px 0;
+
+  li {
+    float: left;
+    margin-right: 10px;
+
+    a {
+      @extend %post-tags-link
+    }
+
+    @at-root #schedule .onair {
+      @extend %post-tags-link
+    }
   }
 }

resources/assets/sass/components/_schedule.scss

@@ -1,6 +1,14 @@
 @use "../abstracts/mixin" as *;
 @use "../abstracts/variables" as *;
 
+@keyframes tilt-shaking {
+    0% { transform: rotate(0deg); }
+   25% { transform: rotate(5deg); }
+   50% { transform: rotate(0deg); }
+   75% { transform: rotate(-5deg); }
+  100% { transform: rotate(0deg); }
+}
+
 #schedule {
   a {
     text-decoration: none;
@@ -32,4 +40,8 @@
       margin-right: 10px;
     }
   }
+
+  .onair {
+    animation: tilt-shaking 1s linear infinite;
+  }
 }

resources/assets/sass/layout/_home.scss

@@ -6,3 +6,14 @@
 @use "../components/contact_box";
 @use "../components/featured";
 @use "../components/podcast_items";
+
+@media (max-width: 576px) {
+  ins[data-revive-zoneid] img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.homepage-body-banners {
+  margin-top: -4rem;
+}

resources/assets/sass/layout/_podcast.scss

@@ -1 +1,2 @@
 @use "../components/podcast_item";
+@use "../components/media";

resources/views/adverteren.blade.php

@@ -16,11 +16,59 @@
 
 @section('content')
     <div class="page_body">
-        <p>
-            Wij delen lokale verhalen en versterken gemeenschapsbanden. Als adverteerder krijgt u bij NHGooi de kans om authentiek in contact te komen met onze kijkers, luisteraars en online volgers. Of het nu gaat om radio, televisie of online advertenties, NHGooi biedt een uniek platform om uw boodschap te delen met onze gemeenschap. Verken de mogelijkheden en laat uw merk bloeien in onze regio. Samen bereiken we reclamesucces en versterken we de banden in Gooi & Vechtstreek.
+<div class="row">
+<div class="col-12 col-lg-8">
+ <p>                                                                                                                                                                                                                   Wij delen lokale verhalen en versterken gemeenschapsbanden. Als adverteerder krijgt u bij NHGooi de kans om authentiek in contact te komen met onze kijkers, luisteraars en online volgers. Of het nu gaat om radio, televisie of online advertenties, NHGooi biedt een uniek platform om uw boodschap te delen met onze gemeenschap. Verken de mogelijkheden en laat uw merk bloeien in onze regio. Samen bereiken we reclamesucces en versterken we de banden in Gooi & Vechtstreek.
         </p>
         <p>
             Wil je weten wat jouw mogelijkheden zijn? Mail naar  {{Html::mailto('adverteren@NHGooi.nl')}} en onze adviseurs nemen contact met je op!
 	</p>
 </div>
+<div class="col-12 col-lg-4">
+<div class="announcement" style="display: flex; flex-direction: column;">
+  <div>
+    <span class="fa fa-envelope mx-1"></span> {{ Html::mailto('adverteren@nhgooi.nl') }}
+  </div>
+  <div>
+    <span class="fa fa-phone mx-1"></span> <a href="tel:0031651881267">06-51881267</a>
+  </div>
+  <div>
+    <span class="fab fa-linkedin mx-1"></span> <a href="https://www.linkedin.com/in/mascha-van-ekeren-0166704/">LinkedIn</a>
+  </div>
+</div>
+</div>
+</div>
+
+<div class="box full-width">
+<h2>Even voorstellen: onze adviseur, Mascha</h2>
+<div class="row">
+<div class="col-12 col-lg-8">
+<p>Mijn naam is Mascha, 41 jaar en woonachtig in Almere.</p>
+
+<p>Sinds kort ben ik me aan het verdiepen in alle mooie bedrijven die gevestigd zijn in Regio Gooi en Vechtstreek.
+En dat zijn er een hoop!</p>
+
+<p>Met het NHGooi platform en onze communicatiekanalen zijn de mogelijkheden eindeloos om de regio te bereiken met jouw reclameboodschap.</p>
+
+<ul>
+<li>Ben je een landelijk opererend bedrijf date zichtbaar wil blijven in 'eigen' stad?</li>
+<li>Ben je net een nieuwe franchisevestiging gestart in de regio?</li>
+<li>Is jouw bedrijf op zoek naar nieuwe collega's in de regio?</li>
+<li>Is er binnenkort een evenement die je graag in de regio onder de aandacht wil brengen?</li>
+<li>Of misschien ben je helemaal niet gevestigd in de regio, maar zijn de mensen uit Gooi en Vechtstreek wel een interessante doelgroep voor jouw reclameboodschap?</li>
+</ul>
+
+<p>Samen kijken we hoe we de boodschap het beste naar jouw doelgroep kunnen vertalen. Denk aan een commerciële uiting op onze kanalen (radio, tv en online), maar ook contentcreatie behoort tot de mogelijkheden. Op deze manier kunnen we de doelgroep benaderen met informatie die waardevol, vermakelijk en relevant is.</p>
+
+<p>Als jouw NHGooi adviseur denk ik graag met je mee wat wij voor je zouden kunnen betekenen. Voor meer informatie over hoe een samenwerking met NHGooi eruit kan komen te zien? Stuur een bericht naar <a href="mailto:adverteren@nhgooi.nl">adverteren@nhgooi.nl</a>.</p>
+
+<p>Leuk om kennis te maken!</p>
+</div>
+<div class="col-12 col-lg-4">
+	  <img src="images/adverteren.jpg" alt="Mascha, jouw NHGooi adviseur" style="width: 100%;">
+</div>
+</div>
+</div>
+</div>
+
 @endsection

resources/views/calendarevent.blade.php

@@ -104,7 +104,7 @@
 					@include('partial/nh_story', ['content' => $event->content]);
 				@else
 				<div class="text">
-					<p>{!!$event->content!!}</p>
+				{!!$event->content!!}
 				</div>
 				@endif
 

resources/views/calendarlist.blade.php

@@ -28,8 +28,8 @@
 @if(!count($events))
     @section('content')
         <div class="page_body margin_bottom">
-            <p>Er zijn geen items in de streekagenda. Iets te melden? Mail het naar {{Html::mailto("info@nhgooi.nl")}}
-                .</p>
+	    <p>De streekagenda is momenteel helaas leeg.</p>
+            <p><b>Iets te melden</b> voor onze streekagenda? Mail het naar {{Html::mailto("info@nhgooi.nl")}}. Voeg bij voorkeur het persbericht als <b>bijlage</b> bij. Vergeet ook niet een <b>foto</b> mee te sturen die we rechtenvrij (met bronvermelding) mogen plaatsen. Vermeld in de mail je contactgegevens, als je wilt dat bijvoorbeeld onze radio- of tv-redactie contact met je kan opnemen voor een interview.</p>
         </div>
     @endsection
 @else
@@ -37,11 +37,12 @@
     @section('content')
         @parent
         <div data-tabs class="page_body">
+            	<p><b>Iets te melden</b> voor onze streekagenda? Mail het naar {{Html::mailto("info@nhgooi.nl")}}. Voeg bij voorkeur het persbericht als <b>bijlage</b> bij. Vergeet ook niet een <b>foto</b> mee te sturen die we rechtenvrij (met bronvermelding) mogen plaatsen. Vermeld in de mail je contactgegevens, als je wilt dat bijvoorbeeld onze radio- of tv-redactie contact met je kan opnemen voor een interview.</p>
                 <div style="padding: 0" class="tab_content active" id="agenda">
                     @php($count = 0)
                     @foreach($events as $event)
                             @php($count++)
-                            <?php $url = route('agenda.details', ['id' => $event->id, 'title' => $event->title]); ?>
+                <?php $url = $event->url; ?>
                             <div class="box featured">
                                 <div class="row">
                                     <div class="col-12 col-md-6">
@@ -60,7 +61,11 @@
                                             <span class="post_date" style="line-height: 1.17; height: 14px;" title="{{Formatter::relativeDate($event->starts, 'W d m y?')}}">
                                                 <i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($event->starts, 'W d m y?')}}
                                                 @if($event->ends && $event->starts != $event->ends)
+                                                    @if($event->ends->format('d M y') != $event->starts->format('d M y'))
                                                         t/m {{strtolower(Formatter::relativeDate($event->ends, 'W d m y?'))}}
+                                                    @else
+                                                        van {{ $event->starts->format('H:i') }} uur tot {{ $event->ends->format('H:i') }} uur 
+                                                    @endif
                                                 @endif
                                             </span>
                                         </div>

resources/views/contact.blade.php

@@ -59,18 +59,6 @@ voor talent.</p>
                     1271 AA, Huizen<br/>
                     studio: <a href="tel:+31356424776">035-6424776</a><br/>
                     KvK: 41194132<br>
-                    <br>
-
-                    <b>Streekredactie</b><br>
-                    Gooise Brink, Kerkstraat 63/27<br>
-                    11211 CL Hilversum<br>
-                    Tiplijn: <a href="tel:+31642913637">06 - 42 91 36 37</a><br>
-                    e-mail: {{Html::mailto('info@NHGooi.nl')}}<br>
-                    <br>
-
-                    <b>Chef redactie</b><br>
-                    Petra de Beij<br>
-                    {{Html::mailto('petra.debeij@nhgooi.nl')}}<br><br>
                 </p>
             </div>
         </div>

resources/views/home.blade.php

@@ -136,12 +136,9 @@
         <div class="grey_background">
             <div class="body_container row">
                 @if(!isset($disableBanners) || !$disableBanners)
-                <div class="col-12">
-                    <div class="d-none d-md-block" style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
-                        - Advertentie -
-                    </div>
-                    <div id="nhgooi_homepage_top" class="d-none d-md-block" style="width: 728px; height: 90px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
-                    <script type="text/javascript">ootag.queue.push(function () {ootag.defineSlot({adSlot: "nhgooi_homepage_top",targetId: "nhgooi_homepage_top",adShownCallback: (adslot) => { calculateSize(adslot.targetId); }});});</script>
+                    <div class="homepage-body-banners d-none d-md-flex justify-content-center mb-4">
+                        <ins data-revive-zoneid="3" data-revive-id="{{ env('REVIVE_ID') }}"></ins>
+                        <ins data-revive-zoneid="4" data-revive-id="{{ env('REVIVE_ID') }}"></ins>
                     </div>
                 @endif
                 <div class="col-12 col-md content_container">
@@ -195,10 +192,12 @@
                                     </a>
                                 </div>
                                 <div class="col-12 col-md-6">
-                                    <h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->title!!}</a></h2>
+                                    <h2 class="post_title"><a href="{{$url}}"
+                                                              title="{{$podcast->title}}">{!!$podcast->title!!}</a></h2>
                                     <div class="sub_title">
                                         @if ($podcast->program)
-                                            <a class="program_name" href="{{ route('programma') . $podcast->program->url }}"
+                                            <a class="program_name"
+                                               href="{{ route('programma') . $podcast->program->url }}"
                                                title="{{$podcast->program->name}}">{{$podcast->program->name}}</a>
                                         @endif
                                         <span class="post_date" title="{{Formatter::relativeDate($podcast->created)}}">
@@ -217,11 +216,9 @@
                 <div class="col-12 col-md-auto sidebar">
                     @include('widgets/nhgooiradiotv', ['headerClass' => 'small'])
 
-                    @include('widgets/add_sidebar', ['ad_sidebar' => 'nhgooi_homepage_side', 'ad_sidebarId' => 'nhgooi_sidebar1'])
+                    @include('widgets.banner_sidebar')
 
                     @include('widgets/contact', [])
-
-                    @include('widgets/add_sidebar', ['ad_sidebar' => 'nhgooi_homepage_side2', 'ad_sidebarId' => 'nhgooi_sidebar2'])
                 </div>
             </div>
         </div>

resources/views/jobslist.blade.php

@@ -31,7 +31,7 @@
     <p>NH Gooi is dé streekomroep voor het Gooi. We maken radio- en televisieprogramma’s, podcasts en bieden een website vol nieuws en verhalen uit jouw streek. Onze uitzendingen draaien om muziek, informatie, cultuur en ontspanning, allemaal met een duidelijke link naar het Gooi. Met meer dan 60 (vrijwillige) medewerkers zijn we volop in ontwikkeling en willen we onze activiteiten verder uitbouwen.</p>
     <p>Wil jij meebouwen aan de streekomroep van en voor het Gooi? Heb je een stevige motivatie en misschien al wat ervaring? Dan ben je bij ons aan het juiste adres. NH Gooi biedt kansen voor iedereen die wil bijdragen aan onze organisatie. En dat allemaal in het mediahart van Nederland.</p>
     <blockquote>
-	Ik kwam hier als programmeur en nu maak ik met een collega, inmiddels vriend, elke week een kleinkunstprogramma 
+	Ik kwam hier als programmeur en nu maak ik met een collega, inmiddels vriend, elke week een nieuwsprogramma. 
 	<span class="author">— Mischa, programmamaker en technicus</span>
     </blockquote>
     <p>Als vrijwilliger van NH Gooi kan je gebruik maken van de opleidingsmogelijkheden die via de NLPO worden aangeboden. Kijk bijvoorbeeld eens op de <a href="https://www.nlpo.nl/opleidingen/">website van de NLPO</a> over het huidige aanbod. Ook organiseren we samen met onze mediapartner NH trainingen en cursussen.</p>
@@ -46,13 +46,13 @@
 
     <blockquote>
        Je krijgt bij NHGooi de kans om jezelf te ontwikkelen. Ik mocht al heel snel mijn eigen programma maken 
-       <span class="author">— Yannick, programmamaker</span>  
+       <span class="author">— Yannick, oud-programmamaker, inmiddels werkzaam bij de regionale omroep</span>  
     </blockquote>
 
     <h3>Bestuur, staf en organisatie</h3>
     <ul>
         <li><strong>Diverse coördinatoren:</strong> NH Gooi is een organisatie van ruim 60 vrijwilligers die samen radio, televisie, podcasts en online producties maken. Met de ambitie om in 2025 het <a href="https://www.nlpo.nl/keurmerk-nederlands-streekomroepen/">keurmerk Nederlandse Streekomroepen</a> te behalen, streven we naar verdere professionalisering van onze interne organisatie en besturingsstructuur. We zoeken gemotiveerde vrijwilligers met coördinerende ervaring. Denk aan coördinator audio, video, externe producties, techniek, vrijwilligers/medewerkerszaken en commercie. Stuur je reactie met korte motivatie naar <a href="mailto:meebouwen@NHGooi.nl">meebouwen@NHGooi.nl</a>.</li>
-        <li><strong>Buurt- & clubambassadeurs:</strong> NH Gooi is de stem van het Gooi. We laten graag zien en horen wat er speelt in het Gooi, door en voor inwoners van de Gooi en Vechtstreek. We brengen zo veel mogelijk nieuws en informatie uit alle kernen van het Gooi. Ook willen graag de informatie van clubs, verenigingen en andere, maatschappelijke, organisatie voor het voetlicht brengen. We zoeken ambassadeurs per kern/wijk en club/vereniging/organisatie die verslag willen doen van gebeurtenissen in hun omgeving of club. Of je nu tips doorgeeft aan de redactie of zelf verslag doet via een artikel, foto’s, audio of video – alles is mogelijk. Afhankelijk van jouw kennis, kunde en talent bepalen we samen wat mogelijk is. Sollicitaties met korte motivatie kunnen naar onze chef-redactie Petra de Beij: <a href="mailto:petra.deBeij@NHGooi.nl">petra.deBeij@NHGooi.nl</a>.</li>
+        <li><strong>Buurt- & clubambassadeurs:</strong> NH Gooi is de stem van het Gooi. We laten graag zien en horen wat er speelt in het Gooi, door en voor inwoners van de Gooi en Vechtstreek. We brengen zo veel mogelijk nieuws en informatie uit alle kernen van het Gooi. Ook willen graag de informatie van clubs, verenigingen en andere, maatschappelijke, organisatie voor het voetlicht brengen. We zoeken ambassadeurs per kern/wijk en club/vereniging/organisatie die verslag willen doen van gebeurtenissen in hun omgeving of club. Of je nu tips doorgeeft aan de redactie of zelf verslag doet via een artikel, foto’s, audio of video – alles is mogelijk. Afhankelijk van jouw kennis, kunde en talent bepalen we samen wat mogelijk is. Sollicitaties met korte motivatie kunnen naar onze chef-redactie Marco Willemse: {{ Html::mailto('marco.willemse@nhgooi.nl') }}</li>
         <li><strong>Lid van het PBO:</strong> Het PBO is het programmabeleidbepalend orgaan van onze omroep. Het PBO komt minimaal drie keer per jaar bij elkaar om het media-aanbodbeleid vast te stellen en te controleren of onze programma’s voldoen aan de wettelijke normen. De leden vertegenwoordigen diverse stromingen binnen onze gemeenten, zodat we een directe binding hebben met ons publiek. Als je betrokken bent bij een van de stromingen in de Gooise samenleving (zoals sport, maatschappelijke zorg, kunst en cultuur, kerkgenootschappen, onderwijs, etnische minderheden, jongeren, ouderen, etc.) en wilt deelnemen aan het PBO, neem dan contact op via <a href="mailto:bestuur@nhgooi.nl">bestuur@nhgooi.nl</a>.</li>
     </ul>
     

resources/views/layouts/_analytics.blade.php

@@ -2,7 +2,7 @@
 <script type="text/javascript" src="//www.cookieconsent.com/releases/3.1.0/cookie-consent.js"></script>
 <script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function () {
-cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"light","language":"nl","website_name":"NH Gooi","cookies_policy_url":"https://www.nhnieuws.nl/privacyverklaring","change_preferences_selector":"#changePreferences"});
+cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"light","language":"nl","website_name":"NH Gooi","cookies_policy_url":"/privacy-verklaring","change_preferences_selector":"#changePreferences"});
 });
 </script>
 
@@ -13,9 +13,7 @@ cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palet
 <!-- End Google Tag Manager -->
 
 @if(!isset($disableBanners) || !$disableBanners)
-<script type="text/javascript" src="https://cdn.optoutadvertising.com/script/ootag.v2.js"></script><script>var ootag =
-    ootag || {}; ootag.queue = ootag.queue || [];ootag.queue.push(function () { ootag.initializeOo({
-    publisher: 4, onlyNoConsent: 1, consentTimeOutMS: 500 });});</script>
+<script async src="{{ env('ADS_URL') }}www/delivery/asyncjs.php"></script>
 @endif
 
 <noscript>ePrivacy and GPDR Cookie Consent by <a href="https://www.CookieConsent.com/" rel="nofollow noopener">Cookie Consent</a></noscript>

resources/views/layouts/master.blade.php

@@ -22,8 +22,7 @@
             </div>
 
             @if(!isset($disableBanners) || !$disableBanners)
-            <div id="nhgooi_header_top" class="advertisement" style="margin: 11px auto 0 auto;background-color: #efefef;"></div>
-            <script type="text/javascript">ootag.queue.push(function () {ootag.defineSlot({adSlot: "nhgooi_homepage_header",targetId: "nhgooi_header_top",filledCallback: (adslot) => { calculateSize(adslot.targetId); }});});</script>
+                <ins data-revive-zoneid="1" data-revive-id="{{ env('REVIVE_ID') }}"></ins>
             @endif
 
         </div>
@@ -89,6 +88,12 @@
         @include('widgets.menu')
     </div>
 
+    @if(!isset($disableBanners) || !$disableBanners)
+        <div class="mobile-banner-fullwidth d-flex d-md-none justify-content-center mt-4">
+            <ins data-revive-zoneid="6" data-revive-id="{{ env('REVIVE_ID') }}"></ins>
+        </div>
+    @endif
+
     <!-- Content -->
 
     <div class="page @yield('page_container_class')">
@@ -186,6 +191,7 @@
 <script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
 <script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1.min.js"></script>
 <script type="text/javascript" src="/js/functions.js"></script>
+<script type="text/javascript" src="/js/wavesurfer.min.js"></script>
 <script type="text/javascript">
   $(window).resize(function () {
     // Fix sticky for mobile menu indicator
@@ -202,7 +208,7 @@
   function openPlayerInNewScreen() {
     $(".player").click(function (e) {
       e.preventDefault();
-      window.open($(this).attr('href'), '_player', 'width=550,height=500,titlebar,close');
+      window.open($(this).attr('href'), '_player', 'width=550,height=600,titlebar,close');
       return false;
     });
   }

resources/views/layouts/sidebar.blade.php

@@ -1,6 +1,7 @@
 @extends('layouts/master')
 
-@section('content_class')box
+@section('content_class')
+    box
 @endsection
 
 @section('page')
@@ -57,13 +58,11 @@
                         </div>
                     @endif
 
-                    @include('widgets/add_sidebar', ['ad_sidebar' => $ad_sidebar1 ?? 'nhgooi_section_side', 'ad_sidebarId' => 'nhgooi_sidebar1'])
-
                     @include('widgets/nhgooiradiotv', ['headerClass' => 'small'])
 
-                    @include('widgets/contact', [])
+                    @include('widgets.banner_sidebar')
 
-                    @include('widgets/add_sidebar', ['ad_sidebar' => $ad_sidebar2 ?? 'nhgooi_section_side2', 'ad_sidebarId' => 'nhgooi_sidebar2'])
+                    @include('widgets/contact', [])
                 @show
             </div>
         </div>

resources/views/listen.blade.php

@@ -4,8 +4,8 @@
     <a href="javascript:window.close();" class="close btn"><span class='fa fa-times fa-fw'></span> Venster sluiten</a>
     <p class="logo"><a href="{{ url('/') }}"><img src="{{ url( 'images/logo-NHGooi.svg' )}}"></a></p>
 
-    @if(false && $isStream)
-        <p>Wegens een technisch probleem is NH Gooi momenteel niet via Internet te beluisteren. Onze excuses voor het
+    @if(isset($notAvailable) && $notAvailable)
+        <p>Helaas is de door u gekozen audio momenteel niet via Internet te beluisteren. Onze excuses voor het
             ongemak.</p>
         <p>In Hilversum, Huizen en de BEL-gemeenten zijn wij te ontvangen op 92.0 FM of 105.1 FM.</p>
     @else
@@ -36,9 +36,16 @@
                 </p>
             @endif
             <p>
-                <audio controls autoplay="true">
+                {{-- <audio controls autoplay="true">
                     <source src="{{$source}}" type="audio/mp3"/>
-                </audio>
+                </audio> --}}
+                                
+                @include('widgets.audioplayer', [
+                    'source' => $source,
+                    'isStream' => $isStream,
+                    'lengte' => $lengte,
+                    'waveform' => $waveform
+                ])
             </p>
 
             <p>
@@ -130,6 +137,7 @@
 
         @push('scripts')
             <script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
+            <script type="text/javascript" src="/js/wavesurfer.min.js"></script>
             <script>
               function updateOnAir() {
                 $.ajax({
@@ -163,4 +171,3 @@
             </script>
         @endpush
 
-        @include('widgets.mediaplayer')

resources/views/news.blade.php

@@ -8,6 +8,60 @@
     news
 @endsection
 
+@push('scripts')
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
+    <style>
+        .input-group-text svg {
+            width: 24px;
+            height:24px;
+            fill: #0f259d
+        }
+        .datepicker {
+            border: 1px solid lightgray;
+            border-radius: 4px;
+            padding: 5px;
+        }
+        .daterangepicker .drp-buttons .btn {
+            border: none;
+            padding: 10px 39px 10px 39px;
+            font-size: 14px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .daterangepicker.show-calendar .drp-buttons {
+            display: flex;
+        }
+        .daterangepicker .drp-selected {
+            display: none;
+        }
+    </style>
+    <script>
+      $(function() {
+        $('input[name="daterange"]').daterangepicker({
+          opens: 'left',
+          autoUpdateInput: false,
+          locale: {
+            cancelLabel: 'Annuleer',
+            applyLabel: 'Filteren'
+          }
+        }, function(start, end, label) {
+          $('input[name="daterange"]').val(start.format('DD-MM-YYYY') + ' - ' + end.format('DD-MM-YYYY'));
+          var $moreNews = $('.content_container #meer-nieuws');
+          var options = $('#meer-nieuws').data('loadmorenews');
+          options.dateStart = start.format('YYYY-MM-DD');
+          options.dateEnd = end.format('YYYY-MM-DD');
+          options.nextPage = 1;
+          $('.content_container #items-more-news li').remove();
+          $('.content_container #items-more-news').append('<li class="loader"><span class="fas fa-spinner fa-spin"></span> Laden...</li>');
+          $moreNews.loadMoreNews(options);
+          $moreNews.click();
+        });
+      });
+    </script>
+@endpush
+
 @section('content')
     <div class="clearfix">
         {{-- body --}}
@@ -15,18 +69,22 @@
             <div class="body_container row">
                 @if(!isset($disableBanners) || !$disableBanners)
                     <div class="col-12">
-                    <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
-                        - Advertentie -
-                    </div>
-                    <div id="nhgooi_article_top" style="width: 728px; height: 90px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
-                    <script type="text/javascript">ootag.queue.push(function () {ootag.defineSlot({adSlot: "nhgooi_article_top",targetId: "nhgooi_article_top",filledCallback: (adslot) => { calculateSize(adslot.targetId); }});});</script>
+                        <ins data-revive-zoneid="5" data-revive-id="{{ env('REVIVE_ID') }}"></ins>
                     </div>
                 @endif
                 <div class="col-12 col-md content_container">
                     <div class="row">
                         <div class="col-md-12 col-12">
-                            <h4 class="box_header"><span>Meer nieuws</span></h4>
-                            <div class="box">
+                            <div class="d-flex">
+                                <h4 class="box_header flex-grow-1"><span>Meer nieuws</span></h4>
+                                <h4 class="box_header ms-auto">
+                                    <div class="d-flex">
+                                        <div class="input-group-text me-sm-2" id="basic-addon1">{!!file_get_contents(__DIR__ . '/../../../public/images/icons/calendar.svg')!!}</div>
+                                        <input class="datepicker" type="text" name="daterange" placeholder="Selecteer datum" value=""/>
+                                    </div>
+                                </h4>
+                            </div>
+                            <div class="box" style="width: CALC(100% - 55px);">
                                 @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $news])
                             </div>
                         </div>
@@ -45,9 +103,9 @@
                 <div class="col-12 col-md-auto sidebar">
                     @include('widgets/nhgooiradiotv', ['headerClass' => 'small'])
 
-                    @include('widgets/contact', [])
+                    @include('widgets.banner_sidebar')
 
-                    @include('widgets/add_sidebar', ['ad_sidebar' => 'nhgooi_article_side' ?? false, 'ad_sidebarId' => 'nhgooi_sidebar1'])
+                    @include('widgets/contact', [])
 
                     <div class="podcast_items">
                         <h4 class="box_header small"><span>Fragment gemist</span></h4>
@@ -55,8 +113,6 @@
                             @include('partial/podcastitems', ['showTime' => false, 'showImage' => false, 'podcasts' => $podcasts, 'isPodcast' => false])
                         </div>
                     </div>
-
-                    @include('widgets/add_sidebar', ['ad_sidebar' => 'nhgooi_article_side2' ?? false, 'ad_sidebarId' => 'nhgooi_sidebar2'])
                 </div>
             </div>
         </div>

resources/views/newsitem.blade.php

@@ -87,8 +87,10 @@
 					@endif
 				@endif
 
-				@if(is_array($news->content))
+				@if($type == "nhnieuws")
 				@include('partial/nh_story', ['content' => $news->content])
+				@elseif($type == "artikel")
+				@include('partial/block_story', ['content' => $news->content])
 				@else
 				<div class="text">
 					<p>{!!$news->content!!}</p>

resources/views/partial/block_story.blade.php

@@ -0,0 +1,164 @@
+@foreach($content as $block)
+@if($block->type == "headerRichA")
+@php($block->data->image->url = isset($block->data->image->crops)
+? $block->data->image->crops->{'16:9'}->{'1600'}
+: $block->data->image->crop)
+<a href="{{$block->data->image->url}}" class="post_image page_margin_top prettyPhoto" rel="prettyPhoto"
+	title="{{$block->data->image->title}}">
+	<img src="{{$block->data->image->url}}" alt="{{$block->data->image->title}}">
+</a>
+<div class="sentence margin_top_10">
+	<span class="text">{{$block->data->image->title}}</span>
+	@if($block->data->image->author)
+	<span class="author">{{$block->data->image->author}}</span>
+	@endif
+</div>
+@elseif($block->type == "header")
+<? $level = (int)$block->data->level; if($level < 2) $level = 2; if($level > 6) $level = 6; ?>
+<h{{ $level }}>{!!$block->data->text!!}</h{{ $level }}>
+@elseif($block->type == "paragraph")
+<div class="text">{!!$block->data->text!!}</div>
+@elseif($block->type == "intro")
+<h3 class="excerpt">{!!strip_tags($block->data->text)!!}</h3>
+@elseif($block->type == "info")
+@if(strpos($block->data->text, "Meer nieuws uit 't Gooi?") === false)
+<div class="info" style="background-color: {{$block->data->color}};">{!!($block->data->text)!!}</div>
+@endif
+@elseif($block->type == "quote")
+<blockquote>
+	{!!$block->data->text!!}
+	<div class="author">{{$block->data->caption}}</div>
+</blockquote>
+@elseif($block->type == "image")
+<?php
+			if(isset($block->data->image->imageWide))
+			$image = $block->data->image->imageWide;
+			else if(isset($block->data->image->crop))
+			$image = $block->data->image->crop;
+			else if(isset($block->data->image->crops) && isset($block->data->image->crops->{'16:9'}))
+				foreach($block->data->image->crops->{'16:9'} as $image) break;
+			else if(isset($block->data->image->imageHigh))
+				$image = $block->data->image->imageHigh;
+			else $image = null;
+		?>
+@if($image)
+<a class="post_image page_margin_top prettyPhoto" rel="prettyPhoto" href="{{$image}}"
+	title="{{$block->data->image->title}} &copy; {{$block->data->image->author}}">
+	<img src="{{$image}}" class="attachment-small-slider-thumb size-small-slider-thumb wp-post-image"
+		alt="{{$block->data->image->title}}" title="" style="display: block;">
+</a>
+<div class="sentence">
+	<?php
+				$sentence = [];
+                if (isset($block->data->image->caption) && $block->data->image->caption) {
+					$sentence[] = '<span class="text">' . $block->data->image->caption . '</span>';
+				} elseif (isset($block->data->image->title) && $block->data->image->title) {
+					$sentence[] = '<span class="text">' . $block->data->image->title . '</span>';
+				}
+				if (isset($block->data->image->author) && $block->data->image->author) {
+					$sentence[] = '<span class="author">' . $block->data->image->author . '</span>';
+				}
+				$sentence = join('<span class="separator">|</span>', $sentence);
+			?>
+	{!!$sentence!!}
+</div>
+@endif
+@elseif($block->type == "video" || $block->type == "headerVideo")
+@include('widgets/mediaplayer')
+<?php
+			$attr = '';
+            if (isset($block->data->video->images[0]->imageMedia) && $block->data->video->images[0]->imageMedia) {
+				$attr = ' poster="' . $block->data->video->images[0]->imageMedia . '"';
+			}
+		?>
+<video controls{!!$attr!!}>
+	@foreach($block->data->video->streams as $stream)
+	<source src="{!!$stream->stream_url!!}" type="application/x-mpegurl" />
+	@endforeach
+</video>
+<div class="sentence">
+	<span class="author">{{$block->data->video->author}}</span>
+</div>
+@elseif($block->type == "carousel")
+<div class="horizontal_carousel_container gallery">
+	<ul class="horizontal_carousel visible-5 autoplay-1 scroll-1 navigation-1 easing-easeInOutQuint duration-750">
+		@foreach($block->data->items as $image)
+		<?php
+			if(isset($image->image->imageWide))
+				$img = $image->image->imageWide;
+			else if(isset($block->data->image->crop))
+			$image = $block->data->image->crop;
+			else if(isset($image->image->crops) && isset($image->image->crops->{'16:9'}))
+				foreach($image->image->crops->{'16:9'} as $img) break;
+			else if(isset($image->image->imageHigh))
+			$img = $image->image->imageHigh;
+		else $img = null;
+		?>
+		@if($img)
+		<li>
+			<a href="{{$img}}" class="post_image prettyPhoto" rel="prettyPhoto[gallery]"
+				title="{{$image->image->title}} &copy; {{$image->image->author}}">
+				<img src="{{$img}}" alt="{{$image->image->title}}" title="{{$image->image->title}}">
+			</a>
+		</li>
+		@endif
+		@endforeach
+	</ul>
+</div>
+@elseif($block->type == "oembed")
+<div class="oembed" data-url="{{$block->data->url}}">{!!$block->data->html!!}</div>
+@elseif($block->type == "podcast" && $block->data->id == $news->podcast?->id)
+@include('widgets/podcastplayer', ['podcast' => $news->podcast])
+<? $news->podcast = null; // Avoid adding the player again ?>
+@elseif($block->type == 'article' && count($block->data->articles) && $block->data->articles[0]->published)
+<div class="block">
+	<h4 class="box_header"><span>{{ $block->data->title }}</span></h4>
+	<div class="box full-width">
+		<ul id="items-more-news" class="blog">
+			@foreach($block->data->articles as $article)
+			<? 	if(!isset($article->published)) continue;
+				$article->published = new \DateTime($article->published); ?>
+			<li class="post">
+				<div class="row">
+					@if($article->image)
+					<div class="col-4">
+						<a href="{{ route('nieuws.detail', ['id' => $article->id, 'title' => $article->slug]) }}"
+							title="{{ $article->title }}">
+							<img src="{{ $article->image[0] == '/' ? '' : '/' }}{{ $article->image }}" alt="{{ $article->image_title }}">
+						</a>
+					</div>
+					@endif
+					<div class="col-8">
+						<h2 class="post_title"><a class="clipText clipText-3"
+								href="{{ route('nieuws.detail', ['id' => $article->id, 'title' => $article->slug]) }}"
+								title="{!! $article->title !!}">{!! $article->title !!}</a></h2>
+						<span class="post_date" title="Vandaag om 09:30">
+							<i class="fa-regular fa-clock"></i> 
+							{{Formatter::relativeDate($article->published)}} om {{$article->published->format('H:i')}}
+						</span>
+					</div>
+				</div>
+			</li>
+			@endforeach
+		</ul>
+	</div>
+</div>
+@elseif($block->type == 'iframe')
+  <iframe src="{{ $block->data->url }}" class="article-iframe" id="{{ $id = uniqid('iframe_') }}"></iframe>
+<style>
+@if(isset($block->data->ratio))
+#{{ $id }}.article-iframe {
+  aspect-ratio: {{ str_replace(":", "/", $block->data->ratio) }};
+}
+@endif
+
+@if(isset($block->data->ratioMobile))
+@media (max-width: 768px) {
+  #{{ $id }}.article-iframe {
+    aspect-ratio: {{ str_replace(":", "/", $block->data->ratioMobile) }};
+  }
+}
+@endif
+</style>
+@endif
+@endforeach

resources/views/partial/nh_story.blade.php

@@ -121,7 +121,7 @@
 					<div class="col-4">
 						<a href="{{ route('nieuws.detail', ['id' => $article->id, 'title' => $article->slug]) }}"
 							title="{{ $article->title }}">
-							<img src="{{ $article->image }}" alt="{{ $article->image_title }}">
+							<img src="{{ $article->image[0] == '/' ? '' : '/' }}{{ $article->image }}" alt="{{ $article->image_title }}">
 						</a>
 					</div>
 					@endif
@@ -140,5 +140,22 @@
 		</ul>
 	</div>
 </div>
+@elseif($block->type == 'iframe')
+  <iframe src="{{ $block->url }}" class="article-iframe" id="{{ $id = uniqid('iframe_') }}"></iframe>
+<style>
+@if(isset($block->ratio))
+#{{ $id }}.article-iframe {
+  aspect-ratio: {{ str_replace(":", "/", $block->ratio) }};
+}
+@endif
+
+@if(isset($block->ratioMobile))
+@media (max-width: 768px) {
+  #{{ $id }}.article-iframe {
+    aspect-ratio: {{ str_replace(":", "/", $block->ratioMobile) }};
+  }
+}
+@endif
+</style>
 @endif
 @endforeach

resources/views/podcastitem.blade.php

@@ -112,14 +112,19 @@
 							</ul>
 
 							<div class="announcement">
-								<audio controls>
-									<source src="{{$streamUrl}}" type="audio/mpeg"/>
-								</audio>
+								@include("widgets.audioplayer", [
+									'isStream' => false,
+									'source' => $streamUrl,
+									'lengte' => $podcast->duration / 1000,
+									'waveform' => $podcast->waveform
+								])
+
 								<div class="clearfix">
-									<a class="action_button btn" href="{{$audioUrl}}" title="Download dit fragment als MP3">
+									<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}}">
+									<a class="action_button btn player" href="{{$popoutUrl}}" onclick="pause()">
 										<span>Luister in nieuw venster</span>
 									</a>
 								</div>
@@ -156,7 +161,8 @@
 						<div data-tabs>
 							<div class="tabs">
 								<h4 data-tab-content-id="tab_more_fragmenten"
-									class="box_header small flex-grow-1 active"><span>Meer {{$isPodcast ? 'afleveringen' : 'fragmenten'}}</span>
+									class="box_header small flex-grow-1 active">
+									<span>Meer {{$isPodcast ? 'afleveringen' : 'fragmenten'}}</span>
 								</h4>
 							</div>
 							<div id="tab_more_fragmenten" class="box tab_content podcast_items active">
@@ -170,7 +176,7 @@
 						</div>
 					@endif
 
-					@include('widgets/add_sidebar', ['ad_sidebar' => $ad_sidebar1 ?? 'nhgooi_section_side', 'ad_sidebarId' => 'nhgooi_sidebar1'])
+					@include('widgets.banner_sidebar')
 				</div>
 			</div>
 	@endif

resources/views/podcastlist.blade.php

@@ -61,6 +61,7 @@
 
                     <div class="clearfix podcast_items">
                         @include('partial/podcastitems', [
+                            'id' => null,
                             'li' => [
                                 'class' => 'col-12 col-md-6'
                             ],
@@ -109,7 +110,7 @@
                     </div>
                 @endif
 
-                @include('widgets/add_sidebar', ['ad_sidebar' => $ad_sidebar1 ?? 'nhgooi_section_side', 'ad_sidebarId' => 'nhgooi_sidebar1'])
+                @include('widgets.banner_sidebar')
             </div>
         </div>
     </div>

resources/views/podcastseries.blade.php

@@ -73,7 +73,7 @@
                     </div>
                 @endif
 
-                @include('widgets/add_sidebar', ['ad_sidebar' => $ad_sidebar1 ?? 'nhgooi_section_side', 'ad_sidebarId' => 'nhgooi_sidebar1'])
+                @include('widgets.banner_sidebar')
             </div>
         </div>
     </div>

resources/views/programlist.blade.php

@@ -4,7 +4,9 @@
     Programma gemist
 @endsection
 
-@section('page_class')news_post post_container @endsection
+@section('page_class')
+    news_post post_container
+@endsection
 
 @section('breadcrumb')
     @if(isset($program))
@@ -51,7 +53,8 @@
                            class="btn btn-info">Programmainfo</a>
                     </p>
                 @else
-                    <p class="page_body">U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.<br /><br />
+                    <p class="page_body">U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven
+                        onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.<br/><br/>
                 @endif
 
                 @if(isset($programs))
@@ -106,18 +109,29 @@
                     </div>
                 @endif
 
-                @include('widgets/add_sidebar', ['ad_sidebar' => $ad_sidebar1 ?? 'nhgooi_section_side', 'ad_sidebarId' => 'nhgooi_sidebar1'])
+                @include('widgets.banner_sidebar')
             </div>
         </div>
     </div>
     <style>
         @keyframes tilt-shaking {
-        0% { transform: rotate(0deg); }
-        25% { transform: rotate(5deg); }
-        50% { transform: rotate(0deg); }
-        75% { transform: rotate(-5deg); }
-        100% { transform: rotate(0deg); }
+            0% {
+                transform: rotate(0deg);
             }
+            25% {
+                transform: rotate(5deg);
+            }
+            50% {
+                transform: rotate(0deg);
+            }
+            75% {
+                transform: rotate(-5deg);
+            }
+            100% {
+                transform: rotate(0deg);
+            }
+        }
+
         .post_container .post_tags li a {
             animation: tilt-shaking 1s linear infinite;
         }

resources/views/redactie.blade.php

@@ -0,0 +1,35 @@
+
+@extends('layouts/full')
+
+@section('title')
+    Nieuwsredactie
+@endsection
+
+@section('breadcrumb')
+    <ul class="bread_crumb">
+        <li><a title="Home" href="/">Home</a></li>
+        <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
+        <li><a title="NH Gooi" href="{{route('contact')}}">NH Gooi</a></li>
+        <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
+        <li>Nieuwsredactie</li>
+    </ul>
+@endsection
+
+@section('content')
+
+    <div class="page_body">
+<p>De redactie van NHGooi staat onder leiding van chef-redactie en eindredacteur Marco Willemse. Samen met een professioneel team van betaalde redacteuren werkt hij dagelijks aan het maken van onafhankelijk, relevant en toegankelijk nieuws voor Gooi &amp; Vechtstreek.</p>
+
+<p>Onze redactie wordt ondersteund door een enthousiaste groep vrijwilligers en studenten. Samen zorgen zij voor actuele berichtgeving via onze online kanalen, radio en televisie. We streven naar een redactie die steeds beter aansluit op de diversiteit van onze regio en bouwen stap voor stap aan een herkenbare en toegankelijke nieuwsvoorziening voor alle inwoners.</p>
+
+<p>Benieuwd waar wij journalistiek voor staan? Lees meer over onze visie en werkwijze in <a href="uploads/Rol en ambitie - NHGooi als onafhankelijke streekomroep voor Gooi 2025.pdf"><span class="fa fa-download"></span> Rol en ambities binnen de lokale nieuwsvoorziening van NHGooi</a>.</p>
+
+<hr />
+<p>
+                    <b>Chef redactie</b><br>
+                    Marco Willemse<br>
+                    {{Html::mailto('marco.willemse@nhgooi.nl')}}<br><br>
+                </p>
+    </div>
+
+@endsection

resources/views/tvgids.blade.php

@@ -8,11 +8,10 @@
 @section('content')
 
     <div class="page_body">
-<p>NH Gooi TV zendt iedere dag de NH Gooi Nieuwscarrousel uit.
-De nieuwscarrousel start steeds op het hele uur en bestaat uit reportages uit Gooi en Vechtstreek, gericht op de kijkers van NH Gooi.
-</p>
-<p>
-De programmering van NH Gooi TV wordt af en toe  aangevuld met speciale programma’s, zoals bijvoorbeeld een talkshow of een registratie van een plaatselijk muziekfestijn. Deze programma’s worden aangekondigd op onze website.
-</p>
+<p>NHGooi TV zendt iedere dag de NH Gooi Nieuwscarrousel uit. De nieuwscarrousel start steeds op het hele uur en bestaat uit reportages uit Gooi en Vechtstreek, gericht op de kijkers van NH Gooi. Daarnaast vind je op NHGooi TV achtergronden, lokale reportages, cultuur, sport en politiek. NHGooi TV brengt verhalen uit alle hoeken van Gooi &amp; Vechtstreek, met programma’s die zijn gemaakt door onze redactie of in samenwerking met regionale partners. De programmering sluit aan bij onze publieke opdracht en is gericht op herkenning, betrokkenheid en actualiteit.</p>
+
+<p>De programmering van NH Gooi TV wordt af en toe aangevuld met speciale programma’s, zoals bijvoorbeeld een talkshow of een registratie van een plaatselijk muziekfestijn. Deze programma’s worden aangekondigd op onze website.</p>
+
+<p><a href="/kijk/live">Kijk hier online naar NHGooi TV</a>.</p>
     </div>
 @endsection

resources/views/tvprogrammering.blade.php

@@ -1,18 +0,0 @@
-
-@extends('layouts/full')
-
-@section('title')
-    Televisieprogrammering
-@endsection
-
-@section('content')
-
-    <div class="page_body">
-<p>NH Gooi TV zendt iedere dag de NH Gooi Nieuwscarrousel uit.
-De nieuwscarrousel start steeds op het hele uur en bestaat uit reportages uit Gooi en Vechtstreek, gericht op de kijkers van NH Gooi.
-</p>
-<p>
-De programmering van NH Gooi TV wordt af en toe  aangevuld met speciale programma’s, zoals bijvoorbeeld een talkshow of een registratie van een plaatselijk muziekfestijn. Deze programma’s worden aangekondigd op onze website.
-</p>
-    </div>
-@endsection

resources/views/widgets/add_sidebar.blade.php

@@ -1,7 +0,0 @@
-@if ($ad_sidebar && (!isset($disableBanners) || !$disableBanners))
-    <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
-        - Advertentie -
-    </div>
-    <div id="{{$ad_sidebarId}}" style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
-    <script type="text/javascript">ootag.queue.push(function () {ootag.defineSlot({adSlot: "{{$ad_sidebar}}",targetId: "{{$ad_sidebarId}}",adShownCallback: (adslot) => { calculateSize(adslot.targetId); }});});</script>
-@endif

resources/views/widgets/audioplayer.blade.php

@@ -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

resources/views/widgets/banner_sidebar.blade.php

@@ -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

resources/views/widgets/contact.blade.php

@@ -2,8 +2,7 @@
     <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:06 - 42 91 36 37" target="_blank">06 - 42 91 36 37</a>, stuur een
-        <a href="mailto:info@nhgooi.nl">mail</a> of kom langs op de Gooise Brink,
-        Kerkstraat 63/27 in Hilversum</p>
+        <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>

resources/views/widgets/menu.blade.php

@@ -23,6 +23,7 @@
 		"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",
 		),
@@ -31,9 +32,10 @@
 		"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",
+				// "Rol en ambities lokale nieuwsvoorziening" => "/uploads/Eigen rol en ambities NH Gooi binnen de lokale nieuwsvoorziening.pdf",
 				"Frequenties" => "/frequenties",
 				"NH Gooi-app" => "/app"
 		),
@@ -145,4 +147,3 @@ function buildMenu($menu, $ismobile)
 	</ul>
 	</nav>
 </div>
-

resources/views/widgets/nhgooiradiotv.blade.php

@@ -5,7 +5,7 @@
         <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">
+    <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>
@@ -13,7 +13,7 @@
         <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">
+    <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')

resources/views/widgets/nustraks.blade.php

@@ -8,8 +8,8 @@
 @endif
 <p class="now-playing-header-small">
 	<strong>Nu:</strong>
-	<span class="title"></span> -
-	<span class="artist"></span>
+	<span class="artist"></span> -
+	<span class="title"></span>
 </p>
 <script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
 <script>

routes/web.php

@@ -92,6 +92,7 @@ Route::get('/frequenties', 'Controller@view_frequenties')->name('frequenties');
 Route::get('/adverteren', 'Controller@view_adverteren')->name('adverteren');
 Route::get('/klachten', 'Controller@view_klachten')->name('klachten');
 Route::get('/app', 'Controller@view_app')->name('app');
+Route::get('/redactie', 'Controller@view_redactie')->name('redactie');
 
 Route::get('/disclaimer', 'Controller@view_disclaimer')->name('disclaimer');
 Route::get('/privacy-verklaring', 'Controller@view_privacy_verklaring')->name('privacy_verklaring');

vendor/composer/ClassLoader.php

@@ -45,35 +45,34 @@ class ClassLoader
     /** @var \Closure(string):void */
     private static $includeFile;
 
-    /** @var ?string */
+    /** @var string|null */
     private $vendorDir;
 
     // PSR-4
     /**
-     * @var array[]
-     * @psalm-var array<string, array<string, int>>
+     * @var array<string, array<string, int>>
      */
     private $prefixLengthsPsr4 = array();
     /**
-     * @var array[]
-     * @psalm-var array<string, array<int, string>>
+     * @var array<string, list<string>>
      */
     private $prefixDirsPsr4 = array();
     /**
-     * @var array[]
-     * @psalm-var array<string, string>
+     * @var list<string>
      */
     private $fallbackDirsPsr4 = array();
 
     // PSR-0
     /**
-     * @var array[]
-     * @psalm-var array<string, array<string, string[]>>
+     * List of PSR-0 prefixes
+     *
+     * Structured as array('F (first letter)' => array('Foo\Bar (full prefix)' => array('path', 'path2')))
+     *
+     * @var array<string, array<string, list<string>>>
      */
     private $prefixesPsr0 = array();
     /**
-     * @var array[]
-     * @psalm-var array<string, string>
+     * @var list<string>
      */
     private $fallbackDirsPsr0 = array();
 
@@ -81,8 +80,7 @@ class ClassLoader
     private $useIncludePath = false;
 
     /**
-     * @var string[]
-     * @psalm-var array<string, string>
+     * @var array<string, string>
      */
     private $classMap = array();
 
@@ -90,21 +88,20 @@ class ClassLoader
     private $classMapAuthoritative = false;
 
     /**
-     * @var bool[]
-     * @psalm-var array<string, bool>
+     * @var array<string, bool>
      */
     private $missingClasses = array();
 
-    /** @var ?string */
+    /** @var string|null */
     private $apcuPrefix;
 
     /**
-     * @var self[]
+     * @var array<string, self>
      */
     private static $registeredLoaders = array();
 
     /**
-     * @param ?string $vendorDir
+     * @param string|null $vendorDir
      */
     public function __construct($vendorDir = null)
     {
@@ -113,7 +110,7 @@ class ClassLoader
     }
 
     /**
-     * @return string[]
+     * @return array<string, list<string>>
      */
     public function getPrefixes()
     {
@@ -125,8 +122,7 @@ class ClassLoader
     }
 
     /**
-     * @return array[]
-     * @psalm-return array<string, array<int, string>>
+     * @return array<string, list<string>>
      */
     public function getPrefixesPsr4()
     {
@@ -134,8 +130,7 @@ class ClassLoader
     }
 
     /**
-     * @return array[]
-     * @psalm-return array<string, string>
+     * @return list<string>
      */
     public function getFallbackDirs()
     {
@@ -143,8 +138,7 @@ class ClassLoader
     }
 
     /**
-     * @return array[]
-     * @psalm-return array<string, string>
+     * @return list<string>
      */
     public function getFallbackDirsPsr4()
     {
@@ -152,8 +146,7 @@ class ClassLoader
     }
 
     /**
-     * @return string[] Array of classname => path
-     * @psalm-return array<string, string>
+     * @return array<string, string> Array of classname => path
      */
     public function getClassMap()
     {
@@ -161,8 +154,7 @@ class ClassLoader
     }
 
     /**
-     * @param string[] $classMap Class to filename map
-     * @psalm-param array<string, string> $classMap
+     * @param array<string, string> $classMap Class to filename map
      *
      * @return void
      */
@@ -180,23 +172,24 @@ class ClassLoader
      * appending or prepending to the ones previously set for this prefix.
      *
      * @param string              $prefix  The prefix
-     * @param string[]|string $paths   The PSR-0 root directories
+     * @param list<string>|string $paths   The PSR-0 root directories
      * @param bool                $prepend Whether to prepend the directories
      *
      * @return void
      */
     public function add($prefix, $paths, $prepend = false)
     {
+        $paths = (array) $paths;
         if (!$prefix) {
             if ($prepend) {
                 $this->fallbackDirsPsr0 = array_merge(
-                    (array) $paths,
+                    $paths,
                     $this->fallbackDirsPsr0
                 );
             } else {
                 $this->fallbackDirsPsr0 = array_merge(
                     $this->fallbackDirsPsr0,
-                    (array) $paths
+                    $paths
                 );
             }
 
@@ -205,19 +198,19 @@ class ClassLoader
 
         $first = $prefix[0];
         if (!isset($this->prefixesPsr0[$first][$prefix])) {
-            $this->prefixesPsr0[$first][$prefix] = (array) $paths;
+            $this->prefixesPsr0[$first][$prefix] = $paths;
 
             return;
         }
         if ($prepend) {
             $this->prefixesPsr0[$first][$prefix] = array_merge(
-                (array) $paths,
+                $paths,
                 $this->prefixesPsr0[$first][$prefix]
             );
         } else {
             $this->prefixesPsr0[$first][$prefix] = array_merge(
                 $this->prefixesPsr0[$first][$prefix],
-                (array) $paths
+                $paths
             );
         }
     }
@@ -227,7 +220,7 @@ class ClassLoader
      * appending or prepending to the ones previously set for this namespace.
      *
      * @param string              $prefix  The prefix/namespace, with trailing '\\'
-     * @param string[]|string $paths   The PSR-4 base directories
+     * @param list<string>|string $paths   The PSR-4 base directories
      * @param bool                $prepend Whether to prepend the directories
      *
      * @throws \InvalidArgumentException
@@ -236,17 +229,18 @@ class ClassLoader
      */
     public function addPsr4($prefix, $paths, $prepend = false)
     {
+        $paths = (array) $paths;
         if (!$prefix) {
             // Register directories for the root namespace.
             if ($prepend) {
                 $this->fallbackDirsPsr4 = array_merge(
-                    (array) $paths,
+                    $paths,
                     $this->fallbackDirsPsr4
                 );
             } else {
                 $this->fallbackDirsPsr4 = array_merge(
                     $this->fallbackDirsPsr4,
-                    (array) $paths
+                    $paths
                 );
             }
         } elseif (!isset($this->prefixDirsPsr4[$prefix])) {
@@ -256,18 +250,18 @@ class ClassLoader
                 throw new \InvalidArgumentException("A non-empty PSR-4 prefix must end with a namespace separator.");
             }
             $this->prefixLengthsPsr4[$prefix[0]][$prefix] = $length;
-            $this->prefixDirsPsr4[$prefix] = (array) $paths;
+            $this->prefixDirsPsr4[$prefix] = $paths;
         } elseif ($prepend) {
             // Prepend directories for an already registered namespace.
             $this->prefixDirsPsr4[$prefix] = array_merge(
-                (array) $paths,
+                $paths,
                 $this->prefixDirsPsr4[$prefix]
             );
         } else {
             // Append directories for an already registered namespace.
             $this->prefixDirsPsr4[$prefix] = array_merge(
                 $this->prefixDirsPsr4[$prefix],
-                (array) $paths
+                $paths
             );
         }
     }
@@ -277,7 +271,7 @@ class ClassLoader
      * replacing any others previously set for this prefix.
      *
      * @param string              $prefix The prefix
-     * @param string[]|string $paths  The PSR-0 base directories
+     * @param list<string>|string $paths  The PSR-0 base directories
      *
      * @return void
      */
@@ -295,7 +289,7 @@ class ClassLoader
      * replacing any others previously set for this namespace.
      *
      * @param string              $prefix The prefix/namespace, with trailing '\\'
-     * @param string[]|string $paths  The PSR-4 base directories
+     * @param list<string>|string $paths  The PSR-4 base directories
      *
      * @throws \InvalidArgumentException
      *
@@ -429,7 +423,8 @@ class ClassLoader
     public function loadClass($class)
     {
         if ($file = $this->findFile($class)) {
-            (self::$includeFile)($file);
+            $includeFile = self::$includeFile;
+            $includeFile($file);
 
             return true;
         }
@@ -480,9 +475,9 @@ class ClassLoader
     }
 
     /**
-     * Returns the currently registered loaders indexed by their corresponding vendor directories.
+     * Returns the currently registered loaders keyed by their corresponding vendor directories.
      *
-     * @return self[]
+     * @return array<string, self>
      */
     public static function getRegisteredLoaders()
     {
@@ -560,7 +555,10 @@ class ClassLoader
         return false;
     }
 
-    private static function initializeIncludeClosure(): void
+    /**
+     * @return void
+     */
+    private static function initializeIncludeClosure()
     {
         if (self::$includeFile !== null) {
             return;
@@ -574,8 +572,8 @@ class ClassLoader
          * @param  string $file
          * @return void
          */
-        self::$includeFile = static function($file) {
+        self::$includeFile = \Closure::bind(static function($file) {
             include $file;
-        };
+        }, null, null);
     }
 }

vendor/composer/autoload_real.php

@@ -34,15 +34,15 @@ class ComposerAutoloaderInit5216a35d72a5119d2f4646cd700f802d
         $loader->register(true);
 
         $filesToLoad = \Composer\Autoload\ComposerStaticInit5216a35d72a5119d2f4646cd700f802d::$files;
-        $requireFile = static function ($fileIdentifier, $file) {
+        $requireFile = \Closure::bind(static function ($fileIdentifier, $file) {
             if (empty($GLOBALS['__composer_autoload_files'][$fileIdentifier])) {
                 $GLOBALS['__composer_autoload_files'][$fileIdentifier] = true;
 
                 require $file;
             }
-        };
+        }, null, null);
         foreach ($filesToLoad as $fileIdentifier => $file) {
-            ($requireFile)($fileIdentifier, $file);
+            $requireFile($fileIdentifier, $file);
         }
 
         return $loader;