TDH_2/themes/demo/pages/videos.htm

title = "Wideo"
url = "/videos"
layout = "default"
meta_title = "TDH"
meta_description = "Türkmenistanyň esasy we soňky habarlary. Wideo hasabat teg boýunça täzelikler."
is_hidden = 0

[viewBag]
localeTitle[ru] = "Видео"
localeTitle[en] = "Video"
localeUrl[ru] = "/videos"
localeUrl[en] = "/videos"
localeMeta_description[ru] = "Главные новости Туркменистана. Новости по тегу видеорепортаж."
localeMeta_description[en] = "Top news of Turkmenistan. News by tag Video Report"
==
<?php
function onStart(){
    $this['videos'] = Admin\Videos\Models\Video::orderBy('date','desc')->paginate(10);

    $this['lastNews'] = \Indikator\News\Models\Posts::where("locale", App::getLocale())
        ->where("status", 1)
        ->where("category_id", "!=", $this->theme->colleagues_news)
        ->whereNotIn('category_id', [20,21,22])
        ->orderBy('published_at', 'desc')
        ->limit(6)->get();
}
?>
==
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.3/plyr.css" />

<section class="section" id="intro">
    <div class="auto_container">
        <div class="which_page">
            <a href="{{ 'index'|page}}">

                <div class="page_name">
                    {{'Главная'|_}}
                </div>
            </a>
            <div class="slash">\</div>
            <div class="page_name">
                {{'Видеорепортаж'|_}}
            </div>
        </div>
        <div class="section_wrapper">
            <div class="center">
                <div class="title">
                    {{'Видеорепортаж'|_}}
                </div>
                <div class="gallery_outer">
                    {% for key,item in videos %}
                        <div class="gallery_item">
                            <div class="gallery_video"  data-src="{{item.video[0].path}}">
                                <img src="{{item.image[0].thumb(350, auto)}}" alt="">

                            </div>
                            <div class="player_bg">
                                <div class="player">
                                    <video class="player__video viewer">

                                    </video>

                                    <div class="player__controls">
                                        <div class="progress">
                                            <div class="progress__filled"></div>
                                        </div>
                                        <button class="player__button toggle playeer" title="Toggle Play">►</button>
                                        <div class="control_item">
                                            <img src="{{ 'assets/images/sound.svg'|theme }}" alt="" class="volume">
                                            <input type="range" name="volume" class="player__slider" min="0" max="1"
                                                step="0.05" value="1">
                                        </div>
                                        <button class="player__button fullscreen bigger" title="FullScreen">🞕</button>
                                    </div>
                                </div>
                            </div>

                            <div class="gallery_info">
                                <div class="photo_title">
                                   {{ item.title }}
                                </div>
                               <div class="photo_date">
                                   {{ item.date| date("d.m.Y") }}
                               </div>
                            </div>

                        </div>
                    {% endfor %}
                </div>

                {% if videos.total > 10 %}
                    <div class="section_end">
                        <div class="page_num">
                            <a href="{{videos.previousPageUrl}}">
                                <div class="direct_btn">
                                        <img src="{{ 'assets/images/left.svg'|theme }}" alt="">
                                </div>
                            </a>
                            <form action="" method="GET">
                                <input type="text" name="page" value="{{videos.currentPage}}" class="input_page">
                            </form>
                            <a href="{{videos.nextPageUrl}}">
                                <div class="direct_btn">
                                        <img src="{{ 'assets/images/right.svg'|theme }}" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="page_list">
                            {{(videos.total/videos.perPage)|round(0,"ceil")}} {{'страниц'|_}}
                        </div>
                    </div>

                {% endif %}
            </div>
            <div class="right_side break">
                <div class="title">
                    {{'Последние новости'|_}}
                </div>

                {% for item in lastNews %}
                    <div class="news_info">
                        <div class="left_date">
                            {{ item.published_at| date("d.m") }}
                        </div>
                        <div class="left_info">
                            <div class="left_title">
                                <!-- <a href="{{ url('/') }}/post/{{item.id}}/{{item.slug}}">{{item.category.name}}</a> -->
                                <a href="{{ 'post'|page ({id: item.id, slug: item.slug})}}">{{item.category.name}}</a>
                            </div>
                            <div class="news_text">
                                {{item.title}}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

<script src="https://cdn.plyr.io/3.6.3/plyr.polyfilled.js"></script>

<script>

    // Video Player
    const video = document.querySelector('.viewer');
    const toggle = document.querySelector('.toggle');
    const volume = document.querySelector('.volume');
    const skipButtons = document.querySelectorAll('[data-skip]');
    const ranges = document.querySelectorAll('.player__slider');
    const progress = document.querySelector('.progress');
    const progressBar = document.querySelector('.progress__filled');
    const fullscreen = document.querySelector('.fullscreen');


    // defining functions
    function togglePlay() {
        // toggle for video play and pause
        const playOrPause = video.paused ? 'play' : 'pause';
        video[playOrPause]();
        // toggle for icon change when play or pause
        playOrPause === 'play' ? toggle.textContent = '❚ ❚' : toggle.textContent = '►';
    }

    function skip() {
        // add or substract the skip time to current time of video
        video.currentTime += parseFloat(this.dataset.skip);
    }

    function handleRangeChange() {
        // Change the video's range value
        video[this.name] = this.value;
    }

    function handleProgress() {
        // convert video's current time into percentage
        const percent = (video.currentTime / video.duration) * 100;
        // append it to the flexBasis property (CSS)
        progressBar.style.flexBasis = `${percent}%`;
    }

    function scrub(e) {
        video.currentTime = (e.offsetX / progress.offsetWidth) * video.duration;
    }

    function handleFullScreen() {
        video.requestFullscreen();
    }

    // Play or Pause events(On video click)
    video.addEventListener('click', togglePlay);
    // 					   (On button click)
    toggle.addEventListener('click', togglePlay);

    // skipping video back and forth
    skipButtons.forEach(button => button.addEventListener('click', skip));

    // volume or fast forward events
    ranges.forEach(range => range.addEventListener('change', handleRangeChange));

    // Change progress wrt time
    video.addEventListener('timeupdate', handleProgress);

    // event on clicking progress bar
    let mouseDown = false;
    progress.addEventListener('click', scrub);
    progress.addEventListener('mousemove', (e) => mouseDown && scrub(e));
    progress.addEventListener('mousedown', () => mouseDown = true);
    progress.addEventListener('mouseup', () => mouseDown = false);

    // add full screen event
    fullscreen.addEventListener('click', handleFullScreen);

</script>