website/layouts/videos/list.html

{{ define "main" }}
{{- partial "openSource.html" . -}}
{{ $data := index .Site.Data .Site.Language.Lang }}
<section class='section-1'>
    <div class="common-layout">
        <ul class='video-tab-ul'>
            <li class='active'>{{ .Params.tip }}</li>
            {{ $groups := slice }}
            {{ range $data.video }}
            {{ $group := split .group ","}}
            {{ $groups = $groups | append $group }}
            {{ end }}
            {{ range ($groups | uniq) }}
            <li data-group='{{ . }}'>{{ . }}</li>
            {{ end }}
        </ul>
        <ul class='video-ul' data-language='{{ .Site.Language.Lang }}' data-origin='{{ $data.video | jsonify }}'>
        </ul>
        <div id='pagination'></div>
    </div>
</section>

<div id="modal-for-video" class="modal">
    <div class='video-div'>
        <video src="" controls autoplay></video>
        <iframe 
            id='iframe-player'
            title="video"
            src="" 
            width="750" 
            height="420" 
            frameborder="0" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
        </iframe>
    </div>
</div>

<script src='{{ "js/pagination.min.js" | relURL }}'></script>

<script>
    var bindClickVideoTabLi = function() {
        var tabLi = $('.video-tab-ul > li')
        tabLi.click(function() {
            tabLi.removeClass('active')
            var group = $(this).data('group')
            $(this).addClass('active')
            var videos =  $('.video-ul').data('origin')
            if (group) {
                videos = videos.filter(function(video) {
                    return video.group === group
                })
            }
            initPagination(videos)
        })
    }

    var bindClickVideoLi = function() {
        $('.video-ul').on('click', 'li', function(ev) {
            var link = $(this).data('link')
            var language = $('.video-ul').data('language')
            if (language === 'zh') {
                const isBiliBili = link.includes('player.bilibili.com')
                // due to the browser's cookie policy, bilibili website cant be used in iframe
                if(isBiliBili){
                    window.open(link)
                }else{
                    showVideo(link)
                }
            } else if (language === 'en') {
                showIframe(link)
            }
        })
    }

    var initModal = function() {
        $('#modal-for-video').on($.modal.BEFORE_CLOSE, function(event, modal) {
            $('#modal-for-video video')[0].pause()
            var src = $("#iframe-player").attr('src')
            // 去掉自动播放
            var iframe = $("#iframe-player").attr('src', src.slice(0, -11));
        });
    }

    var showIframe = function(link) {
        $('#modal-for-video video').hide()
        $('#modal-for-video iframe').attr({src: link})
        $('#modal-for-video').modal()
    }

    var showVideo = function(link) {
        $('#modal-for-video iframe').hide()
        $('#modal-for-video video').attr({src: link})
        $('#modal-for-video').modal()
    }

    var createVideoList = function(videos) {
        var result = ''
        for (var i = 0; i < videos.length; i++) {
            var video = videos[i]
            var s = createVideoLi(video)
            result += s
        }
        return result
    }

    var createVideoLi = function(video) {
        var img = '<img src="' + video.snapshot + '" alt="background image">'
        var button = '<img class="btn" src="/images/videos/play.svg" alt="play button">'
        var title = '<h3>' + video.title + '</h3>'
        var group = '<p>' + video.group + '</p>'
        var time = '<p class="time">' + video.createTime + '</p>'
        var div = '<div>' + button + '<div>' + title + group + time + '</div></div>' 
        var s = '<li data-link="' + video.link + '">' + img + div + '</li>'
        return s
    }

    var initPagination = function(dataSource) {
        $('#pagination').pagination({
            dataSource: dataSource,
            pageSize: 12,
            prevText: '<<',
            nextText: '>>',
            callback: function(data, pagination) {
                var videoList =createVideoList(data)
                $('.video-ul').empty().append(videoList)
            }
        })
    }

    var initVideos = function() {
        var videos =  $('.video-ul').data('origin')
        initPagination(videos)
    }

    bindClickVideoTabLi()
    bindClickVideoLi()
    initVideos()
    initModal()
</script>
{{ end }}