Add hover play functionality to video thumbnails

atharv-naik · Dec 12, 2023 · bdfcdd3 · bdfcdd3
1 parent fa473ec
commit bdfcdd3
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 5 deletions.
diff --git a/play/static/play/styles/history.css b/play/static/play/styles/history.css
@@ -96,6 +96,7 @@
     bottom: 0.25em;
     background-color: black;
     color: white;
+    width: -moz-fit-content;
     width: fit-content;
     padding: 0 0.2vw;
     margin-bottom: 0.4rem;

diff --git a/play/static/play/styles/home.css b/play/static/play/styles/home.css
@@ -60,6 +60,7 @@
     bottom: 5px;
     background-color: rgba(0, 0, 0, 0.85);
     color: white;
+    width: -moz-fit-content;
     width: fit-content;
     padding: 0.2em 0.35em;
     border-radius: 10%;
@@ -82,6 +83,15 @@
     border-radius: 3%;
 }
 
+.thumbnail-hover-play-video {
+    display: none;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 3%;
+}
+
 .video-card-bottom-section {
     display: flex;
     align-items: flex-start;

diff --git a/play/templates/play/home.html b/play/templates/play/home.html
@@ -26,9 +26,11 @@ <h1 class="banner-title">PlayTube</h1>
             {% for video in videos %}
             <!-- video card -->
             <div class="video-card">
-                <a class="thumbnail" target="_blank" href="{% url 'play:watch' %}?v={{ video.video_id }}&ab_channel={{ video.channel.channel_id }}" title="{{ video.title }}" data-duration="{{ video.duration|get_duration_stamp }}">
-                    <div class="thumbnail-img-wrapper">
+                <a class="thumbnail" target="_blank" href="{% url 'play:watch' %}?v={{ video.video_id }}&ab_channel={{ video.channel.channel_id }}" data-duration="{{ video.duration|get_duration_stamp }}">
+                    <div class="thumbnail-img-wrapper" onmouseenter="playVideo(this, '{{ video.video_id }}')" onmouseleave="stopVideo(this)">
                         <img src="https://source.unsplash.com/featured/{{ forloop.counter }}" alt="" class="thumbnail-img">
+
+                        <video class="thumbnail-hover-play-video" loop muted></video>
                     </div>
                 </a>
                 <div class="video-card-bottom-section">
@@ -130,13 +132,46 @@ <h1 class="banner-title">PlayTube</h1>
 {% endblock %}
 
 {% block scripts %}
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+
     <script>
+        const domain_name = "{{ domain_name }}";
+        const http_protocol = "{{ http_protocol }}";
+
+
         // show thumbnail only after image is loaded
         const thumbnails = document.querySelectorAll(".thumbnail-img");
             thumbnails.forEach((thumbnail) => {
             thumbnail.addEventListener("load", () => {
                 thumbnail.style.opacity = 1;
             });
         });
+
+        // play video on hover
+        function playVideo(container, video_id) {
+            const video = container.querySelector('.thumbnail-hover-play-video');
+            const image = container.querySelector('.thumbnail-img');
+            const source = `${http_protocol}://${domain_name}/api/get-video-stream/${video_id}/playlist.m3u8`;
+
+            video.style.display = 'block';
+            image.style.display = 'none';
+
+            const hls = new Hls();
+            hls.loadSource(source);
+            hls.attachMedia(video);
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+              video.play();
+            });
+        }
+
+        // stop video on hover
+        function stopVideo(container) {
+            const video = container.querySelector('.thumbnail-hover-play-video');
+            const image = container.querySelector('.thumbnail-img');
+
+            video.pause();
+            video.style.display = 'none';
+            image.style.display = 'block';
+        }
     </script>
 {% endblock %}
diff --git a/play/views.py b/play/views.py
@@ -48,8 +48,12 @@ def home(request):
         page_number = request.GET.get("page")
         page_obj = paginator.get_page(page_number)
 
-        videos = {'videos': page_obj}
-        return render(request, 'play/home.html', videos)
+        info = {
+            'videos': page_obj,
+            'domain_name': settings.DOMAIN_NAME,
+            'http_protocol': 'https' if settings.USE_HTTPS else 'http'
+        }
+        return render(request, 'play/home.html', info)
     else:
         return render(request, 'play/404.html', {'info': 'No videos found'}, status=404)
 
@@ -122,7 +126,16 @@ def watch(request):
             t = history.timestamp if t is 0 else t
             history.save()
 
-        return render(request, 'play/watch.html', {'video_id': video_id, 'channel_id': channel_id, 't': t, 'movie': video, 'channel': channel, 'domain_name': settings.DOMAIN_NAME, 'http_protocol': 'https' if settings.USE_HTTPS else 'http'})
+        info = {
+            'video_id': video_id,
+            'channel_id': channel_id,
+            't': t,
+            'movie': video,
+            'channel': channel,
+            'domain_name': settings.DOMAIN_NAME,
+            'http_protocol': 'https' if settings.USE_HTTPS else 'http'
+        }
+        return render(request, 'play/watch.html', info)
 
     except Channel.DoesNotExist:
         info = {'info': 'This video isn\'t available anymore'}