146 lines
5.7 KiB
PHP
146 lines
5.7 KiB
PHP
@extends('layouts.vertical-individual', ["page_title"=> "Social Feed"])
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
<div class="row mt-3">
|
|
<div class="col-xl-3 col-lg-6 order-lg-1 order-xl-1">
|
|
<!-- start profile info -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<img src="/assets/images/crest-logo.jpeg" class="img-fluid">
|
|
<h4 class="page-title">{{$library->title}}</h4>
|
|
<p>{{$library->description}}</p>
|
|
<div class="d-flex align-items-start">
|
|
<h5 class="mt-1 mb-0">Categories</h5>
|
|
</div>
|
|
<div class="list-group list-group-flush mt-2 font-15">
|
|
@foreach($library->library_values as $lib)
|
|
<a href="/contentlibrary/{{$library->code}}?id={{$lib->id}}" class="list-group-item list-group-item-action text-primary fw-semibold border-0"><i class='mdi mdi-image-filter-black-white font-16 me-1'></i>{{$lib->name}}</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- end profile info -->
|
|
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-xl-9 col-lg-12 order-lg-2 order-xl-1">
|
|
<div class="card">
|
|
<div class="card-body p-2">
|
|
<h4 class="page-title">{{$content->magazine->name}}</h4>
|
|
<img src="{{$content->magazine->image}}" class="img-fluid" style="max-height: 100px;">
|
|
<p class="mt-2">{{$content->magazine->description}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
@foreach($content->medias as $media)
|
|
<!-- Story Box-->
|
|
<div class="card media-card" id="{{$media->id}}">
|
|
<div class="card-body">
|
|
<h5 class="page-title">{{$media->name}}</h5>
|
|
<p class="font-16 text-dark">{{$media->description}}</p>
|
|
<div class="row">
|
|
@if($media->media_type == 'image')
|
|
<div class="col-sm-8">
|
|
<img src="{{$media->media_url}}" alt="post-img" class="rounded me-1 mb-3 mb-sm-0 img-fluid reel-image">
|
|
</div>
|
|
<!-- <div class="col">
|
|
<img src="{{asset('assets/images/small/img-1.jpg')}}" alt="post-img" class="rounded me-1 img-fluid mb-3">
|
|
<img src="{{asset('assets/images/small/img-3.jpg')}}" alt="post-img" class="rounded me-1 img-fluid">
|
|
</div> -->
|
|
@elseif($media->media_type == 'video')
|
|
<div class="col-sm-12">
|
|
<video controls>
|
|
<source src="{{$media->media_url}}" type="video/mp4">
|
|
<source src="{{$media->media_url}}" type="video/ogg">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
@elseif($media->media_type == 'youtube')
|
|
@php
|
|
preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $media->media_url, $match);
|
|
$youtube_id = $match[1];
|
|
@endphp
|
|
<div class="col-sm-12">
|
|
<div class="video">
|
|
<iframe src="https://www.youtube.com/embed/{{$youtube_id}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
<!-- Story Box-->
|
|
|
|
|
|
<!-- loader -->
|
|
<div class="text-center mb-3">
|
|
<a href="javascript:void(0);" class="text-danger"><i class="mdi mdi-spin mdi-loading me-1 font-16"></i> Load more </a>
|
|
</div>
|
|
<!-- end loader -->
|
|
</div>
|
|
|
|
</div>
|
|
<!--end row -->
|
|
|
|
</div> <!-- container -->
|
|
|
|
<style type="text/css">
|
|
video, .video iframe {
|
|
width: 100%;
|
|
height: 80vh;
|
|
}
|
|
video, {
|
|
width: 100%;
|
|
max-height: 80vh;
|
|
}
|
|
.reel-image {
|
|
max-width: 100%;
|
|
max-height: 80vh;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- third party js -->
|
|
<script src="{{ URL::asset('assets/js/timeme.js')}}"></script>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
let viewObj = {magazine_id:'{{$content->magazine->id}}', medias:[], library:'{{$library->code}}', "_token": "{{ csrf_token() }}" }
|
|
$('.media-card').each(function( index ) {
|
|
viewObj.medias.push($( this ).attr('id'))
|
|
});
|
|
let media_views = {}
|
|
$.ajax({
|
|
type: "POST",
|
|
url: '/analytics/view',
|
|
data: viewObj,
|
|
success: function( data ) {
|
|
media_views = data.data.result
|
|
},
|
|
});
|
|
|
|
TimeMe.initialize({
|
|
currentPageName: "{{$library->code}}", // current page
|
|
idleTimeoutInSeconds: 10, // seconds
|
|
});
|
|
|
|
// setInterval(function(){
|
|
// console.log(TimeMe.getTimeOnCurrentPageInSeconds())
|
|
// for(let media of Object.keys(media_views)) {
|
|
// console.log(media)
|
|
// let timeSpentOnElement = TimeMe.getTimeOnAllPagesInSeconds(media);
|
|
// console.log(timeSpentOnElement)
|
|
// }
|
|
// }, 1000)
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
<!-- end demo js-->
|
|
@endsection
|