#controllers/frontend/post.py
import config, json
from copy import deepcopy
from bottle import template
from models.postdb import getPostdb, random

def call(id):
    kdict = deepcopy(config.kdict)
    kdict['pageTitle'] = 'ទំព័រ​ការផ្សាយ'
    kdict['route'] = 'post'
    kdict['post'] = getPostdb.call(id)
    kdict['posts'] = random.call(5)

    return template('frontend/index', data=kdict)

#models/postdb/getdb.py
import setConnection

def call(id):
    mycol = setConnection.call("posts")

    post = mycol.find_one({"id": id})

    return post

#models/postdb/random.py
import setConnection

def call(amount):
    mycol = setConnection.call("posts")

    pipeline = [{"$sample":{"size": amount}}]
    results = mycol.aggregate(pipeline)
    posts = [post for post in results]

    return posts

<!--views/frontend/post.tpl-->

<link href="/static/styles/frontend_post.css" rel="stylesheet"></link>
<link href="/static/styles/partials/front_menu.css" rel="stylesheet"></link>
<script src='/static/scripts/setPlayer.js'></script>

<section class='Random-thumb region'>
    %if 'posts' in data:
    <div class='wrapper'>
    %for v in range(len(data['posts'])):
        <div class='thumb'>
            <a href='/post/{{data["posts"][v]["id"]}}'>
                <img src='{{data["posts"][v]["thumb"]}}' />
            </a> 
        </div>
    %end
    </div>

    <div class="reload">
        <a href='/'><img src="/static/images/left.png" /></a>
        <a href='/'><img src="/static/images/home.png" /></a>
        <a href='/'><img src="/static/images/right.png" /></a>
    </div>
    %end

    %if 'post' in data:
    <div class='player'>
        <div class='screen'>
            <div class='video-wrapper'>
                <iframe src="" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class='text-content'>{{!data['post']['content']}}</div>
            <div id="disqus_thread"></div>
            <script>
    
                var disqus_config = function () {
                    this.page.url = "https://khmerweb-multimedia.vercel.app/post/{{data['post']['id']}}";  
                    this.page.identifier = "{{data['post']['id']}}"; 
                };
    
                (function() { // DON'T EDIT BELOW THIS LINE
                    var d = document, s = d.createElement('script');
                    s.src = 'https://multimedia-9.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>
        </div>

        <script>
            var entries = JSON.parse('{{!data["post"]["entries"]}}')
        </script>

        <div class='playlist'>
            %import json
            %entries = json.loads(data['post']['entries'])
            %ending = ''
            %for v in range(len(entries)):
            %if v == len(entries)-1:
                %ending = entries[v]['ending']
            %end
            <div onclick='setScreen(entries[{{v}}],{{v}},true)'>
                <div id='part{{v}}' class='video-part'>
                    {{data['post']['title']}} ភាគ {{v+1}} {{ending}}
                </div>
            </div>
            %end
            <script>
                setScreen(entries[0],0,false)
            </script>
        </div>
    </div>
    %end
</section>

//asset/js/setPlayer.js

function setScreen(entry,id,click){
    if(entry['type'] == 'OK'){
        var url = `//ok.ru/videoembed/${entry['id']}`
    }

    if(click){
        $('.Random-thumb .player .playlist #part'+clicked)
            .css({'background':'lightgrey','color':'rgb(87, 87, 87)'})
    }
    $('.Random-thumb .player .playlist #part'+id)
        .css({'background':'var(--foreground)','color':'white'})
    $('.Random-thumb .player .screen iframe').attr('src', url)
    clicked = id
}

/*asset/css/frontend_post.css*/
.Random-thumb{
    background: white;
}

.Random-thumb .player{
    display: grid;
    grid-template-columns: 70% auto;
    grid-gap: 10px;
    padding: 15px;
}

.Random-thumb .player .screen .video-wrapper{
    position: relative;
    padding-top: 56.25%;
}

.Random-thumb .player .screen .video-wrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Random-thumb .player .screen .text-content{
    color: grey;
    padding-top: 10px;
}

.Random-thumb .player .playlist{
    height: 420px;
    overflow: auto;
}

.Random-thumb .player .playlist .video-part{
    background: lightgrey;
    color: rgb(87, 87, 87);
    font-weight: bold;
    padding: 10px;
    margin-bottom: 5px;
}

.Random-thumb .player .playlist div:hover{
    cursor: pointer;
    opacity: .8;
}

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

GitHub: https://github.com/Sokhavuth/khmerweb-multimedia

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

Responsive: https://khmerweb-multimedia.vercel.app/