added autoplay video to groups

added submenu expandable to homayon-menu repsonosive

resources/views/segments/group/AutoPlayAttachment/AutoPlayAttachment.blade.php

@@ -0,0 +1,18 @@
+<section class="AutoPlayAttachment live-setting" data-live="{{$data->area_name.'_'.$data->part}}" >
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{getSetting($data->area_name.'_'.$data->part.'_title')}}
+        </h1>
+        <div class="autoplay-clip-list">
+            @php($group = \App\Models\Group::first())
+            @foreach($group->attachs()->where('ext','mp4')->get() as $clip)
+                <div class="autoplay-clip-item-group">
+                    <a href="{{$clip->url()}}">
+                        <i class="ri-play-circle-line"></i>
+                        <video preload="none" src="{{$clip->url()}}" poster="{{$group->bgUrl()}}" muted ></video>
+                    </a>
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>

resources/views/segments/group/AutoPlayAttachment/AutoPlayAttachment.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.autoplay-clip-item-group').forEach(function (el) {
+        el.addEventListener('mouseenter', function () {
+            try {
+                this.querySelector('video').play();
+                this.querySelector('i').style.display = 'none';
+            } catch {
+            }
+
+        });
+        el.addEventListener('mouseleave', function () {
+            try {
+                this.querySelector('video').pause();
+                this.querySelector('i').style.display = 'block';
+            } catch {
+            }
+        });
+    });
+});

resources/views/segments/group/AutoPlayAttachment/AutoPlayAttachment.json

@@ -0,0 +1,10 @@
+{
+    "name": "AutoPlayAttachment",
+    "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": []
+}

resources/views/segments/group/AutoPlayAttachment/AutoPlayAttachment.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Setting;
+
+class AutoPlayAttachment
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_title';
+        $setting->value = "Clips list";
+        $setting->type = 'text';
+        $setting->size = 6;
+        $setting->title =  $part->area_name . ' ' . $part->part;
+        $setting->save();
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/group/AutoPlayAttachment/AutoPlayAttachment.scss

@@ -0,0 +1,49 @@
+.AutoPlayAttachment {
+    // scss
+    padding: 2rem 0;
+
+    h1 {
+        font-size: 27px;
+        font-weight: 400;
+    }
+
+    .autoplay-clip-list {
+        display: flex;
+        column-gap: .5rem;
+    }
+    a{
+        display: block;
+        position: relative;
+        i{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            font-size: 75px;
+            color: white;
+        }
+    }
+
+    .autoplay-clip-item-group {
+        transition: 700ms;
+        flex: 1;
+        video,img {
+            width: 100%;
+            border-radius: var(--xshop-border-radius);
+            height: 300px;
+            object-fit: cover;
+        }
+        &:hover{
+            flex-grow: 2;
+        }
+    }
+}
+
+
+/*-768px width*/
+@media (max-width: 768px) {
+    .autoplay-clip-list {
+        display: grid !important;
+        grid-template-columns: repeat(2,1fr) !important;
+    }
+}

resources/views/segments/menu/HomayonMenu/HomayonMenu.js

@@ -26,5 +26,25 @@ const toggleSideMenu = function (e) {
 };
 document.addEventListener('DOMContentLoaded',function () {
     document.querySelector('#homa-toggle-menu')?.addEventListener('click',toggleSideMenu);
+
+    document.querySelectorAll('.homayon-resp-menu ul li ul')?.forEach(function (el) {
+        const span = document.createElement('span');
+        span.classList.add('ri-arrow-down-wide-line');
+        span.classList.add('float-end');
+        span.classList.add('m-2');
+        el.parentNode.prepend(span);
+
+        span.addEventListener('click',function (e) {
+            this.parentNode.querySelector(':scope > ul').classList.toggle('active');
+            if (this.classList.contains('ri-arrow-down-wide-line')){
+                span.classList.remove('ri-arrow-down-wide-line');
+                span.classList.add('ri-arrow-up-wide-line');
+            }else{
+                span.classList.remove('ri-arrow-up-wide-line');
+                span.classList.add('ri-arrow-down-wide-line');
+
+            }
+        });
+    });
 });
 

resources/views/segments/menu/HomayonMenu/HomayonMenu.scss

@@ -333,4 +333,22 @@
         }
     }
 
+    /* submenu expandable */
+    .homayon-resp-menu{
+        ul{
+            li{
+                ul{
+                    display: none;
+
+                    &.active{
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        .ri-arrow-down-wide-line{
+            cursor: pointer;
+        }
+    }
 }