Merge pull request #9 from atharv-naik/dev

Hover Play Video

.gitignore

@@ -18,7 +18,8 @@ __pycache__
 *2.css
 *2.js
 staticfiles
-COMMANDS.txt
+Commands.txt
+Deploy.sh
 
 # Django #
 *.log

play/api/views.py

@@ -34,7 +34,10 @@ def getVideoStream(request, video_id, file):
     video = Video.objects.get(video_id=video_id)
     video_path = video.video_file.path
     stream_path = os.path.join(os.path.dirname(video_path), file)
-    file = open(stream_path, 'rb')
+    try:
+        file = open(stream_path, 'rb')
+    except FileNotFoundError:
+        return Response(status=404)
     response = FileResponse(file)
     return response
 
@@ -45,7 +48,10 @@ def getPreviewThumbnails(request, video_id, number):
     video_path = video.video_file.path
     stream_path = os.path.join(os.path.dirname(
         video_path), 'preview_images', f'preview{number}.jpg')
-    file = open(stream_path, 'rb')
+    try:
+        file = open(stream_path, 'rb')
+    except FileNotFoundError:
+        return Response(status=404)
     response = FileResponse(file)
     return response
 

play/models.py

@@ -179,7 +179,7 @@ class History(models.Model):
 
     # calculate the percentage of the video watched before saving the history object
     def save(self, *args, **kwargs):
-        video_duration = self.video.get_duration()
+        video_duration = self.video.duration
         # create a new field in the history model to store the percentage of the video watched
         self.percentage_watched = (self.timestamp / video_duration) * 100
         super().save(*args, **kwargs)

play/signals.py

@@ -18,7 +18,10 @@ def create_channel(sender, instance, created, **kwargs):
 def delete_video(sender, instance, **kwargs):
     if instance.video_file:
         meta_data_root_path = os.path.dirname(instance.video_file.path)
-        shutil.rmtree(meta_data_root_path)
+        try:
+            shutil.rmtree(meta_data_root_path)
+        except FileNotFoundError:
+            pass
 
 @receiver(post_save, sender=Video)
 def set_video_duration(sender, instance, created, **kwargs):

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;

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;

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 %}

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'}