From 8bbb1ccd8abc831277aad1db51fff607569b7bbb Mon Sep 17 00:00:00 2001
From: Dominik Wajda <admin@epicsite.xyz>
Date: Sat, 15 Jun 2024 14:13:35 +0100
Subject: [PATCH] related videos

---
 auth/signupsql.php          |  5 +--
 settings.php                | 14 ++-----
 styles/playerblue.css       | 62 ++++++++++++++++++++++++++++
 styles/playerultra-dark.css | 57 ++++++++++++++++++++++++--
 watch/index.php             | 82 +++++++++++++++++++++++++++++++++++--
 5 files changed, 199 insertions(+), 21 deletions(-)

diff --git a/auth/signupsql.php b/auth/signupsql.php
index bea9f33..82ff727 100644
--- a/auth/signupsql.php
+++ b/auth/signupsql.php
@@ -34,10 +34,9 @@ function getName($n) {
     exit('<h2>This username already exists</h2>');
 }
 
-$stmt = $conn->prepare("INSERT INTO login (username, password, salt1, salt2, theme, customtheme_player_url, customtheme_home_url, lang, region, proxy, player, videoshadow, loadcomments) VALUES (?, ?, ?, ?, ?, 'none', 'none', ?, ?, 'off', 'html', 'on', ?)");
+$stmt = $conn->prepare("INSERT INTO login (username, password, salt1, salt2, theme, customtheme_player_url, customtheme_home_url, lang, region, proxy, videoshadow, loadcomments) VALUES (?, ?, ?, ?, ?, 'none', 'none', ?, ?, 'off', 'on', ?)");
 $stmt->bind_param("ssssssss", $usr, $pw, $salt1, $salt2, $defaultTheme, $defaultLang, $defaultRegion, $defaultLoadCommentsSetting);
 if ($stmt->execute() === TRUE) {
-      echo "<h2>Welcome $usr. Redirecting Soon...</h2>";
     $_SESSION['logged_in_user'] = $usr;
     $_SESSION['hashed_pass'] = $pw;
 } else {
@@ -46,5 +45,5 @@ function getName($n) {
 
 $conn->close();
 
-header( "refresh:2;url=/index.php" );
+header( "refresh:0;url=/index.php" );
 ?>
\ No newline at end of file
diff --git a/settings.php b/settings.php
index 2f9e9be..ead2ee3 100644
--- a/settings.php
+++ b/settings.php
@@ -116,14 +116,6 @@
   } else {
     $checked2 = "";
   }
-  
-  if($playertyperow == "html") {
-    $checked3a = "";
-    $checked3b = "checked";
-  } elseif($playertyperow == "vjs") {
-    $checked3a = "checked";
-    $checked3b = "";
-  }
 
   if ($loadcommentsrow == "showall") {
     $checked4a = "checked";
@@ -148,7 +140,7 @@
     }
   }
 echo '<div class="tenborder">
-<form action="" method="post" id="form" formtarget="_blank">
+<form action="" method="post" id="form">
   <div class="settingsdiv"><h4>'.$translations[$langrow]['visual_prefs'].'</h4>
   <label for="theme">'.$translations[$langrow]['theme'].':</label>
   <select class="formsel" style="border-radius: 6px;" id="theme" name="theme" value="--Please Select--">
@@ -215,8 +207,8 @@
                         <option value="DO">DO</option>                
                         <option value="DZ">DZ</option>                
                         <option value="EC">EC</option>                
-                        <option value="EE">EE</option>                 
-                        <option value="EG">EG</option>                 
+                        <option value="EE">EE</option>
+                        <option value="EG">EG</option>
                         <option value="ES">ES</option>                 
                         <option value="FI">FI</option>                
                         <option value="FR">FR</option>           
diff --git a/styles/playerblue.css b/styles/playerblue.css
index a9c9876..fd06a0f 100644
--- a/styles/playerblue.css
+++ b/styles/playerblue.css
@@ -70,6 +70,21 @@ a:hover, a:focus {
 .tenborder {
     padding: 10px;
 }
+.relatedVideosMob {
+    display: none;
+}
+@media screen and (max-width: 950px) {
+    .relatedVideos {
+        display: none;
+        position: fixed;
+    }
+    .relatedVideosMob {
+        display:contents;
+    }
+    .video-tile {
+        display: inline-block;
+    }
+}
 
 
 
@@ -216,6 +231,53 @@ transition: transform 0.2s;
 transition: 0.3s
 }
 
+.video-tile {
+    width: 256px;
+    border-radius: 8px;
+    margin-top: 6px;
+    margin-right: 4px;
+    margin-left: 4px;
+    text-align: left;
+}
+
+.videoDiv {
+    width: 256px;
+    height: 148px;
+}
+.videoTitle {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: initial;
+}
+.videoDesc {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: initial;
+}
+.videoInfo {
+    width: 256px;
+}
+
+.timestamp {
+    position: absolute;
+    margin-top: -23px;
+    right: 4px;
+    background: rgba(0,0,0,0.7);
+    padding-left: 4px;
+    padding-right: 4px;
+    border-radius: 3px;
+}
+
+.timestamp {
+    position: absolute;
+    margin-top: -23px;
+    right: 4px;
+    background: rgba(0,0,0,0.7);
+    padding-left: 4px;
+    padding-right: 4px;
+    border-radius: 3px;
+}
+
 video {
     box-shadow: 0 0 40px rgb(0, 0, 0);
 }
diff --git a/styles/playerultra-dark.css b/styles/playerultra-dark.css
index 107417d..b9f4046 100644
--- a/styles/playerultra-dark.css
+++ b/styles/playerultra-dark.css
@@ -56,9 +56,62 @@ a:hover, a:focus {
     color: DodgerBlue;
 }
 
+
 .tenborder {
     padding: 10px;
 }
+.relatedVideosMob {
+    display: none;
+}
+@media screen and (max-width: 950px) {
+    .relatedVideos {
+        display: none;
+        position: fixed;
+    }
+    .relatedVideosMob {
+        display:contents;
+    }
+    .video-tile {
+        display: inline-block;
+    }
+}
+
+.video-tile {
+    width: 256px;
+    border-radius: 8px;
+    margin-top: 6px;
+    margin-right: 4px;
+    margin-left: 4px;
+    text-align: left;
+}
+
+.videoDiv {
+    width: 256px;
+    height: 148px;
+}
+.videoTitle {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: initial;
+}
+.videoDesc {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: initial;
+}
+.videoInfo {
+    width: 256px;
+}
+
+.timestamp {
+    position: absolute;
+    margin-top: -23px;
+    right: 4px;
+    background: rgba(0,0,0,0.7);
+    padding-left: 4px;
+    padding-right: 4px;
+    border-radius: 3px;
+}
 
 
 .sidebar {
@@ -157,9 +210,7 @@ from {opacity: 0;}
 to {opacity: 1;}
 }
 
-.tenborder {
-    padding: 10px;
-}
+
 
 .hr {
 margin: 3px;
diff --git a/watch/index.php b/watch/index.php
index 318a5de..57afa8d 100644
--- a/watch/index.php
+++ b/watch/index.php
@@ -294,10 +294,47 @@
                     
                     ';
 
-            }
+            } ?>
+
+    <div class="relatedVideos" style="float: right;">
+    <h3>Related videos</h3>
+    <?php
+    for ($i = 0; $i < 9; $i++) {
+        $suggestedvideoId = $value['recommendedVideos'][$i]['videoId'] ?? "";
+        $suggestedtitle = $value['recommendedVideos'][$i]['title'] ?? "";
+        $suggesteddescription = $value['recommendedVideos'][$i]['descriptionHtml'] ?? "";
+        $suggestedchannel = $value['recommendedVideos'][$i]['author'] ?? "";
+        $suggestedsharedat = $value['recommendedVideos'][$i]['publishedText'] ?? "";
+        $suggestedauthorId = $value['recommendedVideos'][$i]['authorId'] ?? "";
+
+        $lengthseconds = $value['recommendedVideos'][$i]['lengthSeconds'] ?? "";
+        $vidhours = floor($lengthseconds / 3600) ?? "";
+        $vidmins = floor($lengthseconds / 60 % 60) ?? "";
+        $vidsecs = floor($lengthseconds % 60) ?? "";
+        if ($vidhours == "0") {
+            $timestamp = $vidmins . ':' . $vidsecs ?? "";
+        } else {
+            $timestamp = $vidhours . ':' . $vidmins . ':' . $vidsecs ?? "";
+        }
+    ?>
+
+        <a class="awhite" href="/watch/?v=<?php echo $suggestedvideoId; ?>">
+            <div class="video-tile w3-animate-left">
+                <div class="videoDiv">
+                    <img src="http://i.ytimg.com/vi/<?php echo $suggestedvideoId; ?>/mqdefault.jpg" height="144px">
+                    <div class="timestamp"><?php echo $timestamp; ?></div>
+                </div>
+                <div class="videoInfo">
+                    <div class="videoTitle"><b><?php echo $suggestedtitle; ?></b><br><?php echo $suggestedchannel; ?> <div style="float: right;"><?php echo $suggestedsharedat; ?></div></div>
+                </div>
+            </div>
+        </a>
+
+    <?php 
+    }
+    ?> 
+</div>
 
-            
-        ?>
 
         <textarea hidden id="textbox" value="<?php echo $url; ?>"><?php echo $url; ?></textarea>
         
@@ -413,7 +450,7 @@ function makeTimestamptoLinkSmaller($string) {
 $cdesc = str_replace('href="https://www.youtube.com/watch?v=','href="/watch/?v=',$cdesc);
 ?>
 
- 
+
  
  <details><summary><a class="button"><?php echo $translations[$langrow]['show-hide-desc']; ?></a></summary> <a style="margin-right: 3px;" class="button" href="//youtu.be/<?php echo $params['v']?>"><?php echo $translations[$langrow]['watch_on_yt']; ?></a><a style="margin-right: 3px;" class="button" href="//redirect.invidious.io/<?php echo $params['v']?>"><?php echo $translations[$langrow]['watch_on_inv']; ?></a><a href="https://liberatube-instances.epicsite.xyz/?v=<?php echo $params['v']?>" class="button"><?php echo $translations[$langrow]['switch_instance']; ?></a><hr style="margin-top: 8px; margin-bottom: 5px;" class="hr"><?php echo $cdesc; ?> </details><br>
 
@@ -422,7 +459,44 @@ function makeTimestamptoLinkSmaller($string) {
         <script src="/scripts/playermain.js"></script>
         <script src="/scripts/playlist.js"></script>
         <script src="/scripts/sidebar.js"></script>
+<div class="relatedVideosMob">
+    <h3>Related videos</h3>
+    <?php
+    for ($i = 0; $i < 9; $i++) {
+        $suggestedvideoId = $value['recommendedVideos'][$i]['videoId'] ?? "";
+        $suggestedtitle = $value['recommendedVideos'][$i]['title'] ?? "";
+        $suggesteddescription = $value['recommendedVideos'][$i]['descriptionHtml'] ?? "";
+        $suggestedchannel = $value['recommendedVideos'][$i]['author'] ?? "";
+        $suggestedsharedat = $value['recommendedVideos'][$i]['publishedText'] ?? "";
+        $suggestedauthorId = $value['recommendedVideos'][$i]['authorId'] ?? "";
+
+        $lengthseconds = $value['recommendedVideos'][$i]['lengthSeconds'] ?? "";
+        $vidhours = floor($lengthseconds / 3600) ?? "";
+        $vidmins = floor($lengthseconds / 60 % 60) ?? "";
+        $vidsecs = floor($lengthseconds % 60) ?? "";
+        if ($vidhours == "0") {
+            $timestamp = $vidmins . ':' . $vidsecs ?? "";
+        } else {
+            $timestamp = $vidhours . ':' . $vidmins . ':' . $vidsecs ?? "";
+        }
+    ?>
+
+        <a class="awhite" href="/watch/?v=<?php echo $suggestedvideoId; ?>">
+            <div class="video-tile w3-animate-left">
+                <div class="videoDiv">
+                    <img src="http://i.ytimg.com/vi/<?php echo $suggestedvideoId; ?>/mqdefault.jpg" height="144px">
+                    <div class="timestamp"><?php echo $timestamp; ?></div>
+                </div>
+                <div class="videoInfo">
+                    <div class="videoTitle"><b><?php echo $suggestedtitle; ?></b><br><?php echo $suggestedchannel; ?> <div style="float: right;"><?php echo $suggestedsharedat; ?></div></div>
+                </div>
+            </div>
+        </a>
 
+    <?php 
+    }
+    ?> 
+</div>
  <?php
 
     if ($_GET['comments']) {