# mysite/multimedia/views.py

from django.shortcuts import render
import json

from .models import Post
from .config import Config

def index(request):
    posts = Post.objects.all().filter(is_published='yes')

    Config.context['page_title'] = 'ទំព័រ​ដើម'
    Config.context['posts'] = posts
    Config.context['route'] = ''
    
    return render(request, 'base.html', Config.context)

def post(request, post_id):
    post = Post.objects.get(post_id=post_id)
    print(post)
    if post.video.values():
        result = post.video.values()      
        videos = [entry for entry in result]

        for entry in videos:
            entry.pop("created_at")

        videos = json.dumps(videos)
        Config.context['videos'] = videos
    else:
        Config.context['videos'] = False
    
    Config.context['page_title'] = 'ទំព័រ​​​​​​​​អត្ថបទ'
    Config.context['post'] = post
    Config.context['route'] = 'post'

    return render(request, 'base.html', Config.context)

<!--mysite/multimedia/templates/post.html-->

{% load static %}
<link rel="stylesheet" href="{% static 'styles/post.css' %}" />
<script src="{% static 'scripts/setPlayer.js' %}"></script>

<setion class="Post">
    <div class="main region">
        <div class="content">
            {% if post %}
            <div class="title">{{ post.title }}</div>
            <span class="category">
            {% for cat in post.category.all %}
                {{ cat }}, 
            {% endfor %}
            </span>
            <span class="date">
                <script>
                let date = new Date('{{ post.created_at }}').toLocaleDateString('it-IT')
                $('.Post .main .content .date').append(date)
                </script>
            </span>

            <div style="clear:both;padding-top:30px;"></div>

            {% if videos %}
                <div class="video">
                    <div class="screen"></div>
                    <div class="playlist"></div>
                </div>
                
                <script>
                    const videos = JSON.parse('{{ videos|safe }}')
                    
                    let clicked = 0
    
                    for(let index in videos){
                        let ending = ''
                        if(index == videos.length-1){
                            ending = videos[index].status
                        }

                        let title = videos[index].title
                        
                        let html = `<div id="part${index}" 
                                    class="part" onClick="setScreen(videos[${index}],${index},true)">
                                    {{ post.title }} ភាគ​ ${++index} ${ending}
                                    </div>`
                        $('.playlist').append(html)
                    }

                    setScreen(videos[0],0,false)
                </script>
            {% endif %}

            {% if post.content %}
            <div class="post-content">
                {{ post.content|safe }}
            </div>
            {% endif %}
            <div id="disqus_thread"></div>
            {% endif %}
        </div>
        <div class="sidebar">Sidebar</div>
    </div>
</setion>

<script>
    var disqus_config = function () {
    this.page.url = "https://khmerweb-mdjango.vercel.app/post/{ post.post_id }}";  
    this.page.identifier = "{{ post.post_id }}"; 
    };
    
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://django-multimedia.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">
    comments powered by Disqus.</a>
</noscript>

// mysite/multimedia/static/scripts/setPlayer.js

function setScreen(entry,id,click){
    if(entry['type'] == 'OK'){
        var url = `//ok.ru/videoembed/${entry['video_id']}`
    }else if(entry['type'] == 'YouTube'){
        var url = `https://www.youtube.com/embed/${entry['video_id']}`
    }else if(entry['type'] == 'YouTubePlaylist'){
        var url = `https://www.youtube.com/embed/videoseries?list=${entry['video_id']}`
    }else if(entry['type'] === "Facebook"){
        var url = `https://www.facebook.com/watch/?v=${entry['video_id']}`
    }else if(entry['type'] === "GoogleDrive"){
        var url = `https://docs.google.com/file/d/${entry['video_id']}/preview`
    }else if(entry['type'] === "Vimeo"){
        var url = `https://player.vimeo.com/video/${entry['video_id']}`
    }else if(entry['type'] === "Dailymotion"){
        var url = `https://www.dailymotion.com/embed/video/${entry['video_id']}`
    }

    if(entry['type'] !== 'Facebook'){
        var iframe = `<div>
        <iframe id="player" src="${url}" frameborder="0" allowfullscreen></iframe>
        </div>`;
      }else{
        var iframe = `<div class="fb-video" data-href="${url}" data-width="auto" data-show-captions="true"></div>`;
    }

    if(click){
        $('.Post .main .content .playlist #part'+clicked)
            .css({'background':'lightgrey','color':'rgb(71, 71, 71)'})
    }
    
    $('.Post .main .content .playlist #part'+id)
        .css({'background':'var(--background-dark)','color':'white'})


    $('.Post .main .content .video .screen').html(iframe)
    if((entry['type'] === "Facebook")&&(fb_api)){
        FB.XFBML.parse()
    }  

    clicked = id
}

/* mysite/multimedia/static/styles/post.css */

.Post .main{
    display: grid;
    grid-template-columns: 70% auto;
    grid-gap: 15px;
    padding-bottom: 30px;
}

.Post .main .content, .Post .main .sidebar{
    background-color: var(--widget-background);
    padding: 20px;
}

.Post .main .content .title{
    font: 25px/1.5 Oswald, Limonf3;
    padding-bottom: 20px;
}

.Post .main .content .date{
    float: right;
}

.Post .main .content .video{
    padding-bottom: 20px;
}

.Post .main .content .video .screen{
    position: relative;
    padding-top: 56.25%;
}

.Post .main .content .video .screen iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Post .main .content .video .playlist{
    max-height: 361px;
    overflow: auto;
}

.Post .main .content .video .playlist .part{
    padding: 10px;
    font: bold 16px/1.5 Courgette, HandWriting;
    background: lightgrey;
    border: 1px solid grey;
    border-top: none;
    color: rgb(71, 71, 71);
}

.Post .main .content .video .playlist .part:first-child{
    border-top: 1px solid grey;
}

.Post .main .content .video .playlist .part:hover{
    cursor: pointer;
    opacity: .7;
}

.Post .main .content .post-content img{
    max-width: 100%;
}

@media only screen and (max-width: 600px){
    .Post .main{
        grid-template-columns: 100%;
    }
}

GitHub: https://github.com/Sokhavuth/django_multimedia

Vercel: https://khmerweb-mdjango.vercel.app