added clips list theme part

added dor clip theme part
fixed some clip upload bug
fixe product preview permission
optimized mp3 & mp4 player

app/Http/Controllers/Admin/ClipController.php

@@ -88,6 +88,9 @@ class ClipController extends XController
                     config('app.media.watermark_size'), Unit::Percent, Fit::Contain,
                     config('app.media.watermark_opacity'));
             }
+            if (!file_exists(storage_path() . '/app/public/cover')){
+                mkdir(storage_path() . '/app/public/cover/');
+            }
             $i->save(storage_path() . '/app/public/cover/optimized-'. $clip->$key);
         }
 

app/Http/Controllers/ClientController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers;
 
 use App\Models\Attachment;
 use App\Models\Category;
+use App\Models\Clip;
 use App\Models\Comment;
 use App\Models\Customer;
 use App\Models\Gallery;
@@ -44,6 +45,18 @@ class ClientController extends Controller
         return view('client.post', compact('area', 'post', 'title', 'subtitle'));
     }
 
+    public function clip(Clip $clip)
+    {
+
+        if ($clip->status = 0 && !auth()->check()) {
+            return abort(403);
+        }
+        $area = 'clip';
+        $title = $clip->title;
+        $subtitle = '';
+        return view('client.default-list', compact('area', 'clip', 'title', 'subtitle'));
+    }
+
     public function gallery(Gallery $gallery)
     {
         if ($gallery->status = 0 && !auth()->check()) {
@@ -85,6 +98,15 @@ class ClientController extends Controller
             ->orderByDesc('id')->paginate($this->paginate);
         return view('client.default-list', compact('area', 'galleries', 'title', 'subtitle'));
     }
+    public function clips()
+    {
+        $area = 'clips-list';
+        $title = __("Video clips list");
+        $subtitle = '';
+        $clips = Clip::where('status', 1)
+            ->orderByDesc('id')->paginate($this->paginate);
+        return view('client.default-list', compact('area', 'clips', 'title', 'subtitle'));
+    }
 
     public function attachments()
     {
@@ -167,6 +189,9 @@ class ClientController extends Controller
 
     public function product(Product $product)
     {
+        if ($product->status = 0 && !auth()->check()) {
+            return abort(403);
+        }
         $area = 'product';
         $title = $product->name;
         $subtitle = $product->excerpt; // WIP SEO

app/Http/Requests/ClipSaveRequest.php

@@ -25,7 +25,7 @@ class ClipSaveRequest extends FormRequest
             'title' => ['required', 'string', 'max:255','min:5'],
             'body' => ['nullable', 'string',],
             'active' => ['nullable', 'boolean'],
-            'clip' => ['nullable', 'mimes:mp4', 'max:'.'max:'.getMaxUploadSize()],
+            'clip' => ['nullable', 'mimes:mp4', 'max:'.getMaxUploadSize()],
             'cover' => ['nullable', 'image', 'mimes:jpeg,png,jpg,gif,svg', 'max:2048'],
         ];
     }

app/Models/Clip.php

@@ -22,10 +22,10 @@ class Clip extends Model
     public function imgUrl()
     {
         if ($this->cover == null) {
-            return asset('assets/upload/logo.svg');;
+            return asset('assets/upload/logo.svg');
         }
 
-        return \Storage::url('clips/optimized-' . $this->cover);
+        return \Storage::url('cover/optimized-' . $this->cover);
     }
     public function imgOriginalUrl()
     {
@@ -55,8 +55,7 @@ class Clip extends Model
     }
 
     public function webUrl(){
-        return  '#';// WIP
+        return route('client.clip',$this->slug);
-        return route('');
     }
 
 

resources/js/client-vue/mp3player.vue

@@ -64,14 +64,14 @@ export default {
         }
     },
     mounted() {
-        // window.addEventListener('load',()=>{
+        window.addEventListener('load',()=>{
         setTimeout(() => {
             this.link = this.asset;
         }, 500);
         setInterval(() => {
             this.updatePlayer();
         }, 300);
-        // });
+        });
     },
     computed: {
 

resources/js/client-vue/videoPlayer.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mp4-player">
-        <video ref="p" :src="link" class="video"></video>
+        <video ref="p" :src="link" class="video" :poster="cover"></video>
         <div class="seek-container">
             <div ref="seekbar" class="seekbar" @click="seek">
                 <div class="progress-seek" :style="progressPercent"></div>
@@ -61,17 +61,21 @@ export default {
     props: {
         asset: {
             required: true
+        },
+        cover:{
+            default: null,
         }
     },
     mounted() {
-        // window.addEventListener('load',()=>{
+        window.addEventListener('load',()=>{
         setTimeout(() => {
             this.link = this.asset;
+            document.querySelector('#video-preview-botz').style.display = 'none';
         }, 500);
         setInterval(() => {
             this.updatePlayer();
         }, 300);
-        // });
+        });
     },
     computed: {
 
@@ -148,6 +152,7 @@ export default {
     border: 1px solid var(--xshop-primary);
     padding: 1rem;
     border-radius: var(--xshop-border-radius);
+    overflow: hidden;
 }
 
 

resources/views/segments/clip/DorClip/DorClip.blade.php

@@ -0,0 +1,15 @@
+<section class='DorClip content'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{$title}}
+        </h1>
+        <div id="video-preview-botz">
+            <video controls src="{{$clip->fileUrl()}}" poster="{{$clip->imgUrl()}}"></video>
+        </div>
+        <mp4player
+            asset="{{$clip->fileUrl()}}" cover="{{$clip->imgUrl()}}"></mp4player>
+        <div class="text-muted clip-body ps-4 border-end-0 mt-4">
+            {!! $clip->body !!}
+        </div>
+    </div>
+</section>

resources/views/segments/clip/DorClip/DorClip.json

@@ -0,0 +1,10 @@
+{
+    "name": "DorClip",
+    "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/clip/DorClip/DorClip.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class DorClip
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/clip/DorClip/DorClip.scss

@@ -0,0 +1,16 @@
+.DorClip {
+
+    padding: 3rem 0;
+    h1{
+        font-size: 30px;
+        font-weight: 300;
+        margin-bottom: 1rem;
+    }
+
+
+    .clip-body{
+        border: 3px solid var(--xshop-primary);
+        border-top: 0;
+        border-bottom: 0;
+    }
+}

resources/views/segments/clips_page/ClipListGrid/ClipListGrid.blade.php

@@ -0,0 +1,26 @@
+<section class='ClipListGrid content'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{$title}}
+        </h1>
+        <div class="row">
+            @foreach($clips as $clip)
+
+                <div class="col-lg-4">
+
+                    <div class="clip-grid-item">
+                        <a href="{{$clip->webUrl()}}">
+                            <img src="{{$clip->imgUrl()}}" alt="">
+                            <h2>
+                                <span>
+                                    {{$clip->title}}
+                                </span>
+                                <i class="ri-play-circle-line"></i>
+                            </h2>
+                        </a>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>

resources/views/segments/clips_page/ClipListGrid/ClipListGrid.json

@@ -0,0 +1,10 @@
+{
+    "name": "ClipListGrid",
+    "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/clips_page/ClipListGrid/ClipListGrid.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class ClipListGrid
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/clips_page/ClipListGrid/ClipListGrid.scss

@@ -0,0 +1,79 @@
+.ClipListGrid {
+    .container,.container-fluid{
+        overflow: hidden;
+    }
+
+    h1{
+        font-size: 30px;
+        font-weight: 200;
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+    padding: 2rem 0;
+
+    .clip-grid-item {
+        position: relative;
+        height: 25vh;
+        border-radius: var(--xshop-border-radius);
+        overflow: hidden;
+        margin-bottom: 2rem;
+
+        img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            object-fit: cover;
+        }
+
+        h2 {
+            display: flex;
+            position: absolute;
+            z-index: 2;
+            background: rgba($xshop-diff, .7);
+            padding: 7px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            backdrop-filter: blur(5px);
+            margin-bottom: 0;
+            font-weight: 400;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            transition: 500ms;
+            height: 3.5rem;
+
+            i{
+                transition: 500ms;
+                font-size: 0;
+            }
+
+            span{
+                transition: 500ms;
+                font-size: 20px;
+            }
+        }
+
+        &:hover {
+            h2 {
+                right: 1rem;
+                left: 1rem;
+                bottom: 1rem;
+                border-radius: var(--xshop-border-radius);
+                height: calc(100% - 2rem);
+
+                span{
+                    font-size: 0;
+                }
+
+                i{
+                    font-size: 75px;
+                }
+            }
+        }
+    }
+}

routes/web.php

@@ -370,11 +370,13 @@ Route::middleware([\App\Http\Middleware\VisitorCounter::class])
     Route::get('/customer/profile', [\App\Http\Controllers\ClientController::class,'profile'])->name('profile');
     Route::get('/compare', [\App\Http\Controllers\ClientController::class,'compare'])->name('compare');
     Route::get('/galleries', [\App\Http\Controllers\ClientController::class,'galleries'])->name('galleries');
+    Route::get('/videos', [\App\Http\Controllers\ClientController::class,'clips'])->name('clips');
     Route::get('/products', [\App\Http\Controllers\ClientController::class,'products'])->name('products');
     Route::get('/attachments', [\App\Http\Controllers\ClientController::class,'attachments'])->name('attachments');
     Route::get('/attachment/{attachment}', [\App\Http\Controllers\ClientController::class,'attachment'])->name('attachment');
-    Route::get('/tag/{post}', [\App\Http\Controllers\ClientController::class,'tag'])->name('tag'); // wip
+    Route::get('/tag/{slug}', [\App\Http\Controllers\ClientController::class,'tag'])->name('tag'); // wip
     Route::get('/product/{product}', [\App\Http\Controllers\ClientController::class,'product'])->name('product');
+    Route::get('/video/{clip}', [\App\Http\Controllers\ClientController::class,'clip'])->name('clip');
     Route::get('/category/{category}', [\App\Http\Controllers\ClientController::class,'category'])->name('category');
     Route::get('/gallery/{gallery}', [\App\Http\Controllers\ClientController::class,'gallery'])->name('gallery');
     Route::get('/search', [\App\Http\Controllers\ClientController::class,'search'])->name('search');