Merge pull request #344 from ITU-BDSA2024-GROUP10/short-form-content

Short form content

Chirp/src/Chirp.Web/Pages/Shared/Components/CheepList/Default.cshtml

@@ -14,25 +14,13 @@ private
     }
 }
 
-<script type="text/javascript">
-    function showPopup() {
-        document.getElementById('popup').style.display = 'flex';
-    }
-
-    function cancelPopup() {
-        document.getElementById('popup').style.display = 'none';
-    }
-
-    function goToSpecificCheep(cheepId) {
-        window.location.href = `/SpecificCheep?cheepId=${cheepId}`;
-    }
-
-</script>
+@await Component.InvokeAsync("SideVideo", new {isLeft = true})
+@await Component.InvokeAsync("SideVideo", new {isLeft = false})
 
 <ul id="messagelist" class="cheeps">
     @foreach (var cheep in cheeps)
     {
-        <li style ="word-wrap: break-word;">
+        <li style="word-wrap: break-word;">
             <p>
                 <strong>
                     <a href="/@cheep.Author">@cheep.Author</a>
@@ -61,3 +49,18 @@ private
         </li>
     }
 </ul>
+
+<script type="text/javascript">
+    function showPopup() {
+        document.getElementById('popup').style.display = 'flex';
+    }
+
+    function cancelPopup() {
+        document.getElementById('popup').style.display = 'none';
+    }
+
+    function goToSpecificCheep(cheepId) {
+        window.location.href = `/SpecificCheep?cheepId=${cheepId}`;
+    }
+
+</script>

Chirp/src/Chirp.Web/Pages/Shared/Components/SideVideo/Default.cshtml

@@ -0,0 +1,42 @@
+
+@{
+    var videoList = ViewBag.VideoList as List<string>;
+    var isLeft = ViewBag.IsLeft;
+}
+
+@if (isLeft)
+{
+    <div id="videoLeftContainer" class="video-container">
+        <video id="leftVideo" autoplay muted disablePictureInPicture>
+            <source src="@videoList?[0]" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+}
+else
+{
+    <div id="videoRightContainer" class="video-container">
+        <video id="rightVideo" autoplay muted disablePictureInPicture>
+            <source src="@videoList?[0]" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+}
+
+<script type="module">
+    import VideoController from '/js/videoController.js';
+
+    const videoList = @Html.Raw(Json.Serialize(videoList));
+    const isLeft = @Html.Raw(Json.Serialize(isLeft));
+    
+    if(isLeft)
+    {
+        const leftVideoElement = document.getElementById('leftVideo');
+        new VideoController(leftVideoElement, videoList);
+    }
+    else
+    {
+        const rightVideoElement = document.getElementById('rightVideo');
+        new VideoController(rightVideoElement, videoList);
+    }
+</script>

Chirp/src/Chirp.Web/Pages/Shared/_Layout.cshtml

@@ -31,6 +31,8 @@
 </div>
 
 <script src="/js/follow.js"></script>
+@* this is used for the video css to now how to size them *@
+<script src="/js/updateWindowWidth.js"></script>
 @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>

Chirp/src/Chirp.Web/Pages/SpecificCheep.cshtml

@@ -8,6 +8,9 @@
     var comments = Model.Comments;
 }
 
+@await Component.InvokeAsync("SideVideo", new {isLeft = true})
+@await Component.InvokeAsync("SideVideo", new {isLeft = false})
+
 <div style="padding: 10px;">
     <strong>
         <a href="/@cheep.Author">@cheep.Author</a>

Chirp/src/Chirp.Web/ViewComponents/CheepListViewComponent.cs

@@ -5,10 +5,11 @@ namespace Chirp.Web.ViewComponents;
 
 public class CheepListViewComponent : ViewComponent
 {
-    public IViewComponentResult Invoke(IEnumerable<CheepDTO> cheeps, String targetPage)
+    public IViewComponentResult Invoke(IEnumerable<CheepDTO> cheeps, string targetPage)
     {
         ViewBag.TargetPage = targetPage;
         ViewBag.Cheeps = cheeps;
+
         return View("Default");
     }
 }

Chirp/src/Chirp.Web/ViewComponents/SideVideoViewComponent.cs

@@ -0,0 +1,29 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace Chirp.Web.ViewComponents;
+
+public class SideVideoViewComponent : ViewComponent
+{
+    private readonly List<string> _videoNames =
+    [
+        "~/videos/Kittens.mp4",
+        "~/videos/SubwaySurfers_1.mp4",
+        "~/videos/SubwaySurfers_2.mp4",
+        "~/videos/TempleRun.mp4"
+    ];
+
+    public IViewComponentResult Invoke(bool isLeft)
+    {
+        ViewBag.IsLeft = isLeft;
+        ViewBag.VideoList = GetVideos();
+
+        return View("Default");
+    }
+
+    public List<string> GetVideos()
+    {
+        var random = new Random();
+        var videos = _videoNames.OrderBy(x => random.Next()).ToList();
+        return videos.Select(v =>Url.Content(v)).ToList();
+    }
+}