From 379cb1abfe61f3d5dde6de1342a459a7d900a9d9 Mon Sep 17 00:00:00 2001
From: A1Gard <a1gard@4xmen.ir>
Date: Thu, 12 Dec 2024 02:30:50 +0330
Subject: [PATCH] added grid clip theme part fixed autoplay limit problem

---
 .../AutoPlayClips/AutoPlayClips.blade.php     |   2 +-
 .../clips/GridClips/GridClips.blade.php       |  18 +++
 .../segments/clips/GridClips/GridClips.js     |   0
 .../segments/clips/GridClips/GridClips.json   |  10 ++
 .../segments/clips/GridClips/GridClips.php    |  21 +++
 .../segments/clips/GridClips/GridClips.scss   | 129 ++++++++++++++++++
 6 files changed, 179 insertions(+), 1 deletion(-)
 create mode 100644 resources/views/segments/clips/GridClips/GridClips.blade.php
 create mode 100644 resources/views/segments/clips/GridClips/GridClips.js
 create mode 100644 resources/views/segments/clips/GridClips/GridClips.json
 create mode 100644 resources/views/segments/clips/GridClips/GridClips.php
 create mode 100644 resources/views/segments/clips/GridClips/GridClips.scss

diff --git a/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php
index c966f76..21aa0f9 100644
--- a/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php
+++ b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php
@@ -4,7 +4,7 @@
             {{getSetting($data->area_name.'_'.$data->part.'_title')}}
         </h1>
         <div class="autoplay-clip-list">
-        @foreach(\App\Models\Clip::where('status',1)->get() as $clip)
+        @foreach(\App\Models\Clip::where('status',1)->orderByDesc('id')->limit(4)->get() as $clip)
             <div class="autoplay-clip-item">
                 <a href="{{$clip->webUrl()}}">
                     <i class="ri-play-circle-line"></i>
diff --git a/resources/views/segments/clips/GridClips/GridClips.blade.php b/resources/views/segments/clips/GridClips/GridClips.blade.php
new file mode 100644
index 0000000..19cfd92
--- /dev/null
+++ b/resources/views/segments/clips/GridClips/GridClips.blade.php
@@ -0,0 +1,18 @@
+<section class='GridClips'>
+    <div class="{{gfx()['container']}}">
+        <div class="grid-video-container">
+            @foreach(\App\Models\Clip::where('status',1)->orderByDesc('id')->limit(4)->get() as $clip)
+                <div class="grid-clip-item">
+                    <i class="ri-file-video-line"></i>
+                    <a href="{{$clip->webUrl()}}">
+                        <img src="{{$clip->imgUrl()}}" alt="{{$clip->title}}">
+                        <h3>
+                            {{$clip->title}}
+                        </h3>
+                    </a>
+                    {{--                <img src="{{$clip->imgUrl()}}" alt="">--}}
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>
diff --git a/resources/views/segments/clips/GridClips/GridClips.js b/resources/views/segments/clips/GridClips/GridClips.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/clips/GridClips/GridClips.json b/resources/views/segments/clips/GridClips/GridClips.json
new file mode 100644
index 0000000..9e56a84
--- /dev/null
+++ b/resources/views/segments/clips/GridClips/GridClips.json
@@ -0,0 +1,10 @@
+{
+    "name": "GridClips",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/clips/GridClips/GridClips.php b/resources/views/segments/clips/GridClips/GridClips.php
new file mode 100644
index 0000000..8a57d50
--- /dev/null
+++ b/resources/views/segments/clips/GridClips/GridClips.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class GridClips
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/clips/GridClips/GridClips.scss b/resources/views/segments/clips/GridClips/GridClips.scss
new file mode 100644
index 0000000..b9c2a79
--- /dev/null
+++ b/resources/views/segments/clips/GridClips/GridClips.scss
@@ -0,0 +1,129 @@
+.GridClips {
+    // scss
+    padding: 3rem 0;
+
+    .grid-video-container {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px;
+        grid-template-rows: repeat(2, 1fr);
+        height: 70vh; // Set the height of the grid
+        width: 100%; // Full width of the container
+    }
+
+    .grid-clip-item {
+        border-radius: var(--xshop-border-radius);
+        overflow: hidden;
+        position: relative;
+
+        i{
+            position: absolute;
+            top: 1rem;
+            inset-inline-end: 1rem;
+            z-index: 3;
+            padding: .3rem;
+            background: #ffffff66;
+            font-size: 30px;
+            display: inline-block;
+            border-radius: var(--xshop-border-radius);
+            backdrop-filter: blur(7px);
+        }
+        h3{
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            text-align: center;
+            background: var(--xshop-diff);
+            padding: 1rem;
+            background: #ffffff66;
+            color: black;
+            backdrop-filter: blur(7px);
+            opacity: 0;
+            transition: 400ms;
+            transform: translateY(-50%);
+        }
+        img {
+            object-fit: cover;
+            transition: 400ms;
+            width: 100%;
+            height: 100%;
+        }
+
+        &:hover{
+            h3{
+                opacity: 1;
+            }
+
+            img{
+                transform: rotateZ(3deg) scale(1.3) ;
+                filter: contrast(1.7) grayscale(.75);
+            }
+        }
+
+        // First item (half of the grid)
+        &:nth-child(1) {
+            grid-column: 1 / 3; // Span columns 1 and 2
+            grid-row: 1 / 3; // First row
+        }
+
+        // Second item (25% width, 50% height)
+        &:nth-child(2) {
+            grid-column: 3; // Third column
+            grid-row: 1 / 2; // First row
+        }
+
+        // Third item (25% width, 50% height)
+        &:nth-child(3) {
+            grid-column: 3; // Fourth column
+            grid-row: 2 / 3; // First row
+        }
+
+        // Fourth item (full height, 25% width)
+        &:nth-child(4) {
+            grid-column: 4; // Third column
+            grid-row: 1 / 3; // Second row
+        }
+    }
+
+    /*-992px width*/
+    @media (max-width: 992px) {
+
+        .grid-video-container {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 10px;
+            grid-template-rows: repeat(4, 1fr);
+        }
+
+        .grid-clip-item {
+
+            // First item (half of the grid)
+            &:nth-child(1) {
+                grid-column: 1 / 5; // Span columns 1 and 2
+                grid-row: 1 / 3; // First row
+            }
+
+            // Second item (25% width, 50% height)
+            &:nth-child(2) {
+                grid-column: 1  / 3; // Third column
+                grid-row: 3 / 4; // First row
+            }
+
+            // Third item (25% width, 50% height)
+            &:nth-child(3) {
+                grid-column: 1 / 3; // Fourth column
+                grid-row: 4 / 5; // First row
+            }
+
+            // Fourth item (full height, 25% width)
+            &:nth-child(4) {
+                grid-column:  3 / 5; // Third column
+                grid-row: 3 / 5; // Second row
+            }
+        }
+
+        h3{
+            font-size: 17px;
+        }
+    }
+}