Fragment gemist bijna af

website/resources/views/podcastitem.blade.php

@@ -0,0 +1,189 @@
+@extends('page')
+
+@include('_mediaplayer')
+@section('title')
+  Fragment gemist | {{$podcast->title}}
+@endsection
+
+@push('scripts')
+<script>
+$(".vertical_carousel").each(function() {
+		$(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>");
+		var carouselOptions = {
+			direction: "up",
+			items: {
+				visible: 3,
+			},
+			scroll: {
+				items: 2,
+				duration: 500,
+				pauseOnHover: true
+			},
+			auto: {
+				items: 3,
+				play: true,
+				pauseOnHover: true,
+			},
+			mousewheel: true,
+			swipe: {
+				onMouse: true,
+				onTouch: true
+			},
+			prev: { 
+				button: $('.slider_control.up', $(this).parent()),
+				pauseOnHover: true,
+			},
+			next: { 
+				button: $('.slider_control.down', $(this).parent()),
+				pauseOnHover: true,
+			},
+		};
+
+		$(this).carouFredSel(carouselOptions);
+
+		$(this).parent().parent().hover(function(){
+			$(".up.slider_control", this).removeClass("slideDownBack").addClass("slideDown");
+			$(".down.slider_control", this).removeClass("slideUpBack").addClass("slideUp");
+		},
+		function(){
+			$(".up.slider_control", this).removeClass("slideDown").addClass("slideDownBack");
+			$(".down.slider_control", this ).removeClass("slideUp").addClass("slideUpBack");
+		});
+
+	//	$(window).trigger("resize");
+});
+</script>
+@endpush
+
+@section('content')
+	<?php
+		$audioUrl = url( $apiUrl . 'podcast/download/' . $podcast->url . "?auth=" . $podcast->auth );
+		$popoutUrl = url('luister/fragment/' . $podcast->url . '?auth=' . $podcast->auth );
+	?>
+	<div class="page_layout page_margin_top clearfix">
+		<div class="row page_margin_top">
+			<div class="column column_2_3">
+				<div class="row">
+					<div class="post single">
+						<h1>Fragment gemist</h1>
+						<h2 class="post_title">{{$podcast->title}}</h2>
+						<ul class="post_details clearfix">
+						@if($podcast->program) 
+							<li class="detail"><a href="{{ url('programma' . $podcast->program->url ) }}">{{ $podcast->program->name }}</a></li> 
+						@endif
+							<li class="detail date">{{ Formatter::relativeDate($podcast->created) }}</li>
+						</ul>
+
+						<div class="post_content page_margin_top_section clearfix">
+							<h3>{!!$podcast->content!!}</h3>
+						</div>
+
+						<p>
+							<audio controls autoplay="true">
+								<source src="{{$audioUrl}}" type="audio/mpeg" /> 
+							</audio>
+						</p>
+
+						<div class="row page_margin_top">
+							<div class="share_box clearfix">
+								<a class="action_button" href="{{$audioUrl}}" title="Download dit fragment als MP3">
+									<span class="fa fa-download"></span>
+									<span>Download fragment</span>
+								</a>
+								<a class="action_button" href="{{$popoutUrl}}" target="_radioplayer" onclick="window.open('{{$popoutUrl}}', '_radioplayer','width=400,height=400'); return false;" class="btn btn-default">
+									<span class="fa fa-external-link-alt"></span>
+									<span>Luister in nieuw venster</span>
+								</a>
+						  </div>
+						</div>
+
+					</div>
+				</div>
+<!--
+				<div class="row page_margin_top">
+					<div class="share_box clearfix">
+						<label>Share:</label>
+						<ul class="social_icons clearfix">
+							<li>
+								<a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook">
+									&nbsp;
+								</a>
+							</li>
+							<li>
+								<a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
+									&nbsp;
+								</a>
+							</li>
+							<li>
+								<a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
+									&nbsp;
+								</a>
+							</li>
+							<li>
+								<a title="" href="#" class="social_icon skype">
+									&nbsp;
+								</a>
+							</li>
+							<li>
+								<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
+									&nbsp;
+								</a>
+							</li>
+							<li>
+								<a title="" href="#" class="social_icon instagram">
+									&nbsp;
+								</a>
+							</li>
+							<li>
+								<a title="" href="#" class="social_icon pinterest">
+									&nbsp;
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+-->
+			</div>
+			<div class="column column_1_3">
+			@if(count($related) > 1)
+				<h4 class="box_header page_margin_top_section">Meer uit deze uitzending</h4>
+				<div class="vertical_carousel_container clearfix">
+					<ul class="blog podcasts vertical_carousel" id="related_items">
+					@foreach($related as $relatedItem)
+						@if($relatedItem->id == $podcast->id) @continue @endif
+						<li class="post">
+							<div class="post_content">
+								<h5>
+									<a href="{{ url('radio/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="{{url('radio/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">
+						<a href="{{url('radio/gemist')}}" class="read_more">
+							<span class="arrow"></span>
+							<span>Alle recente fragmenten</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+
+@endsection