From 1b1f4d4ebcdda029f930e6e838a2361214680d2c Mon Sep 17 00:00:00 2001
From: Mischa Spelt <mischa.spelt@nhgooi.nl>
Date: Wed, 26 Feb 2020 21:37:32 +0100
Subject: [PATCH] Changes before go-live

---
 .../app/Http/Controllers/RadioController.php  |  2 +
 website/public/css/nhgooi.css                 |  4 ++
 website/resources/views/programlist.blade.php | 17 +++++++
 .../views/widgets/mediaplayer.blade.php       | 45 +++++++++++--------
 .../resources/views/widgets/menu.blade.php    |  2 +-
 5 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/website/app/Http/Controllers/RadioController.php b/website/app/Http/Controllers/RadioController.php
index 4db7295e..95cd27e3 100644
--- a/website/app/Http/Controllers/RadioController.php
+++ b/website/app/Http/Controllers/RadioController.php
@@ -78,11 +78,13 @@ class RadioController extends Controller
     public function terugluisteren(Request $request)
 	{
 		$programs = [];
+		$now = new \DateTimeImmutable('2 minutes ago');
 		$apiResult = $this->API('programma/schema/recent');
 		foreach($apiResult->schedule as $item) {
 			if(!$item->program->nonstop && !$item->program->rerun) {
         			$item->start = self::JsonToDateTime($item->start);
 			        $item->end = self::JsonToDateTime($item->end);
+				$item->current = $item->end >= $now;
 				$item->program = new \Model\Program($item->program);
 				$programs[] = $item;
 			}
diff --git a/website/public/css/nhgooi.css b/website/public/css/nhgooi.css
index 5fa13dc5..8c8b3a7f 100644
--- a/website/public/css/nhgooi.css
+++ b/website/public/css/nhgooi.css
@@ -351,6 +351,10 @@ button[disabled]:hover
 	width: 100%;
 }
 
+.mega_menu a.fixed-height {
+	height: 135px;
+}
+
 a.fixed-height {
 	display: block;
 	position: relative;
diff --git a/website/resources/views/programlist.blade.php b/website/resources/views/programlist.blade.php
index c37c57d4..58acf103 100644
--- a/website/resources/views/programlist.blade.php
+++ b/website/resources/views/programlist.blade.php
@@ -50,6 +50,9 @@
             	<li class="post card column column_1_2">
             		<div class="post_content">
             			<h2><a href="{{$url}}" title="{{$program->program->name}}">{!!$program->program->name!!}</a></h2>
+				@if($program->current)
+				 <a href="{{route('luister.live')}}" class="onair action_button player"><span class="fa"></span> <span>Nu live!</span></a>
+				@else
             			<ul class="post_details" style="margin-top: 0;">
             				<li class="date">
             					{{ Formatter::relativeDate($program->start) }}
@@ -57,6 +60,7 @@
             				</li>
             			</ul>
 				 <a href="{{route('luister.programma') . '/' . $program->start->format('Y/m/d/H') . '/' . $duration}}"  class="action_button player"><span class="fa fa-play"></span> <span>Luister terug</span></a>
+				@endif
 				 <a href="{{route('programma') . $program->program->url}}"  class="action_button"><span class="fa fa-question"></span> <span>Meer informatie</span></a>
             			<div class="clearfix"></div>
             			<p>{!! Formatter::excerpt($program->program->description, 200) !!}</p>
@@ -75,10 +79,23 @@
   
 @endsection
 
+@push('scripts')
+<script type="text/javascript">
+var $onAirIcon = $('#items .onair span.fa');
+setInterval(function() { 
+	$onAirIcon.removeClass('fa-play');
+	setTimeout(function() { 
+		$onAirIcon.addClass('fa-play');
+	}, 500);
+}, 1000);
+</script>
+@endpush
+
 @push('styles')
 <style>
 #gemist_tabs li {
   width: 50%;
 }
+
 </style>
 @endpush
diff --git a/website/resources/views/widgets/mediaplayer.blade.php b/website/resources/views/widgets/mediaplayer.blade.php
index 10a5db13..0b3e5c62 100644
--- a/website/resources/views/widgets/mediaplayer.blade.php
+++ b/website/resources/views/widgets/mediaplayer.blade.php
@@ -1,20 +1,27 @@
-@push('scripts')
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
-<script type="text/javascript">
-  var pluginPath = 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/';
-  $("audio").mediaelementplayer({
-    pluginPath: pluginPath,
-    stretching: 'responsive',
-  });
-  $("video").mediaelementplayer({
-    pluginPath: pluginPath,
-    videoWidth: '100%',
-    videoHeight: '100%',
-    enableAutosize: true,
-  });
-</script>
-@endpush
+<?php 
+if(!isset($MEDIAPLAYER_INCLUDED)): 
+	// Make sure mediaplayer JS is not applied more than once on a page.
+	View::share('MEDIAPLAYER_INCLUDED', true); 
+?>
+	@push('scripts')
+	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
+	<script type="text/javascript">
+	  var pluginPath = 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/';
+	  $("audio").mediaelementplayer({
+	    pluginPath: pluginPath,
+	    stretching: 'responsive',
+	  });
+	  $("video").mediaelementplayer({
+	    pluginPath: pluginPath,
+	    videoWidth: '100%',
+	    videoHeight: '100%',
+	    enableAutosize: true,
+	  });
+	</script>
+	@endpush
 
-@push('styles')
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.css" />
-@endpush
+	@push('styles')
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.css" />
+	@endpush
+
+<?php endif; ?>
diff --git a/website/resources/views/widgets/menu.blade.php b/website/resources/views/widgets/menu.blade.php
index 2f24e6e5..3a6b3f16 100644
--- a/website/resources/views/widgets/menu.blade.php
+++ b/website/resources/views/widgets/menu.blade.php
@@ -123,7 +123,7 @@ function buildMenu($menu, $ismobile) {
 					@if($loop->index >= 3) @break @endif
 					<li class="post">
 						@if($item->image)
-						<a href="{{route('gemist.fragment') . $item->url}}" title="{{$item->title}}">
+						<a href="{{route('gemist.fragment') . $item->url}}" title="{{$item->title}}" class="fixed-height">
 							<img src='{{$imgBase . $item->image->url}}' alt='{{$item->title}}'>
 						</a>
 						@endif