Now playing en mega menu

website/app/Http/Controllers/Controller.php

@@ -17,7 +17,7 @@ class Controller extends BaseController
  
     protected $API_URL;
  
-	private function getDataFromFileAndConvert($file, $path, $class) 
+	private function getDataFromFileAndConvert($file, $path, $class, $maxItems = 0) 
 	{
 		$data = json_decode(Storage::disk('local')->get($file));
 		foreach($path as $subobject) { $data = $data->$subobject; }
@@ -25,6 +25,7 @@ class Controller extends BaseController
 		foreach($data as $item_data) 
 		{
 			$items[] = new $class($item_data);
+			if($maxItems && count($items) == $maxItems) { break; }
 		}
 
 		return $items;
@@ -33,6 +34,7 @@ class Controller extends BaseController
     public function __construct()
     {
 		View::share('apiUrl', $this->API_URL = env('API_URL', 'http://api.6fm.nl/'));
+		//View::share('onAir', file_get_contents(url('onair')));
 		View::composer('widgets.laatstenieuws', function($view) {
 			$view->with('data', $this->getDataFromFileAndConvert('laatste_nieuws.json', ['news'], '\Model\NewsItem'));
 		});
@@ -55,6 +57,11 @@ class Controller extends BaseController
 		View::composer('widgets.laatstepodcasts', function($view) {
 			$view->with('data', $this->getDataFromFileAndConvert('laatste_podcasts.json', ['podcasts'], '\Model\Podcast'));
 		});
+		View::composer('widgets.menu', function($view) {
+			$view->with('news', $this->getDataFromFileAndConvert('laatste_nieuws.json', ['news'], '\Model\NewsItem'))
+				->with('popular', $this->getDataFromFileAndConvert('populair_nieuws.json', [], '\Model\NewsItem', 3))
+				->with('podcasts', $this->getDataFromFileAndConvert('laatste_podcasts.json', ['podcasts'], '\Model\Podcast'));
+		});
     }
  
     protected function registerView(Request $request, $type, $id)

website/app/Http/Controllers/RadioController.php

@@ -29,7 +29,7 @@ class RadioController extends Controller
  
     public function onair()
     {
-        return $this->API('programma/schema/onair')->current->name;
+        return response()->json($this->API('programma/schema/onair?nonstop=1'));
     }
 
     public function program($id) 

website/public/css/nhgooi.css

@@ -9,12 +9,66 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
 }
 
 
-@media screen and (max-width:479px) {
+@media screen and (max-width:1069px) {
 	.row .column {
 		width: 100%;
 	}
+
+	.header .placeholder .controls li a {
+		width: 30px;
+	}
+
+		.header .placeholder .controls li a label {
+			display: none;
+		}
 }
 
+.header .placeholder {
+	display: block;
+	position: relative;
+	margin: 0;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	height: 90px;
+}
+
+	.header .placeholder .title,
+	.header .placeholder .artist {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.header .placeholder .title {
+		font-weight: bold;
+	}
+
+	.header .placeholder .controls {
+		font-size: 75%;
+		bottom: 0;
+		position: absolute;
+		width: 100%;
+	}
+
+	.header .placeholder .controls li {
+		display: inline-block;
+	}
+
+		.header .placeholder .controls li a {
+			line-height: 120%;
+			font-size: 80%;
+			color: #ABABAB;
+			display: block;
+			padding: 4px;
+			margin-left: 5px;
+			margin-right: 5px;
+		}
+
+			.header .placeholder .controls li a:hover {
+				background-color: #E0E0E0;
+				transition: 500ms;
+			}
+
 .page_header_left {
 	width: auto;
 	float: none;

website/resources/views/layouts/master.blade.php

@@ -269,10 +269,33 @@
 						<h1><a href="?page=home" title="Pressroom">Pressroom</a></h1>
 						<h4>News and Magazine Template</h4>
 						-->
-						<img src="/images/logo.png" class="ri" />
+						<a href="{{url('/')}}"><img src="/images/logo.png" class="ri" /></a>
 					</div>
 					<div class="placeholder">
-						On air: Vroeger of Later
+						<div class="title">{{Formatter::fullDate(new \DateTimeImmutable(), 'd m y')}}</div>
+						<div class="sub artist"></div>
+						<div class="controls">
+							<ul>
+								<li class="program-link">
+									<a href='{{url('radio/gids')}}' title="Bekijk het huidige programma in de programmagids">
+										<span class="fa fa-info"></span>
+										<label>Programmagids</label>
+									</a>	
+								</li>
+								<li class="listen-live"> 
+									<a href='{{url('luister/live')}}' title="Luister live naar NH Gooi Radio">
+										<span class="fa fa-play"></span>
+										<label>Luister NH Gooi Radio</label>
+									</a>
+								</li>
+								<li class="watch-live">  
+									<a href='{{url('kijk/live')}}' title="Kijk live naar NH Gooi TV">
+										<span class="fa fa-camera"></span>
+										<label>Kijk NH Gooi TV</label>
+									</a>
+								</li>
+							</ul>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -541,6 +564,36 @@
 		<script type="text/javascript" src="/js/jquery.blockUI.js"></script>
 		<script type="text/javascript" src="/js/main.js"></script>
 		<script type="text/javascript" src="/js/odometer.min.js"></script>
+		<script type="text/javascript">
+			function updateOnAir() {
+				$.ajax({
+					url: '{{url('onair')}}', 
+					success: function(data) {
+						$(document).trigger('onAirUpdated', data);
+					}
+				});
+			}
+
+			$(updateOnAir);
+			var onAirUpdater = setInterval(updateOnAir, 5000);
+			var $nowPlaying = { 
+				title: $(".placeholder .title"),
+				artist: $(".placeholder .artist"),
+				programLink: $(".placeholder .program-link a"),
+				programLabel: $(".placeholder .program-link a > label")
+			};
+			$(document).on('onAirUpdated', function(evt, data) {
+				if(data.inProgram) {
+					$nowPlaying.title.text(data.program.name).attr('title', data.program.name);
+					$nowPlaying.artist.text("");
+				} else {
+					$nowPlaying.programLabel.text(data.program.name).attr('title', data.program.name + "\n" + data.program.tagline);
+					$nowPlaying.title.text(data.current.title).attr('title', data.current.title);
+					$nowPlaying.artist.text(data.current.artist).attr('title', data.current.artist);
+				}
+				$nowPlaying.programLink.attr('href', '{{url("radio/programma")}}' + data.program.url);
+			});
+		</script>
 		@stack('scripts')
 	</body>
 </html>

website/resources/views/listen.blade.php

@@ -31,14 +31,19 @@
 
    <p>
      <b>Nu op NH Gooi:</b>
-     <span id="nowonair">{{file_get_contents(url('onair'))}}</span>
+     <span id="nowonair"></span>
      <script type="text/javascript">
-       setInterval(function updateNowPlaying() { $.ajax({ 
+       setInterval(function() { 
+         $.ajax({ 
            'url': '{{url('onair')}}',
-           'success': function(data, status, xhr) {
-               $("#nowonair").text(data);
-           }
-       }); }, 5000);
+           'success': updateNowPlaying
+          }); 
+       }, 5000);
+
+       updateNowPlaying({!!file_get_contents(url('onair'))!!});
+       function updateNowPlaying(data) {
+         $("#nowonair").text(data.program.name);
+       }
      </script>
      @if(!$isStream) <br />
        <a href="{{ url( 'luister/live' ) }}" class="btn-link"><span class='fa fa-fw fa-play'></span> Luister live</a> 

website/resources/views/newslist.blade.php

@@ -172,9 +172,11 @@
 			</div>
 
 			<div class="column column_1_3">
+
 				<h4 class="box_header"><span class="fa fa-fire"></span> &nbsp; Meest gelezen</h4>
 				@include('widgets.populairnieuws')
 
+				@include('widgets.nustraks')
 
 				<h4 class="page_margin_top box_header"><span class="fa fa-history"></span> &nbsp; Laatste podcasts</h4>
 				@include('widgets.laatstepodcasts')	
@@ -194,10 +196,10 @@
 
 				<ul class="taxonomies clearfix page_margin_top">
 				@foreach($regions as $slug => $title) 
-					<li><a href="{{url('nieuws/regio/' . $slug)}}" title="Meer nieuws uit regio {{$title}}"><span class="fa fa-map-marker"></span> {{$title}}</a></li>
+					<li><a href="{{url('nieuws/regio/' . $slug)}}" title="Meer nieuws uit regio {{$title}}"><span class="fa fa-map-marker"></span> Uit {{$title}}</a></li>
 				@endforeach
 				@foreach($themes as $slug => $title) 
-					<li class="active"><a href="{{url('nieuws/thema/' . $slug)}}" title="Meer nieuws met thema {{$title}}"><span class="fa fa-tag"></span> {{$title}}</a></li>
+					<li class="active"><a href="{{url('nieuws/thema/' . $slug)}}" title="Meer nieuws met thema {{$title}}"><span class="fa fa-tag"></span> Over {{$title}}</a></li>
 				@endforeach
 				</ul>
 				@endif

website/resources/views/widgets/laatstepodcasts.blade.php

@@ -6,10 +6,10 @@
 		</a>
 		<div class="post_content">
 			<h5>
-				<a href="{{url($podcast->url)}}" title="{{$podcast->title}}">{{$podcast->title}}</a>
+				<a href="{{url('radio/gemist/fragment/' . $podcast->url)}}" title="{{$podcast->title}}">{{$podcast->title}}</a>
 			</h5>
 			<ul class="post_details simple">
-				<li class="category"><a href="{{url($podcast->program->url)}}" title="{{$podcast->program->name}}">{{$podcast->program->name}}</a></li>
+				<li class="category"><a href="{{url('radio/gemist/programma' . $podcast->program->url)}}" title="{{$podcast->program->name}}">{{$podcast->program->name}}</a></li>
 				<li class="date">
 					{{Formatter::relativeDate($podcast->created)}}
 				</li>

website/resources/views/widgets/menu.blade.php

@@ -1,5 +1,4 @@
 <?php $menu = array(
-"Nieuws" => "/nieuws",
 "Radio" => array(
 	"" => "/radio",
 	"Luister live" => "/luister/live",
@@ -12,6 +11,7 @@
 "Regioagenda" => "/agenda",
 "Contact" => "/contact");
 ?>
+@php($imgBase = 'https://nhgooi.nl')
 <?php
 function isActive($link, $checksubmenus) {
 	if(is_array($link)) {
@@ -50,8 +50,96 @@ function buildMenu($menu, $ismobile) {
 }
 ?>
 <nav>
-<!-- TODO: Mark selected, recursive menus, listen / watch icons -->
 <ul class="sf-menu">
+@php($newsUrl = '/nieuws')
+@if($news)
+	<li class="submenu mega_menu_parent {{isActive($newsUrl, false) ? "selected" : ""}}">
+		<a href="{{$newsUrl}}" title="Nieuws">
+			Nieuws
+		</a>
+		<ul>
+			<li class="submenu">
+				<a href="{{$newsUrl}}" title="Laatste nieuws">
+					Laatste nieuws
+				</a>
+				<ul class="mega_menu blog">
+					@foreach($news as $item)
+					<li class="post">
+						@if($item->images && count($item->images))
+						<a href="{{url($item->url)}}" title="{{$item->title}}">
+							<img src='{{$imgBase . $item->images[0]->url}}' alt='{{$item->title}}'>
+						</a>
+						@endif
+						<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5>
+						<ul class="post_details simple">
+							<li class="category">{{$item->region->title}}</li>
+							<li class="date">
+								{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}} uur
+							</li>
+						</ul>
+					</li>
+					@endforeach
+				</ul>
+			</li>
+	@if($popular)
+			<li class="submenu">
+				<a href="{{$newsUrl}}" title="Meest gelezen">
+					Meest gelezen
+				</a>
+				<ul class="mega_menu blog">
+					@foreach($popular as $item)
+					<li class="post">
+						@if($item->images && count($item->images))
+						<a href="{{url($item->url)}}" title="{{$item->title}}">
+							<img src='{{$imgBase . $item->images[0]->url}}' alt='{{$item->title}}'>
+						</a>
+						@endif
+						<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5>
+						<ul class="post_details simple">
+							<li class="category">{{$item->region->title}}</li>
+							<li class="date">
+								{{Formatter::relativeDate($item->published)}}
+							</li>
+						</ul>
+					</li>
+					@endforeach
+				</ul>
+			</li>
+	@endif
+	@if($podcasts)
+			<li class="submenu">
+				<a href="{{url('/radio/gemist')}}" title="Fragment gemist">
+					Fragment gemist
+				</a>
+				<ul class="mega_menu blog">
+					@foreach($podcasts as $item)
+					<li class="post">
+						@if($item->image)
+						<a href="{{url('/radio/gemist/fragment/' . $item->url)}}" title="{{$item->title}}">
+							<img src='{{$imgBase . $item->image->url}}' alt='{{$item->title}}'>
+						</a>
+						@endif
+						<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5>
+						<ul class="post_details simple">
+							@if($item->program)
+							<li class="category">{{$item->program->name}}</li>
+							@endif
+							<li class="date">
+								{{Formatter::relativeDate($item->created)}}
+							</li>
+						</ul>
+					</li>
+					@endforeach
+				</ul>
+			</li>
+	@endif
+		</ul>
+	</li>
+@else
+	<li class="{{isActive($newsUrl, false) ? "selected" : ""}}">
+		<a href="{{$newsUrl}}" title="Nieuws">Nieuws</a>
+	</li>
+@endif
 {!! buildMenu($menu, false) !!}
 </ul>
 </nav>

website/resources/views/widgets/nustraks.blade.php

@@ -1,4 +1,4 @@
-<h4 class="box_header"><span class="fa fa-music"></span> &nbsp; Nu op NH Gooi Radio</h4>
+<h4 class="page_margin_top box_header"><span class="fa fa-music"></span> &nbsp; Nu op NH Gooi Radio</h4>
 
 <div class="clearfix">
 
@@ -25,9 +25,9 @@
 @php($startDay = $program->start->format('d'))
 @foreach($data as $program)
 	@php($isToday = $program->start->format('d') == $startDay)
-	@if($loop->index > 10)
+	@if($loop->index > 5)
 		@break 
-	@elseif(($loop->index > 3) && (!$isToday) && $program->nonstop)
+	@elseif(($loop->index >= 3) && $program->nonstop)
 		@break
 	@elseif(!$loop->first)
 		<li class="bullet style_2"><a href="{{url($program->url)}}" title="{{$program->name}}">
@@ -37,6 +37,7 @@
 		@if($program->tagline)
 		<li class="bullet text-muted">{{$program->tagline}}</li>
 		@endif
+
 	@endif
 @endforeach
 </ul>

website/routes/web.php

@@ -25,11 +25,11 @@ Route::get('/nieuws/zoeken', function(Illuminate\Http\Request $request) {
   return redirect('/nieuws');
 });
 
+Route::get('/onair', 'RadioController@onair');
+
 Route::get('/agenda', 'CalendarController@overview');
 Route::get('/agenda/{id}/{title}', 'CalendarController@show')->where(['id' => '\d+']);
 
-Route::get('/onair', 'RadioController@onair');
-
 Route::get('/radio/gids/{shift?}', 'RadioController@schedule')->where(['shift' => '-?\d+']);
 Route::get('/radio/programma/{id}/{title}', 'RadioController@program')->where(['id' => '\d+']);