diff --git a/app/public/handler/trailer.js b/app/public/handler/trailer.js
new file mode 100644
index 0000000000000000000000000000000000000000..cf647760839f55f0417c40d6363fc09417470dda
--- /dev/null
+++ b/app/public/handler/trailer.js
@@ -0,0 +1,10 @@
+function displayTrailer (trailer){
+ // let trailer = '/public/vid/trailer1.mp4';
+ document.getElementById("trailer-div").style.top = "0px";
+ document.getElementById("anime-trailer-iframe").src = trailer;
+}
+
+function hideTrailer() {
+ document.getElementById("trailer-div").style.top = "-100%";
+ document.getElementById("anime-trailer-iframe").src = "";
+}
diff --git a/app/public/style/trailer.css b/app/public/style/trailer.css
index 2e39e636f2498bef59e1eaf4dbd878d4ed903d39..1f7fdf3fa80a77a5f82c352e5f4484abed5d12ea 100644
--- a/app/public/style/trailer.css
+++ b/app/public/style/trailer.css
@@ -50,4 +50,33 @@ body {
color: white;
font-weight: bold;
gap: 5px;
-}
\ No newline at end of file
+}
+
+.trailer-container{
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ display: block;
+ z-index: 2;
+ top: -100%;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0,0,0,0.8);
+ cursor: pointer;
+ transition: ease-in-out;
+ transition-duration: 0.2s;
+}
+
+
+.anime-trailer-iframe {
+ padding: 0;
+ margin: 0;
+ width: 720px;
+ aspect-ratio: 16/9;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+}
+
diff --git a/app/public/vid/trailer2.mp4 b/app/public/vid/trailer2.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..87c74de662b051d8793fc1fa6256b6b2c9ba19b1
Binary files /dev/null and b/app/public/vid/trailer2.mp4 differ
diff --git a/app/public/vid/trailer3.mp4 b/app/public/vid/trailer3.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..5e30effccd8ebe097ec1b8bd97bdf47a6665e246
Binary files /dev/null and b/app/public/vid/trailer3.mp4 differ
diff --git a/app/setup/seed.php b/app/setup/seed.php
index aa08ecda132f0b5502b38fe741f356ec1a4ac188..2e5417f85e6381ae9c2bfd138cbd4681dc52052b 100644
--- a/app/setup/seed.php
+++ b/app/setup/seed.php
@@ -44,6 +44,18 @@ function seedClientData(){
'image' => $image);
$client->insertClient($clientTuple);
}
+
+ $client->insertClient(
+ array (
+ 'username' => 'inijuan',
+ 'email' => 'juan@gmail.com',
+ 'password' => 'jujujuju',
+ 'admin_status' => true,
+ 'birthdate' => '2003-09-10',
+ 'bio' => 'Ini akun punya Juan iseng doang masukin biar beda soalnya kesannya kayak punya akun sendiri xixixixixixixi',
+ 'image' => '/public/img/admin_icon.png'
+ )
+ );
}
function seedStudioData() {
@@ -116,6 +128,8 @@ function seedAnimeData(){
}
$trailerArr = array (
'/public/vid/trailer1.mp4',
+ '/public/vid/trailer2.mp4',
+ '/public/vid/trailer3.mp4',
null
);
@@ -128,7 +142,7 @@ function seedAnimeData(){
$rating = $ratingArr[rand(0,3)];
$score = rand(1,9) + rand(1,10)/10;
$image = $imageArr[rand(0,30)];
- $trailer = $trailerArr[rand(0,1)];
+ $trailer = $trailerArr[rand(0,3)];
$studio_id = rand(1,10);
$animeTuple = array(
diff --git a/app/views/trailer/index.php b/app/views/trailer/index.php
index bfb0e4a56c14c980f2bd8504bce1a159b2d30bd9..9057ac06983dc0f4144b93ab945835c3ee209d50 100644
--- a/app/views/trailer/index.php
+++ b/app/views/trailer/index.php
@@ -16,9 +16,14 @@ $a = new Anime();
<link rel="stylesheet" href="../../public/style/global.css">
<link rel="stylesheet" href="../../public/style/trailer.css">
<script src='/public/handler/navbar.js'></script>
+ <script src='/public/handler/trailer.js'></script>
</head>
<body>
+ <div class="trailer-container" id='trailer-div' onclick='hideTrailer()'>
+ <iframe class='anime-trailer-iframe' id='anime-trailer-iframe' src='' autoplay='false' allowfullscreen></iframe>
+ </div>
+
<div class="flex-wrap">
<?php
$animes = $a->getAllAnimeWithTrailer();
@@ -26,18 +31,17 @@ $a = new Anime();
$year = date('Y', strtotime($anime['release_date'])) ?? '';
$image = $anime['image'] ?? '../../public/img/placeholder.jpg';
$arr = explode('/', $anime['trailer']);
- $trailer = $arr[0].'/'.$arr[1].'/www.youtube.com/embed/'.$arr[3];
+ $trailer = htmlspecialchars($anime['trailer']);
echo "
<div class='container'>
- <div class='box-preview'>
- <img src='$image' class='image-preview'/>
+ <div class='box-preview' onclick=\"displayTrailer('$trailer')\">
+ <img src='$image' class='image-preview' id='image-preview'/>
</div>
<div class='description'>
<div> $anime[title] </div>
<div> ($year) </div>
</div>
</div>
-
";
}
?>