From 69e4ed3bffaf16beb8ad2c236f0742b3ca26c7ba Mon Sep 17 00:00:00 2001
From: Constantin Plaiasu <cplaiasu@gmail.com>
Date: Mon, 26 Aug 2024 01:03:16 +0300
Subject: [PATCH] performance test

---
 public/build/assets/watch-D6zQQVIa.css   |  1 -
 public/build/assets/watch-DqwsOmtD.css   |  1 +
 public/build/manifest.json               |  2 +-
 resources/scss/watch.scss                | 44 ++++++++++++++----------
 resources/views/components/nav.blade.php |  7 ++--
 resources/views/layouts/layout.blade.php |  6 ++--
 resources/views/movie.blade.php          | 13 +++----
 7 files changed, 43 insertions(+), 31 deletions(-)
 delete mode 100644 public/build/assets/watch-D6zQQVIa.css
 create mode 100644 public/build/assets/watch-DqwsOmtD.css

diff --git a/public/build/assets/watch-D6zQQVIa.css b/public/build/assets/watch-D6zQQVIa.css
deleted file mode 100644
index 2dacefe..0000000
--- a/public/build/assets/watch-D6zQQVIa.css
+++ /dev/null
@@ -1 +0,0 @@
-picture:after{content:"";top:0;left:0;bottom:-6px;width:100%;box-shadow:inset 1px 0 105px 105px #0d0d31;background:linear-gradient(to bottom,#0d0d3105,#0d0d31);background-color:#0d0d3188;position:absolute}picture>img{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:100%;width:100%;position:absolute;top:0}
diff --git a/public/build/assets/watch-DqwsOmtD.css b/public/build/assets/watch-DqwsOmtD.css
new file mode 100644
index 0000000..4c76e89
--- /dev/null
+++ b/public/build/assets/watch-DqwsOmtD.css
@@ -0,0 +1 @@
+picture{position:absolute;width:100%;top:0;min-height:720px}picture:after{content:"";top:0;left:0;bottom:-6px;width:100%;box-shadow:inset 1px 0 105px 105px #0d0d31;background:linear-gradient(to bottom,#0d0d3105,#0d0d31);background-color:#0d0d3188;position:absolute}picture>img{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:100%;width:100%;position:absolute;top:0}
diff --git a/public/build/manifest.json b/public/build/manifest.json
index f0bee3c..2729012 100644
--- a/public/build/manifest.json
+++ b/public/build/manifest.json
@@ -76,7 +76,7 @@
     "isEntry": true
   },
   "resources/scss/watch.scss": {
-    "file": "assets/watch-D6zQQVIa.css",
+    "file": "assets/watch-DqwsOmtD.css",
     "src": "resources/scss/watch.scss",
     "isEntry": true
   }
diff --git a/resources/scss/watch.scss b/resources/scss/watch.scss
index faa85d7..9d29e6d 100644
--- a/resources/scss/watch.scss
+++ b/resources/scss/watch.scss
@@ -1,24 +1,32 @@
 
 
-picture:after {
+picture {
     position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-    bottom: -6px;
-    width: 100%;
-    box-shadow: inset 1px 0 105px 105px #0d0d31;
-    background: linear-gradient(to bottom, #0d0d3105, #0d0d31);
-    background-color: #0d0d3188;
-    position: absolute;
-}
-picture > img {
-    object-fit: cover;
-    object-position: top;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
+    width:100%;
+    top:0;
+    min-height:720px;
 
+    &:after {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+        bottom: -6px;
+        width: 100%;
+        box-shadow: inset 1px 0 105px 105px #0d0d31;
+        background: linear-gradient(to bottom, #0d0d3105, #0d0d31);
+        background-color: #0d0d3188;
+        position: absolute;
+    }
+    & > img {
+        object-fit: cover;
+        object-position: top;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+
+    }
 }
 
+
diff --git a/resources/views/components/nav.blade.php b/resources/views/components/nav.blade.php
index fa59dba..92758fc 100644
--- a/resources/views/components/nav.blade.php
+++ b/resources/views/components/nav.blade.php
@@ -2,7 +2,10 @@
     <div class="header__bottom">
         <div class="container-fluid p-0">
             <nav class="navbar navbar-expand-xl align-items-center p-0">
-                <a class="site-logo site-title"  href="{{route('home')}}"><img width="150" heigh="38" src="{{asset('images/logo.svg')}}" alt="site-logo"><span class="logo-icon"><i class="flaticon-fire"></i></span></a>
+                <a class="site-logo site-title"  href="{{route('home')}}">
+                    <img src="{{asset('images/logo.svg')}}" width="150" height="37" alt="site-logo">
+                    <span class="logo-icon"><i class="flaticon-fire"></i></span>
+                </a>
                 <button class="navbar-toggler ml-auto" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="menu-toggle"></span>
                 </button>
@@ -20,7 +23,7 @@
                                 @endforeach
                             </ul>
                         </li>
-                        
+
                     </ul>
                     <div class="nav-right d-flex ml-auto flex-wrap gap-4">
                         <button class="nav-right__search-btn"><i class="fas fa-search"></i></button>
diff --git a/resources/views/layouts/layout.blade.php b/resources/views/layouts/layout.blade.php
index 72fde6b..115e1a6 100644
--- a/resources/views/layouts/layout.blade.php
+++ b/resources/views/layouts/layout.blade.php
@@ -36,7 +36,7 @@
     {!! Vite::content('resources/scss/fa.scss') !!}
     {!! Vite::content('resources/scss/la.scss') !!}
     </style>
-    @vite(['resources/js/img.js'])
+    {{-- @vite(['resources/js/img.js']) --}}
     {{-- <link rel="preload" as="script" href="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> --}}
     @vite(['resources/scss/app.scss'])
@@ -83,9 +83,9 @@
         {!! Vite::content('resources/js/img.js')!!}
     </script> --}}
     {{-- <script type='text/javascript' src='https://code.jquery.com/jquery-3.7.1.min.js'></script> --}}
-    <link rel="preload" as="script" href="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
+    {{-- <link rel="preload" as="script" href="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> --}}
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    {{-- @vite(['resources/js/img.js'])--}}
+    @vite(['resources/js/img.js'])
     {{-- @vite(['resources/js/jqfix.js']) --}}
     @vite(['resources/js/app.js'])
     @yield('footer')
diff --git a/resources/views/movie.blade.php b/resources/views/movie.blade.php
index 557d226..5d26eae 100644
--- a/resources/views/movie.blade.php
+++ b/resources/views/movie.blade.php
@@ -8,7 +8,7 @@
 {{-- <link rel="preload" as="image" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" type="image/webp" media="(max-width: 575px)"> --}}
 {{-- <link rel="preload" as="image" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" type="image/webp" media="(max-width: 575px)"> --}}
 {{-- <link rel="preload" as="image" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" type="image/webp" media="(max-width: 575px)"> --}}
-<link rel="preload" as="image" type="image/webp" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" imagesrcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w" imagesizes="100vw" />
+<link rel="preload" as="image" type="image/webp" href="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}" imagesrcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 400w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1280w" imagesizes="80vw, 100vw" fetchpriority="high" />
 <style>
     {!! Vite::content('resources/scss/watch.scss') !!}
 </style>
@@ -19,11 +19,12 @@
 {{-- @endsection --}}
 @section('app')
 <section class="inner-hero bg_img dark--overlay lazy main-watch" data-id="{{ $movie['id'] }}" data-type="movie">
-    <picture style="position: absolute; width:100%;  top:0; min-height:720px">
-        @if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
-        <source type="image/webp" data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w">
-        @endif
-        <img  @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}" @endif width="100%" height="720" class="lazy" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E"  sizes="100vw">
+    <picture>
+        {{-- @if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
+        <source type="image/webp" media="(max-width:767px)" data-src="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}">
+        <source type="image/webp" media="(min-width:768px)" data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}">
+        @endif --}}
+        <img  @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}}"  data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 400w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1280w"  class="lazy" @endif width="100%" height="720" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" data-sizes="80vw, 100vw">
     </picture>
     <div class="container position-relative">
         <div class="row">