Merge pull request #10 from atharv-naik/dev

Add Open Graph and Twitter Card meta tags for better social media sharing

play/api/urls.py

@@ -9,4 +9,6 @@
     path('get-watch-history/<str:user>', views.getWatchHistory, name='get-watch-history'),
     path('update-views/', views.updateViews, name='update-views'),
     path('logo/', views.logo, name='logo'),
+    path('get-video-thumbnail/<str:video_id>', views.getVideoThumbnail, name='get-video-thumbnail'),
+    path('get-channel-banner/<str:channel_id>', views.getChannelBanner, name='get-channel-banner'),
 ]

play/api/views.py

@@ -1,6 +1,6 @@
 from rest_framework.decorators import api_view, authentication_classes
 from rest_framework.response import Response
-from play.models import Video, History
+from play.models import Video, History, Channel
 from django.http import FileResponse
 from .serializers import HistorySerializer
 from django.contrib.auth.models import User
@@ -42,6 +42,17 @@ def getVideoStream(request, video_id, file):
     return response
 
 
+@api_view(['GET'])
+def getVideoThumbnail(request, video_id):
+    video = Video.objects.get(video_id=video_id)
+    try:
+        file = open(video.thumbnail.path, 'rb')
+    except:
+        file = open('play/static/play/images/PlayTube.png', 'rb')
+    response = FileResponse(file)
+    return response
+
+
 @api_view(['GET'])
 def getPreviewThumbnails(request, video_id, number):
     video = Video.objects.get(video_id=video_id)
@@ -56,6 +67,17 @@ def getPreviewThumbnails(request, video_id, number):
     return response
 
 
+@api_view(['GET'])
+def getChannelBanner(request, channel_id):
+    channel = Channel.objects.get(channel_id=channel_id)
+    try:
+        file = open(channel.banner.path, 'rb')
+    except:
+        file = open('play/static/play/images/PlayTube.png', 'rb')
+    response = FileResponse(file)
+    return response
+
+
 @api_view(['GET'])
 @authentication_classes([SessionAuthentication, BasicAuthentication])
 def getWatchHistory(request, user):

play/templates/play/base.html

@@ -5,6 +5,35 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Open Graph meta tags for social media sharing -->
+    {% block open_graph %}
+    <meta property="og:title" content="PlayTube - Home">
+    <meta property="og:description" content="PlayTube is a video sharing platform where users can upload their own videos and watch videos from other users.">
+    <meta property="og:image" content="{{ http_protocol }}://{{ domain_name }}/api/logo" />
+    <meta property="og:url" content="{{ http_protocol }}://{{ domain_name }}{% url 'play:home' %}">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="PlayTube">
+    <meta property="og:locale" content="en_US">
+    {% endblock %}
+
+    <!-- Twitter Card meta tags for social media sharing -->
+    {% block twitter_card %}
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@atharvnaik">
+    <meta name="twitter:creator" content="@atharvnaik">
+    <meta name="twitter:title" content="PlayTube - Home">
+    <meta name="twitter:description" content="PlayTube is a video sharing platform where users can upload their own videos and watch videos from other users.">
+    <meta name="twitter:image" content="{{ http_protocol }}://{{ domain_name }}/api/logo">
+    {% endblock %}
+
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="PlayTube is a video sharing platform where users can upload their own videos and watch videos from other users." />
+    <meta name="keywords" content="playtube, video sharing, video platform, youtube, vimeo, dailymotion, video, watch, upload, share" />
+    <meta name="author" content="Atharv Naik" />
+
+    <title>{% block title %}{% endblock %}</title>
+
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
@@ -32,7 +61,6 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
 
-    <title>{% block title %}{% endblock %}</title>
 
     {% block html_head %}{% endblock %} {% block css %}{% endblock %}
   </head>

play/templates/play/login_register.html

@@ -1,7 +1,21 @@
 {% extends 'play/base.html' %}
 {% load static %}
 
-{% block content %}
+{% block title %} Login - PlayTube {% endblock %}
+
+{% block open_graph %}
+    <meta property="og:title" content="Login - PlayTube" />
+    <meta property="og:description" content="Login to PlayTube to access your account." />
+    <meta property="og:image" content="{{ http_protocol }}://{{ domain_name }}/api/logo" />
+{% endblock %}
+
+{% block twitter_card %}
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@playtube" />
+    <meta name="twitter:title" content="Login - PlayTube" />
+    <meta name="twitter:description" content="Login to PlayTube to access your account." />
+    <meta name="twitter:image" content="{{ http_protocol }}://{{ domain_name }}/api/logo" />
+{% endblock %}
 
 {% block css %}
 <style>
@@ -12,6 +26,8 @@
 </style>
 {% endblock %}
 
+{% block content %}
+
 <div class="login-form">
     <form method="POST" action="{% url 'play:login' %}">
         <input type="hidden" name="next" value="{{ request.GET.next }}" />

play/templates/play/profile.html

@@ -3,6 +3,20 @@
 
 {% block title %}{{ channel.user.first_name }} {{ channel.user.last_name }} - PlayTube{% endblock %}
 
+{% block open_graph %}
+    <meta property="og:title" content="{{ channel.user.first_name }} {{ channel.user.last_name }} - PlayTube">
+    <meta property="og:description" content="PlayTube channel of {{ channel.user.first_name }} {{ channel.user.last_name }}">
+    <meta property="og:image" content="{{ http_protocol }}://{{ domain_name }}/api/get-channel-banner/{{ channel.channel_id }}">
+    <meta property="og:url" content="{{ request.build_absolute_uri }}">
+{% endblock %}
+
+{% block twitter_card %}
+    <meta name="twitter:title" content="{{ channel.user.first_name }} {{ channel.user.last_name }} - PlayTube">
+    <meta name="twitter:description" content="PlayTube channel of {{ channel.user.first_name }} {{ channel.user.last_name }}">
+    <meta name="twitter:image" content="{{ http_protocol }}://{{ domain_name }}/api/get-channel-banner/{{ channel.channel_id }}">
+    <meta name="twitter:card" content="summary_large_image">
+{% endblock %}
+
 {% block css %}
     <link rel="stylesheet" href="{% static 'play/styles/profile.css' %}">
 {% endblock %}

play/templates/play/upload.html

@@ -6,6 +6,20 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
 {% endblock %}
 
+{% block open_graph %}
+    <meta property="og:title" content="Upload Video - PlayTube" />
+    <meta property="og:description" content="Upload your video to PlayTube" />
+    <meta property="og:image" content="{{ http_protocol }}://{{ domain_name }}/api/logo" />
+{% endblock %}
+
+{% block twitter_card %}
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@playtube" />
+    <meta name="twitter:title" content="Upload Video" />
+    <meta name="twitter:description" content="Upload your video to PlayTube" />
+    <meta name="twitter:image" content="{{ http_protocol }}://{{ domain_name }}/api/logo" />
+{% endblock %}
+
 {% block title %}Upload Video{% endblock %}
 
 {% block content %}

play/templates/play/watch.html

@@ -2,6 +2,27 @@
 {% load custom_filters %}
 {% load static %} 
 {% block title %} {{ movie.title }} {% endblock %} 
+
+{% block open_graph %} 
+<meta property="og:site_name" content="PlayTube" />
+<meta property="og:url" content="{{ http_protocol }}://{{ domain_name }}{{ request.path }}?v={{ video_id }}" />
+<meta property="og:title" content="{{ movie.title }}" />
+<meta property="og:description" content="{{ movie.description|linebreaks|truncatechars:50|safe }}" />
+<meta property="og:image" content="{{ http_protocol }}://{{ domain_name }}/api/get-video-thumbnail/{{ video_id }}" />
+<meta property="og:image:width" content="1920" />
+<meta property="og:image:height" content="1080" />
+<meta property="og:image:alt" content="{{ movie.title }}" />
+<meta property="og:type" content="video.other" />
+{% endblock %}
+
+{% block twitter_card %}
+<meta name="twitter:card" content="player" />
+<meta name="twitter:site" content="@playtube" />
+<meta name="twitter:title" content="{{ movie.title }}" />
+<meta name="twitter:description" content="{{ movie.description|linebreaks|truncatechars:50|safe }}" />
+<meta name="twitter:image" content="{{ http_protocol }}://{{ domain_name }}/api/get-video-thumbnail/{{ video_id }}" />
+{% endblock %}
+
 {% block css %}
 <link rel="stylesheet" href="{% static 'play/styles/watch.css' %}" />
 <link rel="stylesheet" href="{% static 'play/styles/slider.css' %}" />

play/views.py

@@ -27,7 +27,11 @@ def loginPage(request):
             return redirect('play:login')
 
     form = AuthenticationForm(request)
-    context = {'form': form}
+    context = {
+        'form': form,
+        'domain_name': settings.DOMAIN_NAME,
+        'http_protocol': 'https' if settings.USE_HTTPS else 'http'
+    }
     return render(request, 'play/login_register.html', context)
 
 
@@ -57,11 +61,19 @@ def home(request):
     else:
         return render(request, 'play/404.html', {'info': 'No videos found'}, status=404)
 
+
 @login_required
 def profile(request):
     channel = request.user.channel
     videos = Video.objects.filter(channel=channel)
-    return render(request, 'play/profile.html', {'channel': channel, 'videos': videos})
+    info = {
+        'channel': channel,
+        'videos': videos,
+        'domain_name': settings.DOMAIN_NAME,
+        'http_protocol': 'https' if settings.USE_HTTPS else 'http'
+    }
+    return render(request, 'play/profile.html', info)
+
 
 def results(request):
     query = request.GET.get('search_query')
@@ -98,7 +110,12 @@ def videoUpload(request):
         else:
             return JsonResponse({'success': False})
     form = VideoUploadForm()
-    return render(request, 'play/upload.html', {'form': form})
+    info = {
+        'form': form,
+        'domain_name': settings.DOMAIN_NAME,
+        'http_protocol': 'https' if settings.USE_HTTPS else 'http'
+    }
+    return render(request, 'play/upload.html', info)
 
 
 def watch(request):
@@ -153,7 +170,13 @@ def channel_via_handle(request, handle):
         info = {'info': 'Channel does not exist'}
         return render(request, 'play/404.html', info, status=404)
     videos = Video.objects.filter(channel=channel)
-    return render(request, 'play/profile.html', {'channel': channel, 'videos': videos})
+    info = {
+        'channel': channel,
+        'videos': videos,
+        'domain_name': settings.DOMAIN_NAME,
+        'http_protocol': 'https' if settings.USE_HTTPS else 'http'
+    }
+    return render(request, 'play/profile.html', info)
 
 
 def channel_via_id(request, channel_id):
@@ -164,7 +187,13 @@ def channel_via_id(request, channel_id):
         info = {'info': 'Channel does not exist'}
         return render(request, 'play/404.html', info, status=404)
     videos = Video.objects.filter(channel=channel)
-    return render(request, 'play/profile.html', {'channel': channel, 'videos': videos})
+    info = {
+        'channel': channel,
+        'videos': videos,
+        'domain_name': settings.DOMAIN_NAME,
+        'http_protocol': 'https' if settings.USE_HTTPS else 'http'
+    }
+    return render(request, 'play/profile.html', info)
 
 
 @login_required(login_url='play:login')