update

Author: YousefMohamd

js/site.js

@@ -1,43 +1,118 @@
 // Showreel slider
+
 (function() {
+
   const container = document.getElementById('showreel');
+
   if (!container) return;
 
+
   const slides = Array.from(container.querySelectorAll('.slide'));
+
   if (slides.length === 0) return;
 
+
   let currentIndex = 0;
 
-  // Show first slide immediately
+
+// إظهار أول شريحة فوراً
+
   slides[0].classList.add('active');
-  
-  // Preload first video if exists
+
+
+// تشغيل أول فيديو لو موجود
+
   const firstVideo = slides[0].querySelector('video');
+
   if (firstVideo) {
-    firstVideo.load();
+
     firstVideo.play().catch(() => {});
+
   }
 
+
   function showSlide(index) {
+
     slides.forEach((s, i) => {
+
       s.classList.toggle('active', i === index);
+
       const video = s.querySelector('video');
+
+
       if (video) {
+
         if (i === index) {
+
+// تشغيل الفيديو للشريحة النشطة فقط
+
           video.currentTime = 0;
+
           video.play().catch(() => {});
+
         } else {
+
+// إيقاف الفيديوهات في الشرائح المخفية لتوفير الأداء
+
           video.pause();
+
         }
+
       }
+
     });
+
   }
 
+
   function nextSlide() {
+
     currentIndex = (currentIndex + 1) % slides.length;
+
     showSlide(currentIndex);
+
   }
 
-  // Start rotation after 5 seconds
+
+// تغيير الشريحة كل 5 ثواني
+
   setInterval(nextSlide, 5000);
+
 })();
+
+
+// Facade Pattern for Vimeo videos
+
+document.addEventListener("DOMContentLoaded", function () {
+
+  const videoWrappers = document.querySelectorAll(".video-wrapper");
+
+
+  videoWrappers.forEach((wrapper) => {
+
+    const playButton = wrapper.querySelector(".facade-play-btn");
+
+    const iframe = wrapper.querySelector("iframe");
+
+
+    if (playButton) {
+
+      playButton.addEventListener("click", function () {
+
+        playButton.style.display = "none"; // إخفاء الزر
+
+        if (iframe) {
+
+          iframe.src = iframe.dataset.src; // تعيين src للإطار
+
+        }
+
+        wrapper.style.cursor = "default";
+
+      });
+
+    }
+
+  });
+
+})

projects/short-film-projects.njk

@@ -1,33 +1,33 @@
 ---
-layout: layouts/home.njk
+layout: layouts/base.njk
 title: Short Film Projects
 ---
 
 <div class="w3-padding-64 w3-content">
   <h2 class="w3-text-light-grey">Short Film Projects</h2>
-  <!-- <hr style="width:200px" class="w3-opacity"> -->
 
-  {# بنمشي على كل المشاريع المعلّمة tag "project" ونعكس الترتيب عشان الأحدث يظهر الأول #}
   {% for p in (collections.project or []) | reverse %}
     {% if (p.data.section or '').toLowerCase() == 'short film projects' %}
       <div class="film-project w3-margin-bottom">
-
         <h3 class="w3-text-light-grey" style="margin:18px 0 8px;">{{ p.data.title }}</h3>
 
         {% if p.data.vimeoId %}
-          <div class="video-wrapper" style="margin:12px 0;">
+          <div class="video-wrapper" style="aspect-ratio: 16 / 9; width: 100%; background-image: url('https://vumbnail.com/{{ p.data.vimeoId }}.jpg'); background-size: cover; background-position: center; cursor: pointer; position: relative;">
+            <button class="facade-play-btn" type="button" aria-label="Play video">
+              <svg viewBox="0 0 24 24" width="40" height="40" aria-hidden="true">
+                <path d="M8 5.2v13.6L19 12z" fill="currentColor"/>
+              </svg>
+            </button>
             <iframe
-              class="lazyload"
-              data-src="https://player.vimeo.com/video/{{ p.data.vimeoId }}?background=1&autoplay=1&loop=1&muted=1"
-              width="100%" height="420" frameborder="0"
-              loading="lazy"
+              data-src="https://player.vimeo.com/video/{{ p.data.vimeoId }}?autoplay=1&color=ffffff&title=0&byline=0&portrait=0"
+              width="100%" height="100%" frameborder="0"
+              class="lazy-vimeo"
               allow="autoplay; fullscreen; picture-in-picture"
               allowfullscreen>
             </iframe>
           </div>
         {% endif %}
 
-        {# لو محتوى الصفحة فيه تفاصيل نصية (التاريخ/الأدوات/ملاحظات) هتظهر هنا #}
         {% if p.templateContent %}
           <div class="w3-text-grey" style="line-height:1.7;">
             {{ p.templateContent | safe }}
@@ -39,3 +39,32 @@ title: Short Film Projects
     {% endif %}
   {% endfor %}
 </div>
+
+<style>
+.facade-play-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70px;
+  height: 70px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 2;
+  border: none;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.facade-play-btn:hover {
+  transform: translate(-50%, -50%) scale(1.15);
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.facade-play-btn svg {
+  fill: #fff;
+}
+</style>