From 861ee5ca5df4e91b7c1461d8b87835dd8984ed10 Mon Sep 17 00:00:00 2001
From: CHANDRU U <sanjeevchandru1234@gmail.com>
Date: Tue, 27 Feb 2024 13:34:29 +0530
Subject: [PATCH] feat: display  full screen

---
 assets/js/main.js | 34 +++++++++++++++++++++++++++++++++-
 index.html        |  2 +-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index f811bef..7933446 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -11,7 +11,7 @@ function getThumbnail() {
     if (videoId) {
       let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
       console.log(thumbnailUrl);
-      youtubeThumbnailEl.innerHTML = '<img src="' + thumbnailUrl + '">';
+      youtubeThumbnailEl.innerHTML = '<img class="w-[100%]" src="' + thumbnailUrl + '">';
     } else {
       alert('Invalid YouTube Link');
     }
@@ -25,4 +25,36 @@ function getThumbnail() {
     } else {
       return null;
     }
+  }
+
+  youtubeThumbnailEl.addEventListener('click', () => {
+    if (document.youtubeThumbnailEl) {
+      exitFullscreen();
+    } else {
+      enterFullscreen(youtubeThumbnailEl);
+    }
+  });
+  
+  function enterFullscreen(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) { /* Firefox */
+      element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+      element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) { /* IE/Edge */
+      element.msRequestFullscreen();
+    }
+  }
+  
+  function exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) { /* Firefox */
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) { /* IE/Edge */
+      document.msExitFullscreen();
+    }
   }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6923759..ae2cbf1 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@ <h1 class="text-2xl font-semibold">YoutubeThumbGrab</h1>
        <button class="w-full mt-3 py-2 bg-[#720455] rounded font-medium hover:bg-[#61084a]">Grab the thumbnail</button>
        <div class="mt-5 rounded" id="youtubeThumbnail"></div>
       </div>
-
+      <div class="text-center text-white font-semibold text-2xl mt-5">Click on image to display full screen</div>
     <script type="module" src="/assets/js/main.js"></script>
   </body>
 </html>