add basic rating system

css/video_page.css

@@ -84,4 +84,8 @@
   color: rgba(243, 211, 28, 0.966);
 }
 
+.video__id__span {
+  display: none;
+}
+
 /* Modifiers */

includes/star_rating.inc.php

@@ -0,0 +1,57 @@
+<?php
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $json = file_get_contents('php://input');
+    $data = json_decode($json);
+    $rating = $data->rating;
+    $video_id = $data->video_id;
+
+
+    try {
+        require_once "./db_handler.inc.php";
+        require_once "../models/videos.inc.php";
+        require_once "./config_session.inc.php";
+
+        // Error handlers
+        $errors = [];
+
+
+        // check if user is logged in
+        if (!isset($_SESSION["user_id"])) {
+            $errors[] = "You need to be logged in to rate this video";
+        }
+
+
+        // check if rating is not empty or zero
+        else if (empty($rating) || $rating == 0) {
+            $errors[] = "Rating cannot be empty or zero";
+        }
+
+        // check if video is not empty and does exist
+        else if (empty($video_id) || !fetch_video_by_id($pdo, $video_id)) {
+            $errors[] = "Video does not exist";
+        }
+
+
+
+        if ($errors) {
+            $_SESSION["error_star_rating"] = $errors;
+            die();
+        }
+
+        // Rate video
+
+        submit_star_rating($pdo, $video_id, $rating);
+
+        header('Location: ../pages/video_page.php?video_id=' . $video_id . '&success=video_rated');
+        // close connection
+        $pdo = null;
+        $stmt = null;
+        die();
+    } catch (PDOException $e) {
+        die("Error while rating this video: " . $e->getMessage());
+    }
+} else {
+    header("Location: ../pages/video_page.php?video_id=" . $video_id);
+    exit();
+}

js/star_rating.js

@@ -1,5 +1,7 @@
 const stars = document.querySelectorAll(".far.fa-star");
 
+const videoId = document.querySelector(".video__id__span").innerText.trim();
+
 let clickedStarIndex = -1; // global variable to keep track of clicked star
 
 function hoverStar() {
@@ -13,6 +15,11 @@ function hoverStar() {
     star.addEventListener("click", () => {
       clickedStarIndex = index;
       updateStars(clickedStarIndex, "click");
+
+      let rating = clickedStarIndex + 1;
+      console.log("rating: ", rating);
+      console.log("videoId: ", videoId);
+      ratingAjax(rating, videoId);
     });
   });
 }
@@ -32,3 +39,13 @@ function updateStars(starIndex, eventType) {
 }
 
 hoverStar();
+
+function ratingAjax(rating, video_id) {
+  fetch("../includes/star_rating.inc.php", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ rating, video_id: video_id }),
+  });
+}

models/videos.inc.php

@@ -194,3 +194,14 @@ function fetch_uploaded_videos(object $pdo, int $user_id): array
     $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
     return $result;
 }
+
+// submit star rating
+function submit_star_rating(object $pdo, int $video_id, string $rating): void
+{
+    // ratings_count should be incremented, and ratings_sum should be incremented by the rating
+    $query = "UPDATE video_ratings SET ratings_count = ratings_count + 1, ratings_sum = ratings_sum + :rating, updated_at = CURRENT_TIMESTAMP WHERE video_id = :video_id";
+    $stmt = $pdo->prepare($query);
+    $stmt->bindParam(":rating", $rating, PDO::PARAM_STR);
+    $stmt->bindParam(":video_id", $video_id, PDO::PARAM_INT);
+    $stmt->execute();
+}

pages/video_page.php

@@ -39,6 +39,9 @@
 
     ?>
     <main class="player">
+        <span class="video__id__span">
+            <?php echo $current_video_id; ?>
+        </span>
         <video class="player__video video-js" controls preload="auto" width="650" height="300" poster="../uploads/thumbnails/<?php echo $video['video_thumbnail']; ?>" data-setup="{}">
             <source src="../uploads/videos/<?php echo $video['video_path']; ?>" type="video/mp4" />
             <p class="vjs-no-js">
@@ -92,7 +95,7 @@
                 </div>
                 <div class="player__stats__ratings__right">
                     <p class="ratings">
-                        Rating: <span class="average__rating"><?php echo $average_rating; ?></span>
+                        Avg Rating: <span class="average__rating"><?php echo $average_rating; ?></span>
                     </p>
                 </div>
             </div>
@@ -110,6 +113,8 @@
     <?php
     check_and_print_video_subscription_errors();
 
+    check_and_print_star_rating_errors();
+
     if (isset($_GET["success"]) && $_GET["success"] === "user_subscribed") {
         echo <<<HTML
           <section class="modal modal--success">

views/video_ratings.php

@@ -21,3 +21,21 @@ function check_and_print_video_subscription_errors()
         }
     }
 }
+
+// check and print star rating errors
+function check_and_print_star_rating_errors()
+{
+    if (isset($_SESSION["error_star_rating"])) {
+        $errors = $_SESSION["error_star_rating"];
+        if (count($errors) > 0) {
+            echo "<section class='modal modal--error'>";
+            echo "<h1 class='modal__title'>Errors occurred while rating this video: </h1>";
+            echo "<span class='modal__close modal__close--error'>X</span>";
+            foreach ($errors as $error) {
+                echo "<p class='modal__item'>$error</p>";
+            }
+            echo "</section>";
+            unset($_SESSION["error_star_rating"]);
+        }
+    }
+}