mmaker.moe/layouts/shortcodes/videolist.html

<p>
	<div class="videoplayer">
		<video controls>
			<source src="" type="video/mp4">
		</video>
	</div>
	<div class="videoplayer-title">Now playing: [no video selected]</div>
</p>

<div class="medialist medialistscroll">
	{{ range $index, $elem := sort $.Site.Data.videos.videos "date" "desc" }}
		{{ $srcLink := or $elem.link (printf "https://cdn.mmaker.moe/video/%s_%s.mp4" $elem.date $elem.videoid) }}
		{{ $srcThumb := or $elem.thumb (printf "https://cdn.mmaker.moe/video/thumbnail/%s_%s.jpg" $elem.date $elem.videoid) }}
		{{ partial "media_item" ( dict "srcLink" $srcLink "srcThumb" $srcThumb "title" $elem.title "date" $elem.date "type" $elem.type "videoid" $elem.videoid ) }}
	{{ end }}
</div>

<br />

<div class="videoplayer-description">Description</div>
<div class="videodescription">[no video selected]</div>

<script type="text/javascript">
    (function ()
    {
        const CDN_PATH = "https://cdn.mmaker.moe/video/";
        const COMMENTS_ENABLED = true;
        let videos = document.getElementsByClassName("mediaitem");
        let videoPlayer = document.getElementsByClassName("videoplayer")[0].children[0];
        let videoPlayerTitle = document.getElementsByClassName("videoplayer-title")[0];
        videoPlayer.volume = 0.25;
        
        function loadIssoThread(videoId, videoTitle)
        {
            if (!COMMENTS_ENABLED) return;
            
            let issoThread = document.getElementById("isso-thread");
            if (!issoThread) return;
            
            // Set both data-isso-id and data-title
            // The title prevents Isso from checking if the URI exists
            issoThread.setAttribute("data-isso-id", "/videos/" + videoId);
            issoThread.setAttribute("data-title", videoTitle);
            
            if (window.Isso) {
                window.Isso.fetchComments();
            }
        }
        
        function setVideo(url, videoId, videoTitle, videoDate)
        {
            setUrl(videoId);
            videoPlayer.src = url;
            videoPlayerTitle.textContent = "Now playing: " + videoTitle;
            getDesc(CDN_PATH + "description/" + videoDate + "_" + videoId + ".description");
            loadIssoThread(videoId, videoTitle);
        }
        
        function setUrl(videoId)
        {
            let url = new URL(window.location.href);
            url.searchParams.set('v', videoId);
            window.history.pushState(null, document.title, url.href);
        }
        
        function handleUrl()
        {
            let url = new URL(window.location);
            let v = url.searchParams.get("v");
            if (!v) return;
            
            let video = document.querySelector('[data-video-id="' + v + '"]');
            if (video != null)
            {
                let videoUrl = video.parentElement.href;
                let videoTitle = video.querySelector('.mediaitem-title').textContent;
                let videoDate = video.querySelector('.mediaitem-date').textContent;
                
                setUrl(v);
                videoPlayer.src = videoUrl;
                videoPlayerTitle.textContent = "Now playing: " + videoTitle;
                getDesc(CDN_PATH + "description/" + videoDate + "_" + v + ".description");
                
                let issoThread = document.getElementById("isso-thread");
                if (issoThread) {
                    issoThread.setAttribute("data-isso-id", "/videos/" + v);
                    issoThread.setAttribute("data-title", videoTitle);
                }
            }
        }
        
        function getDesc(url)
        {
            let videoDescription = document.getElementsByClassName("videodescription")[0];
            fetch(url)
            .then(response => {
                if (response.status === 403)
                {
                    return "[No description available]";
                }
                return response.text();
            })
            .then((data) => {
                videoDescription.textContent = data;
            })
            .catch((error) => {
                videoDescription.textContent = "[Error occurred when fetching description]";
            });
        }
        
        for (let video of videos)
        {
            let videoTitle = video.getElementsByClassName("mediaitem-title")[0].textContent;
            let videoDate = video.getElementsByClassName("mediaitem-date")[0].textContent;
            let videoThumbnail = video.getElementsByClassName("mediaitem-thumb")[0];
            let videoId = video.getAttribute("data-video-id");
            let videoType = video.getAttribute("data-video-type");
            let videoTypes = ["video", "ビデオ", "collab work"];
            video.addEventListener("click", function(evt)
            {
                if (!(videoTypes.indexOf(videoType) >= 0)) {
                    videoPlayer.pause();
                    return;
                } else {
                    evt.preventDefault();
                };
                videoUrl = video.parentElement.href;
                
                if (videoPlayer.src != videoUrl)
                {
                    setVideo(videoUrl, videoId, videoTitle, videoDate);
                }
            });
        }
        
        document.addEventListener('DOMContentLoaded', handleUrl);
    })();
</script>