mirror of https://github.com/4xmen/xshop.git
added autoplay video to groups
added submenu expandable to homayon-menu repsonosivemaster
parent
60b25eefc3
commit
0d3df2ed2c
@ -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>
|
@ -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 {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@ -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": []
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue