website/layouts/live/list.html

{{ define "main" }}

{{ with .Params.section1 }}
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
  <div class="common-layout">
    <h1 class="title-h1">{{ .title }}</h1>
  </div>
</section>
{{ end }}

{{ with .Params.section2 }}
<section class='section-2'>
  <div class="common-layout">
      <div class="live-2-left">
          <a href="{{ .url }}">
            <img src="{{ .image }}" alt="">
            <button>{{ i18n "Wonderful review" }}</button>
          </a>
      </div>
      <div class="live-2-right">
            {{ with .notice }}
            <div class='notice shadow'>
                <h2 title="{{ .title }}">{{ .title }}</h2>
                <p><img src="{{ .timeIcon }}" alt="">{{ .time }}</p>
                <p><img src="{{ .baseIcon }}" alt="">{{ .base }}</p>
                <a class="btn-a" href="{{ .url }}">{{ i18n "View details" }}</a>
                <div class="tag">{{ .tag }}</div>
            </div>
            {{ end }}
            {{ with .over }}
            <div class='over shadow'>
                <h2 title="{{ .title }}">
                    <a href="{{ .url }}">{{ .title }}</a>
                </h2>
                <div class="tag">{{ .tag }}</div>
            </div>
            {{ end }}
      </div>
  </div>
</section>
{{ end }}

{{ $language := .Site.Language.Lang }}
{{ with .Params.section3 }}
<section class='section-3'>
    <div class="common-layout">
        <ul class='video-tab-ul'>
            <li class='active'>{{ i18n "ALL" }}</li>
            {{ $groups := slice }}
            {{ range .videos }}
            {{ $group := split .group ","}}
            {{ $groups = $groups | append $group }}
            {{ end }}
            {{ range ($groups | uniq) }}
            <li data-group='{{ . }}'>{{ . }}</li>
            {{ end }}
        </ul>
        <ul class='video-ul' data-language='{{ $language }}' data-origin='{{ .videos | jsonify }}'>
        </ul>
        <div id='pagination'></div>
    </div>
</section>
{{ end }}

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

{{ $overImg := .Params.section4.overImg}}
{{ $noticeImg := .Params.section4.noticeImg}}
{{ with .Params.section4 }}
<section class='section-4'>
    <div class="common-layout">
        {{ range .list }}
        <div>
            <div class="time-div">
                {{$over := (time .lastTime).Unix}}
                {{ if ge now.Unix $over}}
                    <img src="{{ $overImg }}" alt="">
                {{ else }}
                    <img src="{{ $noticeImg }}" alt="">
                {{ end }}
                <div class="right">
                    <p class="date">{{ .date }}</p>
                    <p class="time">{{ .time }}</p>
                </div>
            </div>
            <h3><a href="{{ .url }}">{{ .title }}</a></h3>
            {{ if ge now.Unix $over}}
                <a href="{{ .url }}"><button class="over-btn">{{ i18n "Watch replay" }}</button></a>
            {{ else }}
                <a href="{{ .url }}"><button class="notice-btn">{{ i18n "View details" }}</button></a>
            {{ end }}
        </div>
        {{ end }}
    </div>
</section>
{{ end }}

{{ with .Params.section5 }}
<section class='section-5'>
    <div class="common-layout">
        <div class="left-div">
            <h2>{{ .title }}</h2>
            <p>{{ .content }}</p>
            <a class="btn-a" href="{{ .url }}" target="_blank">{{ .btn }}</a>
        </div>
        <img src="{{ .image }}" alt="">
    </div>
</section>
{{ end }}

<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')
            window.open(link)
            // var type = $(this).data('type')
            // if (type === 'video') {
            //     showVideo(link)
            // } else if (type === 'iframe') {
            //     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').show().attr({src: link})
        $('#modal-for-video').modal()
    }

    var showVideo = function(link) {
        $('#modal-for-video iframe').hide()
        $('#modal-for-video video').show().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 + '" data-type="' + video.type + '">' + 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 }}