Styled pages missed program and fragment missed

This commit is contained in:
Jorit Tijsen
2024-03-15 17:46:43 +01:00
parent eaea761366
commit 5187062cb1
19 changed files with 678 additions and 376 deletions

View File

@@ -131,6 +131,19 @@ class Controller extends BaseController
return json_decode(file_get_contents($this->API_URL . $url, false, stream_context_create($arrContextOptions))); return json_decode(file_get_contents($this->API_URL . $url, false, stream_context_create($arrContextOptions)));
} }
protected function checkAPI($url)
{
return $this->get_http_response_code($this->API_URL . $url);
}
protected function get_http_response_code($url)
{
$headers = get_headers($url);
return substr($headers[0], 9, 3);
}
protected static function JsonToDateTime($obj) protected static function JsonToDateTime($obj)
{ {
return new \DateTime($obj->date, new \DateTimeZone($obj->timezone)); return new \DateTime($obj->date, new \DateTimeZone($obj->timezone));

View File

@@ -53,8 +53,12 @@ class RadioController extends Controller
return view('radioprogram', ['program' => new \Model\Program($apiResult)]); return view('radioprogram', ['program' => new \Model\Program($apiResult)]);
} }
public function podcast(Request $request, $id) public function podcast(Request $request, $id, $title = '')
{ {
if($this->checkAPI('podcast/details/' . (int)$id) != "200"){
return view('podcastitem', array_merge($this->getSidebareData(), ['title' => $title, 'podcast' => null, 'metadata' => null, 'related' => [], 'searchURL' => 'gemist/zoeken']));
}
parent::registerView($request, 'podcast', $id); parent::registerView($request, 'podcast', $id);
$apiResult = $this->API('podcast/details/' . (int)$id); $apiResult = $this->API('podcast/details/' . (int)$id);
$podcast = new \Model\Podcast($apiResult); $podcast = new \Model\Podcast($apiResult);
@@ -69,7 +73,7 @@ class RadioController extends Controller
} }
} }
return view('podcastitem', array_merge($this->getSidebareData(), ['podcast' => $podcast, 'metadata' => $podcast->metadata, 'related' => $related, 'searchURL' => 'gemist/zoeken'])); return view('podcastitem', array_merge($this->getSidebareData(), ['title' => $title, 'podcast' => $podcast, 'metadata' => $podcast->metadata, 'related' => $related, 'searchURL' => 'gemist/zoeken']));
} }
public function podcasts(Request $request, $programma = null) public function podcasts(Request $request, $programma = null)
@@ -93,7 +97,8 @@ class RadioController extends Controller
{ {
$programs = []; $programs = [];
$now = new \DateTimeImmutable('2 minutes ago'); $now = new \DateTimeImmutable('2 minutes ago');
$apiResult = $this->API('programma/schema/recent'); $page = (int)$request->get('pagina', 1);
$apiResult = $this->API('programma/schema/recent?pagina=' . (int)max(1, $page) . '&aantal=12');
foreach($apiResult->schedule as $item) { foreach($apiResult->schedule as $item) {
if(!$item->program->nonstop && !$item->program->rerun) { if(!$item->program->nonstop && !$item->program->rerun) {
$item->start = self::JsonToDateTime($item->start); $item->start = self::JsonToDateTime($item->start);
@@ -104,7 +109,7 @@ class RadioController extends Controller
} }
} }
return view('programlist', array_merge($this->getSidebareData(), ['programs' => array_reverse($programs)])); return view($request->ajax() ? 'partial/programitems' : 'programlist', ['programs' => array_reverse($programs)]);
} }
private function getPodcastList(Request $request, $action, $viewData = []) private function getPodcastList(Request $request, $action, $viewData = [])
@@ -117,7 +122,7 @@ class RadioController extends Controller
$podcasts[] = new \Model\Podcast($podcast); $podcasts[] = new \Model\Podcast($podcast);
} }
return view($request->ajax() ? 'partial.podcastitems' : 'podcastlist', array_merge($viewData, ['podcasts' => $podcasts, 'searchURL' => 'gemist/zoeken'])); return view($request->ajax() ? 'partial/podcastitems' : 'podcastlist', array_merge($viewData, ['id' => 'items-podcasts', 'podcasts' => $podcasts, 'searchURL' => 'gemist/zoeken']));
} }
} }

56
public/css/style.css vendored
View File

@@ -545,7 +545,8 @@ body {
} }
.sidebar .box { .sidebar .box {
width: calc(100% - 38px); width: calc(100% - 43px);
padding: 20px 23px 20px 20px;
} }
.radio_box { .radio_box {
@@ -676,6 +677,11 @@ body {
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.podcast_items ul.row {
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.podcast_items ul li { .podcast_items ul li {
margin-bottom: 25px; margin-bottom: 25px;
} }
@@ -933,7 +939,6 @@ body {
.action_button { .action_button {
text-decoration: none; text-decoration: none;
color: #282828; color: #282828;
margin-right: 20px;
} }
.action_button .fa { .action_button .fa {
margin-right: 10px; margin-right: 10px;
@@ -1063,4 +1068,51 @@ body {
border: none; border: none;
} }
.clipText {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.clipText-1 {
-webkit-line-clamp: 1;
}
.clipText-2 {
-webkit-line-clamp: 2;
}
.clipText-3 {
-webkit-line-clamp: 3;
}
.clipText-4 {
-webkit-line-clamp: 4;
}
.clipText-5 {
-webkit-line-clamp: 5;
}
.clipText-6 {
-webkit-line-clamp: 6;
}
.clipText-7 {
-webkit-line-clamp: 7;
}
.clipText-8 {
-webkit-line-clamp: 8;
}
.clipText-9 {
-webkit-line-clamp: 9;
}
.clipText-10 {
-webkit-line-clamp: 10;
}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -8,3 +8,15 @@
.mejs__overlay-button { .mejs__overlay-button {
border: none; border: none;
} }
.clipText {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
@for $i from 1 through (10) {
.clipText-#{$i} {
-webkit-line-clamp: $i;
}
}

View File

@@ -15,7 +15,6 @@
.action_button { .action_button {
text-decoration: none; text-decoration: none;
color: #282828; color: #282828;
margin-right: 20px;
.fa { .fa {
margin-right: 10px; margin-right: 10px;

View File

@@ -3,6 +3,11 @@
.podcast_items { .podcast_items {
ul { ul {
@include reset-list; @include reset-list;
&.row {
margin-top: calc(-1* var(--bs-gutter-y));
margin-right: calc(-.5* var(--bs-gutter-x));
margin-left: calc(-.5* var(--bs-gutter-x));
}
li { li {
margin-bottom: 25px; margin-bottom: 25px;

View File

@@ -152,7 +152,7 @@
<script type="text/javascript"> <script type="text/javascript">
$(window).resize(function () { $(window).resize(function () {
// Fix sticky for mobile menu indicator // Fix sticky for mobile menu indicator
menu_position = $(".menu_container").offset().top; // menu_position = $(".menu_container").offset().top;
}); });
$(window).scroll(function () { $(window).scroll(function () {

View File

@@ -123,6 +123,9 @@
.now-playing-header { .now-playing-header {
width: 100%; width: 100%;
} }
.action_button {
margin-right: 20px;
}
</style> </style>
@endpush @endpush

View File

@@ -1,9 +1,31 @@
<ul> <?php
@foreach($podcasts as $podcast) $li = array_merge([
'class' => '',
'style' => ''
], $li ?? []);
$content = array_merge([
'class' => '',
'style' => '',
], $content ?? []);
$ul = array_merge([
'class' => ''
], $ul ?? []);
$body = array_merge([
'show' => false,
'class' => ''
], $body ?? []);
$actionButton = array_merge([
'class' => ''
], $actionButton ?? []);
?>
<ul id="{{$id ?? ''}}" class="{{$ul['class']}}">
@foreach($podcasts as $podcast)
<?php $url = route('gemist.fragment') . $podcast->url; ?> <?php $url = route('gemist.fragment') . $podcast->url; ?>
<li class="post"> <li style="{{$li['style']}}" class="post {{$li['class']}}">
<div class="post_content"> <div style="{{$content['style']}}" class="post_content {{$content['class']}}">
<h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2> <h2 class="post_title">
<a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a>
</h2>
<div class="sub_title"> <div class="sub_title">
@if ($podcast->program) @if ($podcast->program)
<a class="program_name" href="{{ route('programma') . $podcast->program->url }}" <a class="program_name" href="{{ route('programma') . $podcast->program->url }}"
@@ -20,6 +42,16 @@
<img src='{{$imgBase . $podcast->image->url}}' alt='{{$podcast->image->title}}'> <img src='{{$imgBase . $podcast->image->url}}' alt='{{$podcast->image->title}}'>
</a> </a>
@endif @endif
@if($body['show'])
<p class="post_body {{$body['class']}}">
{!!$podcast->content!!}
</p>
@endif
@if(isset($showAction) && $showAction)
<div class="action_button {{$actionButton['class']}}">
<a class="btn" href="{{$url}}">Luister fragment</a>
</div>
@endif
</div> </div>
</li> </li>

View File

@@ -0,0 +1,67 @@
<?php
$li = array_merge([
'class' => '',
'style' => ''
], $li ?? []);
$content = array_merge([
'class' => '',
'style' => '',
], $content ?? []);
$ul = array_merge([
'class' => ''
], $ul ?? []);
$body = array_merge([
'show' => false,
'class' => ''
], $body ?? []);
$actionButton = array_merge([
'class' => ''
], $actionButton ?? []);
?>
<ul id="{{$id ?? ''}}" class="{{$ul['class']}}">
@foreach($programs as $program)
<?php $url = route('programma') . $program->program->url; ?>
<?php $endStartDiff = $program->end->diff($program->start);
$duration = 24 * $endStartDiff->d + $endStartDiff->h; ?>
<li style="{{$li['style']}}" class="post {{$li['class']}}">
<div style="{{$content['style']}}" class="post_content {{$content['class']}}">
<h2 class="post_title">
<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
<div class="sub_title">
<?php $time = Formatter::relativeDate($program->start) . (isset($showTime) && $showTime ? ' om ' . $program->start->format('H:i') : ''); ?>
<span class="post_date" title="{{$time}}">
<i class="fa-regular fa-clock"></i> {{$time}}
</span>
</div>
@endif
@if(isset($showAction) && $showAction)
<div class="row action_button" style="margin-top: 20px;">
@if(!$program->current)
<div class="col">
<a href="{{route('luister.programma') . '/' . $program->start->format('Y/m/d/H') . '/' . $duration}}"
class="player btn" style="padding: 10px 0;width: 100%;">Luister terug</a>
</div>
@endif
<div class="col">
<a href="{{route('programma') . $program->program->url}}" class="btn"
style="padding: 10px 0;width: 100%;">Meer informatie</a>
</div>
</div>
@endif
@if($body['show'])
<p class="post_body {{$body['class']}}">
{!!strip_tags($program->program->description)!!}
</p>
@endif
</div>
</li>
@endforeach
</ul>

View File

@@ -3,78 +3,86 @@
@include('widgets/mediaplayer') @include('widgets/mediaplayer')
@section('title') @section('title')
{{$podcast->title}} @if ($podcast)
{{$podcast->title}}
@else
Fragment {{$title}} niet gevonden
@endif
@endsection @endsection
@section('breadcrumb') @section('breadcrumb')
<ul class="bread_crumb"> <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="Fragment gemist" href="{{route('gemist')}}">Fragment gemist</a></li> <li><a title="Fragment gemist" href="{{route('gemist')}}">Fragment gemist</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
@if($podcast->program) @if($podcast && $podcast->program)
<li><a title="{{$podcast->program->name}}" href="{{route('gemist.programma') . $podcast->program->url}}">{{$podcast->program->name}}</a></li> <li><a title="{{$podcast->program->name}}"
<li class="separator icon_small_arrow right_gray">&nbsp;</li> href="{{route('gemist.programma') . $podcast->program->url}}">{{$podcast->program->name}}</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
@endif @endif
<li>Fragment</li> <li>Fragment</li>
</ul> </ul>
@endsection @endsection
@push('scripts') @push('scripts')
<script> <script>
$(".vertical_carousel").each(function() { $(".vertical_carousel").each(function () {
$(this).before("<a class='slider_control up' id='" + this.id + "_prev' href='#' title='Terug'></a>"); $(this).before("<a class='slider_control up' id='" + this.id + "_prev' href='#' title='Terug'></a>");
$(this).after("<a class='slider_control down' id='" + this.id + "_next' href='#' title='Verder'></a>"); $(this).after("<a class='slider_control down' id='" + this.id + "_next' href='#' title='Verder'></a>");
var carouselOptions = { var carouselOptions = {
direction: "up", direction: "up",
items: { items: {
visible: 3, visible: 3,
}, },
scroll: { scroll: {
items: 2, items: 2,
duration: 500, duration: 500,
pauseOnHover: true pauseOnHover: true
}, },
auto: { auto: {
items: 3, items: 3,
play: true, play: true,
pauseOnHover: true, pauseOnHover: true,
}, },
mousewheel: true, mousewheel: true,
swipe: { swipe: {
onMouse: true, onMouse: true,
onTouch: true onTouch: true
}, },
prev: { prev: {
button: $('.slider_control.up', $(this).parent()), button: $('.slider_control.up', $(this).parent()),
pauseOnHover: true, pauseOnHover: true,
}, },
next: { next: {
button: $('.slider_control.down', $(this).parent()), button: $('.slider_control.down', $(this).parent()),
pauseOnHover: true, pauseOnHover: true,
}, },
}; };
$(this).carouFredSel(carouselOptions); $(this).carouFredSel(carouselOptions);
$(this).parent().parent().hover(function(){ $(this).parent().parent().hover(function () {
$(".up.slider_control", this).removeClass("slideDownBack").addClass("slideDown"); $(".up.slider_control", this).removeClass("slideDownBack").addClass("slideDown");
$(".down.slider_control", this).removeClass("slideUpBack").addClass("slideUp"); $(".down.slider_control", this).removeClass("slideUpBack").addClass("slideUp");
}, },
function(){ function () {
$(".up.slider_control", this).removeClass("slideDown").addClass("slideDownBack"); $(".up.slider_control", this).removeClass("slideDown").addClass("slideDownBack");
$(".down.slider_control", this ).removeClass("slideUp").addClass("slideUpBack"); $(".down.slider_control", this).removeClass("slideUp").addClass("slideUpBack");
});
// $(window).trigger("resize");
}); });
</script>
// $(window).trigger("resize");
});
</script>
@endpush @endpush
@section('content') @section('content')
@parent @parent
<?php @if ($podcast)
$audioUrl = url($apiUrl . 'podcast/download' . $podcast->url . "?auth=" . $podcast->auth); <?php
$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth; $audioUrl = url($apiUrl . 'podcast/download' . $podcast->url . "?auth=" . $podcast->auth);
?> $popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
?>
<div class="row page_margin_top"> <div class="row page_margin_top">
<div class="column column_2_3"> <div class="column column_2_3">
@@ -83,135 +91,143 @@ $(".vertical_carousel").each(function() {
<h1>Fragment gemist</h1> <h1>Fragment gemist</h1>
<ul class="post_details clearfix"> <ul class="post_details clearfix">
<li class="detail date">{{ Formatter::relativeDate($podcast->created) }}</li> <li class="detail date">{{ Formatter::relativeDate($podcast->created) }}</li>
@if($podcast->program) @if($podcast->program)
<li class="detail"><a href="{{ route('programma') . $podcast->program->url }}">{{ $podcast->program->name }}</a></li> <li class="detail"><a
@endif href="{{ route('programma') . $podcast->program->url }}">{{ $podcast->program->name }}</a>
</li>
@endif
</ul> </ul>
<div class="announcement"> <div class="announcement">
<audio controls autoplay="true"> <audio controls autoplay="true">
<source src="{{$audioUrl}}" type="audio/mpeg" /> <source src="{{$audioUrl}}" type="audio/mpeg"/>
</audio> </audio>
<div class="clearfix"> <div class="clearfix">
<a class="action_button" href="{{$audioUrl}}" title="Download dit fragment als MP3"> <a class="action_button" href="{{$audioUrl}}" title="Download dit fragment als MP3">
<span class="fa fa-download"></span> <span class="fa fa-download"></span>
<span>Download fragment</span> <span>Download fragment</span>
</a> </a>
<a class="action_button player" href="{{$popoutUrl}}"> <a class="action_button player" href="{{$popoutUrl}}">
<span class="fa fa-external-link-alt"></span> <span class="fa fa-external-link-alt"></span>
<span>Luister in nieuw venster</span> <span>Luister in nieuw venster</span>
</a> </a>
</div> </div>
</div>
<div class="content_box clearfix section_margin_top">
@if($podcast->image)
<div class="post_image_box">
<a href="{{$imgBase . $podcast->image->url}}" class="post_image prettyPhoto" rel="prettyPhoto" title="{{$podcast->image->title}}">
<img src="{{$imgBase . $podcast->image->url}}" title="{{$podcast->image->title}}" style="display: block;"/>
</a>
<div class="sentence">
<span class="text">{{$podcast->image->title}}</span>
</div>
</div>
@endif
<div class="post_content page_margin_top_section ">
<h3>{!!$podcast->content!!}</h3>
</div> </div>
</div>
<div class="clearfix"></div> <div class="content_box clearfix section_margin_top">
@if($podcast->image)
<div class="post_image_box">
<a href="{{$imgBase . $podcast->image->url}}" class="post_image prettyPhoto"
rel="prettyPhoto" title="{{$podcast->image->title}}">
<img src="{{$imgBase . $podcast->image->url}}"
title="{{$podcast->image->title}}" style="display: block;"/>
</a>
<div class="sentence">
<span class="text">{{$podcast->image->title}}</span>
</div>
</div>
@endif
<div class="post_content page_margin_top_section ">
<h3>{!!$podcast->content!!}</h3>
</div>
</div>
<div class="clearfix"></div>
</div> </div>
</div> </div>
<!-- <!--
<div class="row page_margin_top"> <div class="row page_margin_top">
<div class="share_box clearfix"> <div class="share_box clearfix">
<label>Share:</label> <label>Share:</label>
<ul class="social_icons clearfix"> <ul class="social_icons clearfix">
<li> <li>
<a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook"> <a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook">
&nbsp; &nbsp;
</a> </a>
</li> </li>
<li> <li>
<a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter"> <a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
&nbsp; &nbsp;
</a> </a>
</li> </li>
<li> <li>
<a title="" href="mailto:contact@pressroom.com" class="social_icon mail"> <a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
&nbsp; &nbsp;
</a> </a>
</li> </li>
<li> <li>
<a title="" href="#" class="social_icon skype"> <a title="" href="#" class="social_icon skype">
&nbsp; &nbsp;
</a> </a>
</li> </li>
<li> <li>
<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato"> <a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
&nbsp; &nbsp;
</a> </a>
</li> </li>
<li> <li>
<a title="" href="#" class="social_icon instagram"> <a title="" href="#" class="social_icon instagram">
&nbsp; &nbsp;
</a> </a>
</li> </li>
<li> <li>
<a title="" href="#" class="social_icon pinterest"> <a title="" href="#" class="social_icon pinterest">
&nbsp; &nbsp;
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
--> -->
</div> </div>
<div class="column column_1_3"> <div class="column column_1_3">
@if(count($related) > 1) @if(count($related) > 1)
<h4 class="box_header page_margin_top_section">Meer uit deze uitzending</h4> <h4 class="box_header page_margin_top_section">Meer uit deze uitzending</h4>
<div class="vertical_carousel_container clearfix"> <div class="vertical_carousel_container clearfix">
<ul class="blog podcasts vertical_carousel" id="related_items"> <ul class="blog podcasts vertical_carousel" id="related_items">
@foreach($related as $relatedItem) @foreach($related as $relatedItem)
@if($relatedItem->id == $podcast->id) @continue @endif @if($relatedItem->id == $podcast->id)
@continue
@endif
<li class="post">
<div class="post_content">
<h5>
<a href="{{ route('gemist.fragment') . $relatedItem->url }}"
title="{{$relatedItem->title}}">
<span class="fa fa-chevron-circle-right"></span>
{{$relatedItem->titleWithoutProgram()}}
</a>
</h5>
<p class="post_details simple" title="{{$relatedItem->content}}">
{{Formatter::excerpt($relatedItem->content, 80)}}
</p>
</div>
</li>
@endforeach
</ul>
</div>
<a href="{{route('gemist.programma') . $podcast->program->url}}"
class="more">Meer {{$podcast->program->name}}</a>
@endif
<h4 class="box_header page_margin_top_section">Meer fragmenten</h4>
<nav>
<ul class="blog podcasts">
<li class="post"> <li class="post">
<div class="post_content"> <a href="{{route('gemist')}}" class="read_more">
<h5> <span class="arrow"></span>
<a href="{{ route('gemist.fragment') . $relatedItem->url }}" title="{{$relatedItem->title}}"> <span>Alle recente fragmenten</span>
<span class="fa fa-chevron-circle-right"></span> </a>
{{$relatedItem->titleWithoutProgram()}}
</a>
</h5>
<p class="post_details simple" title="{{$relatedItem->content}}">
{{Formatter::excerpt($relatedItem->content, 80)}}
</p>
</div>
</li> </li>
@endforeach
</ul> </ul>
</div> </nav>
<a href="{{route('gemist.programma') . $podcast->program->url}}" class="more">Meer {{$podcast->program->name}}</a> </div>
@endif
<h4 class="box_header page_margin_top_section">Meer fragmenten</h4>
<nav>
<ul class="blog podcasts">
<li class="post">
<a href="{{route('gemist')}}" class="read_more">
<span class="arrow"></span>
<span>Alle recente fragmenten</span>
</a>
</li>
</ul>
</nav>
</div> </div>
</div> @endif
@endsection @endsection

View File

@@ -1,109 +1,119 @@
@extends('layouts/sidebar') @extends('layouts/full')
@section('title') @section('title')
Fragment gemist Fragment gemist
@endsection @endsection
@section('page_class')post_container @endsection @section('page_class')
post_container
@endsection
@section('breadcrumb') @section('breadcrumb')
@if(isset($program)) @if(isset($program))
<ul class="bread_crumb"> <ul class="bread_crumb">
<li><a title="Fragment gemist" href="{{url('radio/gemist')}}">Fragment gemist</a></li> <li><a title="Home" href="/">Home</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>{{$program->name}}</li> <li><a title="Fragment gemist" href="{{url('gemist.fragment')}}">Fragment gemist</a></li>
</ul> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
@endif <li>{{$program->name}}</li>
</ul>
@else
<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>Fragment gemist</li>
</ul>
@endif
@endsection @endsection
@section('content') @section('content')
@parent <div class="">
<div class="row news_post post_container">
<div class="col-12 col-md content_container">
<div id="gemist_tabs" class="no_scroll clearfix">
<div class="tabs fit_content">
<h4 class="box_header">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
<span>Programma gemist</span>
</a>
</h4>
<h4 class="box_header active">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
<span>Fragment gemist</span>
</a>
</h4>
</div>
</div>
@if(isset($program))
<h2>{{$program->name}}</h2>
<p class="align-right">
<a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon
alles</a>
<a href="{{route('programma') . $program->url}}" title="{{$program->name}}"
class="btn btn-info">Programmainfo</a>
</p>
@else
<p class="page_body">Hele uitzendingen kunt u binnen twee weken terugluisteren via <a
href="{{route('gemist.programma')}}">programma gemist</a>.<br /><br />
@endif
<div id="gemist_tabs" class="no_scroll clearfix"> @if(isset($podcasts))
<div class="tabs fit_content">
<h4 class="box_header"> <div class="clearfix podcast_items">
<a href="{{route('gemist.programma')}}" title="Programma gemist"> @include('partial/podcastitems', [
<span>Programma gemist</span> 'li' => [
</a> 'class' => 'col-12 col-md-6'
</h4> ],
<h4 class="box_header active"> 'content' => [
<a href="{{route('gemist.fragment')}}" title="Fragment gemist"> 'class' => 'box full_width flex-column d-flex',
<span>Fragment gemist</span> 'style' => 'height: 300px'
</a> ],
</h4> 'ul' => [
'class' => 'row overview'
],
'body' => [
'show' => true,
'class' => 'clipText'
],
'actionButton' => [
'class' => 'd-flex flex-column justify-content-end flex-grow-1'
],
'showAction' => true,
'podcasts' => array_slice($podcasts, 0, 8)])
</div>
@else
<p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
@endif
</div>
<div class="col-12 col-md-auto sidebar">
@if ((isset($podcasts)))
<div data-tabs>
<div class="tabs">
<h4 data-tab-content-id="tab_more_fragmenten"
class="box_header extra_small flex-grow-1 active"><span>Meer fragmenten</span>
</h4>
</div>
<div id="tab_more_fragmenten" class="box tab_content podcast_items active">
@include('partial/podcastitems', ['id' => 'items-podcasts', 'showTime' => false, 'showImage' => false, 'podcasts' => array_slice($podcasts, 8)])
<a class="btn auto_width" id="meer-nieuws-more-podcast" href="#"
data-loadmorenews='{"container":["#items-podcasts"]}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Meer fragmenten
</a>
</div>
</div>
@endif
<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 style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
</div>
</div>
</div> </div>
</div>
@if(isset($program))
<h2>{{$program->name}}</h2>
<p class="align-right">
<a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon alles</a>
<a href="{{route('programma') . $program->url}}" title="{{$program->name}}" class="btn btn-info">Programmainfo</a>
</p>
@else
<p class="page_body">Hele uitzendingen kunt u binnen twee weken terugluisteren via <a href="{{route('gemist.programma')}}">programma gemist</a>.
@endif
@if($podcasts)
<div class="page_layout clearfix">
<div class="row grid" id="items">
@include('partial.podcastitems', ['podcasts' => $podcasts])
</div><!--/.row-->
</div>
<div id="loading" style="display: none">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<b>Meer podcasts aan het ophalen...</b>
</div>
</div>
</div>
@push('scripts')
<script>
var page = 1;
var isLoading = 0;
var $items = $('#items');
var $isLoading = $('#loading');
$(function() {
$(window).scroll(function () {
var $this = $(this);
var tweak = 10;
if(!isLoading && (page > 0) && ($this.scrollTop() >= $items.height() - $this.height() - tweak))
{
isLoading = 1;
$isLoading.show();
$.ajax({ url: document.location.pathname + '?pagina=' + (++page) })
.always(function() { isLoading = 0; $isLoading.hide(); })
.done(function(data) {
if(!data) {
if(page > 1) $items.append("<hr /><p class=\"page_body\">Er zijn geen podcasts (meer).</p>");
page = -1;
return;
}
$newPage = $("<div />").append(data);
$items.append($newPage);
$newPage.find("audio, video").mediaelementplayer({ stretching: 'responsive' });
});
}
});
});
</script>
@endpush
@else
<p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
@endif
@endsection @endsection
@push('styles')
<style>
#gemist_tabs li {
width: 50%;
}
</style>
@endpush

View File

@@ -1,11 +1,69 @@
@extends('layouts/sidebar') @extends('layouts/full')
@section('title') @section('title')
Fragment gemist Fragment gemist
@endsection @endsection
@section('content') @section('content')
@parent <div class="">
<div class="row news_post post_container">
<div class="col-12">
<ul class="bread_crumb">
<li><a title="Programma gemist" href="{{route('gemist.programma')}}">Programma gemist</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>{{$program->name}}</li>
</ul>
<div id="gemist_tabs" class="no_scroll clearfix">
<div class="tabs fit_content">
<h4 class="box_header active">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
<span>Programma gemist</span>
</a>
</h4>
<h4 class="box_header">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
<span>Fragment gemist</span>
</a>
</h4>
</div>
</div>
</div>
<div class="col-12 col-md content_container">
<div class="box full-width">
</div>
</div>
<div class="col-12 col-md-auto sidebar">
@if ((isset($podcasts) && $podcasts))
<div data-tabs>
<div class="tabs">
@if (isset($podcasts) && $podcasts)
<h4 data-tab-content-id="tab_most_read"
class="box_header extra_small flex-grow-1 active"><span>Meest gelezen</span>
</h4>
@endif
</div>
@if (isset($podcasts) && $podcasts)
<div id="tab_most_read" class="box tab_content active">
@include('partial/newslist_small', ['id' => 'items-podcasts', 'news' => $podcasts])
<a class="btn auto_width" id="meer-nieuws-most-read" href="#"
data-loadmorenews='{"container":["#items-podcasts"]}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Klik hier voor meer nieuws
</a>
</div>
@endif
</div>
@endif
<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 style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
</div>
</div>
</div>
@if(isset($program)) @if(isset($program))
<h2>{{$program->name}}</h2> <h2>{{$program->name}}</h2>

View File

@@ -1,4 +1,4 @@
@extends('layouts/sidebar') @extends('layouts/full')
@section('title') @section('title')
Programma gemist Programma gemist
@@ -8,75 +8,111 @@
@section('breadcrumb') @section('breadcrumb')
@if(isset($program)) @if(isset($program))
<ul class="bread_crumb"> <ul class="bread_crumb">
<li><a title="Programma gemist" href="{{route('gemist.programma')}}">Programma gemist</a></li> <li><a title="Home" href="/">Home</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>{{$program->name}}</li> <li><a title="Fragment gemist" href="{{url('gemist.fragment')}}">Programma gemist</a></li>
</ul> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>{{$program->name}}</li>
</ul>
@else
<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>Programma gemist</li>
</ul>
@endif @endif
@endsection @endsection
@section('content') @section('content')
@parent <div class="">
<div class="row news_post post_container">
<div class="col-12 col-md content_container">
<div id="gemist_tabs" class="no_scroll clearfix">
<div class="tabs fit_content">
<h4 class="box_header active">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
<span>Programma gemist</span>
</a>
</h4>
<h4 class="box_header">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
<span>Fragment gemist</span>
</a>
</h4>
</div>
</div>
@if(isset($program))
<h2>{{$program->name}}</h2>
<p class="align-right">
<a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon
alles</a>
<a href="{{route('programma') . $program->url}}" title="{{$program->name}}"
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 />
@endif
<div id="gemist_tabs" class="no_scroll clearfix"> @if(isset($programs))
<div class="tabs fit_content">
<h4 class="box_header active">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
<span>Programma gemist</span>
</a>
</h4>
<h4 class="box_header">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
<span>Fragment gemist</span>
</a>
</h4>
</div>
</div>
<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>.</p> <div class="clearfix podcast_items">
@include('partial/programitems', [
'li' => [
'class' => 'col-12 col-md-6'
],
'content' => [
'class' => 'box full_width flex-column d-flex',
'style' => 'height: 270px'
],
'ul' => [
'class' => 'row overview'
],
'body' => [
'show' => true,
'class' => 'clipText clipText-5'
],
'actionButton' => [
'class' => 'd-flex flex-column justify-content-end flex-grow-1'
],
'showAction' => true,
'showTime' => true,
'programs' => array_slice($programs, 0, 8)])
</div>
<div class="page_layout clearfix"> @else
<div class="row" id="items">
@php($i = 0) <p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
@foreach($programs as $program)
@if($i % 2 == 0)
@if($i > 0) </ul><!--/.row--> @endif
<ul class='blog'>
@endif
<?php $url = route('programma') . $program->program->url; ?>
<?php $endStartDiff = $program->end->diff($program->start);
$duration = 24 * $endStartDiff->d + $endStartDiff->h; ?>
<li class="post">
<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) }}
van {{ $program->start->format('H:i') }} uur tot {{ $program->end->format('H:i') }} uur.
</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>
</div>
</li>
@php($i++) @endif
@endforeach </div>
@if($i) <div class="col-12 col-md-auto sidebar">
</ul><!--/.row--> @if ((isset($programs)))
@endif <div data-tabs>
<div class="tabs">
<h4 data-tab-content-id="tab_more_fragmenten"
class="box_header extra_small flex-grow-1 active"><span>Meer fragmenten</span>
</h4>
</div>
<div id="tab_more_fragmenten" class="box tab_content podcast_items active">
@include('partial/programitems', ['id' => 'items-programs', 'showTime' => true, 'programs' => array_slice($programs, 8)])
<a class="btn auto_width" id="meer-nieuws-more-programs" href="#"
data-loadmorenews='{"container":["#items-programs"]}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Meer fragmenten
</a>
</div>
</div>
@endif
</div><!--/.row--> <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
</div> - Advertentie -
</div>
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
</div>
</div>
</div>
@endsection @endsection
@@ -91,12 +127,3 @@ setInterval(function() {
}, 1000); }, 1000);
</script> </script>
@endpush @endpush
@push('styles')
<style>
#gemist_tabs li {
width: 50%;
}
</style>
@endpush

View File

@@ -8,6 +8,8 @@
@section('breadcrumb') @section('breadcrumb')
<ul class="bread_crumb"> <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="Radioprogrammering" href="{{route('radio.gids')}}">Radioprogrammering</a></li> <li><a title="Radioprogrammering" href="{{route('radio.gids')}}">Radioprogrammering</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>Programma-informatie</li> <li>Programma-informatie</li>

View File

@@ -21,8 +21,8 @@
// "Vroeger of Later Luisterlijst (2 januari)" => "/vol-luisterlijst"), // "Vroeger of Later Luisterlijst (2 januari)" => "/vol-luisterlijst"),
"App" => "/app", "App" => "/app",
"Podcast" => array( "Podcast" => array(
"" => "/podcast/1091/nh-gooi-spreekuur", "" => "/podcast/fragment/1356528/podcast-waterschapsverkiezingen-2023.mp3",
"Waterschapsverkiezing 2023" => "/gemist/fragment/1356528/podcast-waterschapsverkiezingen-2023.mp3", "Waterschapsverkiezing 2023" => "/podcast/fragment/1356528/podcast-waterschapsverkiezingen-2023.mp3",
"NH Gooi Spreekuur" => "/podcast/1091/nh-gooi-spreekuur", "NH Gooi Spreekuur" => "/podcast/1091/nh-gooi-spreekuur",
"Duurzaam Gooi" => "/podcast/1076/podcast-duurzaam-gooi" "Duurzaam Gooi" => "/podcast/1076/podcast-duurzaam-gooi"
), ),

View File

@@ -63,11 +63,12 @@ Route::get('/gemist/zoeken', function(Illuminate\Http\Request $request) {
}); });
Route::get('/gemist/fragment', 'RadioController@podcasts')->name('gemist.fragment'); Route::get('/gemist/fragment', 'RadioController@podcasts')->name('gemist.fragment');
Route::get('/gemist/fragment/{id}/{title}', 'RadioController@podcast')->where(['id' => '\d+']); Route::get('/gemist/fragment/{id}/{title}', 'RadioController@podcast')->where(['id' => '\d+', 'title' => '.*']);
Route::get('/gemist/programma', 'RadioController@terugluisteren')->name('gemist.programma'); Route::get('/gemist/programma', 'RadioController@terugluisteren')->name('gemist.programma');
Route::get('/gemist/programma/{programma}/{title}', 'RadioController@podcasts')->where(['programma' => '\d+']); Route::get('/gemist/programma/{programma}/{title}', 'RadioController@podcasts')->where(['programma' => '\d+']);
Route::get('/podcast/{programma}/{title}', 'PodcastController@podcasts')->where(['programma' => '\d+']); Route::get('/podcast/{programma}/{title}', 'PodcastController@podcasts')->where(['programma' => '\d+']);
Route::get('/podcast/fragment/{id}/{title}', 'RadioController@podcast')->where(['id' => '\d+', 'title' => '.*']);
Route::get('/podcast/aflevering/{id}/{title}', 'PodcastController@podcast')->where(['id' => '\d+']); Route::get('/podcast/aflevering/{id}/{title}', 'PodcastController@podcast')->where(['id' => '\d+']);
Route::get('/podcast/zoeken/{query}', 'RadioController@searchpodcast')->name('gemist.zoeken'); Route::get('/podcast/zoeken/{query}', 'RadioController@searchpodcast')->name('gemist.zoeken');
Route::get('/podcast/zoeken', function(Illuminate\Http\Request $request) { Route::get('/podcast/zoeken', function(Illuminate\Http\Request $request) {