Skip to content

S
simpmw
Commit 30d09023 by Alfiro Pratama
Options

fix preview video proposal (mhs)

parent 99efbd1b
Showing with 53 additions and 43 deletions
resources/views/backend/mahasiswa/proposal/index.blade.php
@extends('layouts.master')
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> --}}
@endsection
@section('title')
......@@ -59,12 +59,6 @@
<div class="table-responsive">
<table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead style="text-align: center; vertical-align: middle;">
{{-- <style>
th {
text-align: center;
vertical-align: middle;
}
</style> --}}
<tr>
<th>No</th>
<th width="5%">Kode Kelompok</th>
......@@ -72,7 +66,7 @@
<th>Identitas Dosen Pembimbing</th>
<th>Kategori PMW</th>
<th>Judul Proposal</th>
<th>Usulan Dana</th>
<th>Usulan Anggaran</th>
<th>Status</th>
<th>Aksi</th>
</tr>
......@@ -179,6 +173,7 @@
@dd($item->rProposalUrl->url);
@endphp --}}
<button id="preview-video" class="btn btn-success btn-sm" data-video="{{ $item->rProposalUrl->url }}">
{{-- <button id="preview-video" class="btn btn-success btn-sm" data-video="https://youtu.be/9CHu8iOsxDE?feature=shared"> --}}
<i class="far fa-eye"></i> Lihat Video
</button>
@else
......@@ -256,52 +251,67 @@
$(document).ready(function() {
// Event handler untuk tombol "Lihat Video" dengan ID preview-video
$('#preview-video').on('click', function() {
var videoUrl = $(this).data('video');
var videoUrl = $(this).attr('data-video');
// console.log(videoUrl);
if (videoUrl) {
// Buka video dalam Magnific Popup
$.magnificPopup.open({
items: {
src: videoUrl
},
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen allow="autoplay"></iframe>'+
'</div>'
},
callbacks: {
open: function() {
// Sembunyikan modal lama saat Magnific Popup dibuka
$('#{{ 'lihat'.$item->proposal_id }}').modal('hide');
if (videoUrl.includes('youtu.be')) {
// Konversi ke format youtube.com/watch?v=xxxxx
videoUrl = videoUrl.replace('youtu.be/', 'youtube.com/watch?v=');
}
// Mulai autoplay video setelah Magnific Popup dibuka
var iframe = this.content.find('iframe');
if (iframe.length > 0) {
var videoSrc = iframe.attr('src');
iframe.attr('src', videoSrc + '&autoplay=1'); // Tambahkan autoplay=1 ke URL video
}
// Buka video dalam Magnific Popup jika valid, buka di tab baru jika tidak
if (isValidYouTubeUrl(videoUrl)) {
$.magnificPopup.open({
items: {
src: videoUrl
},
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen allow="autoplay"></iframe>'+
'</div>'
},
close: function() {
// Tampilkan kembali modal lama setelah Magnific Popup ditutup
$('#{{ 'lihat'.$item->proposal_id }}').modal('show');
callbacks: {
open: function() {
// Sembunyikan modal lama saat Magnific Popup dibuka
$('#{{ 'lihat'.$item->proposal_id }}').modal('hide');
// Hentikan autoplay video saat Magnific Popup ditutup
var iframe = this.content.find('iframe');
if (iframe.length > 0) {
var videoSrc = iframe.attr('src');
iframe.attr('src', videoSrc.replace('&autoplay=1', '')); // Hapus autoplay=1 dari URL video
// Mulai autoplay video setelah Magnific Popup dibuka
var iframe = this.content.find('iframe');
if (iframe.length > 0) {
var videoSrc = iframe.attr('src');
iframe.attr('src', videoSrc + '&autoplay=1'); // Tambahkan autoplay=1 ke URL video
}
},
close: function() {
// Tampilkan kembali modal lama setelah Magnific Popup ditutup
$('#{{ 'lihat'.$item->proposal_id }}').modal('show');
// Hentikan autoplay video saat Magnific Popup ditutup
var iframe = this.content.find('iframe');
if (iframe.length > 0) {
var videoSrc = iframe.attr('src');
iframe.attr('src', videoSrc.replace('&autoplay=1', '')); // Hapus autoplay=1 dari URL video
}
}
}
});
} else {
// Tampilkan pesan kesalahan jika URL video tidak valid
window.open(videoUrl, '_blank');
}
});
} else {
// Tampilkan pesan kesalahan jika URL video tidak valid
console.error('URL video tidak valid:', videoUrl);
} else {
console.error('URL video tidak valid:', videoUrl);
}
});
function isValidYouTubeUrl(url) {
// Lakukan validasi sederhana menggunakan ekspresi reguler
return /^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/gm.test(url);
}
});
});
</script>
@endif
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment