From 42eec604a77f0bd3bb78f70a878863c55056eac5 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Mon, 6 Dec 2021 22:14:42 +0700
Subject: [PATCH] reimagining the video player in theater mode, #98

---
 .../home/templates/home/channel_id.html       |  4 +-
 tubearchivist/home/templates/home/home.html   |  6 ++-
 .../home/templates/home/playlist_id.html      |  3 ++
 tubearchivist/static/css/style.css            | 43 +++++++++----------
 tubearchivist/static/script.js                | 38 +++++++++-------
 5 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html
index 33e673c..f814bae 100644
--- a/tubearchivist/home/templates/home/channel_id.html
+++ b/tubearchivist/home/templates/home/channel_id.html
@@ -68,7 +68,9 @@
         </div>
     {% endif %}
     <div id="notifications" data="channel_id"></div>
-    <div id="player" class="video-player"></div>
+</div>
+<div id="player" class="player-wrapper"></div>
+<div class="boxed-content">
     <div class="sort">
         <p>Sort by <span class="settings-current">{{ sort_by }}</span>
             <select name="sort" id="sort" onchange="sortChange(this.value)">
diff --git a/tubearchivist/home/templates/home/home.html b/tubearchivist/home/templates/home/home.html
index 178416c..707e3f8 100644
--- a/tubearchivist/home/templates/home/home.html
+++ b/tubearchivist/home/templates/home/home.html
@@ -58,12 +58,14 @@
             <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
         </div>
     </div>
-    <div id="player" class="video-player"></div>
+</div>
+<div id="player" class="player-wrapper"></div>
+<div class="boxed-content">
     <div class="video-list {{ view_style }}">
         {% if videos %}
             {% for video in videos %}
                 <div class="video-item {{ view_style }}">
-                    <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
+                    <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-channel-id="{{ video.source.channel.channel_id }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
                         <div class="video-thumb-wrap {{ view_style }}">
                             <div class="video-thumb">
                                 <img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html
index 2b0a4ab..bb9aac2 100644
--- a/tubearchivist/home/templates/home/playlist_id.html
+++ b/tubearchivist/home/templates/home/playlist_id.html
@@ -63,6 +63,9 @@
             </div>
         </div>
     {% endif %}
+</div>
+<div id="player" class="player-wrapper"></div>
+<div class="boxed-content">
     <div id="player" class="video-player"></div>
     <div class="view-controls">
         <div class="toggle">
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index be77369..afd95d4 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -331,38 +331,30 @@ button:hover {
 
 
 /* video player */
-.video-player {
-    position: relative;
+.player-wrapper {
+    background-color: var(--highlight-bg);
     margin: 20px 0;
 }
 
+.video-player {
+    display: grid;
+    align-content: space-evenly;
+    height: 100vh;
+}
+
 .video-player video {
-    max-height: 70vh;
+    max-height: 80vh;
+    width: 90%;
+    max-width: 1500px;
+    margin: 0 auto;
+    display: block;
 }
 
 .player-title img {
     width: 30px;
+    margin: 10px 10px 10px 0;
 }
 
-.player-title:hover {
-    opacity: 1;
-}
-
-.player-title {
-    opacity: 0;
-    background-color: var(--highlight-bg-transparent);
-    position: absolute;
-    top: 0;
-    z-index: 1;
-    width: 100%;
-    padding: 20px 0;
-}
-
-.player-title > * {
-    margin-left: 20px;
-}
-
-
 /* video list */
 .video-list.grid {
     display: grid;
@@ -970,6 +962,13 @@ button:hover {
         position: unset;
         transform: unset;
     }
+    .video-player {
+        height: unset;
+        padding: 20px 0
+    }
+    .video-player video {
+        width: 90%;
+    }
 }
 
 /* phone */
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index 1282aed..13f9309 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -287,13 +287,16 @@ function createPlayer(button) {
     var mediaThumb = button.getAttribute('data-thumb');
     var mediaTitle = button.getAttribute('data-title');
     var mediaChannel = button.getAttribute('data-channel');
+    var mediaChannelId = button.getAttribute('data-channel-id');
     var dataId = button.getAttribute('data-id');
     // get watched status
     var playedStatus = document.createDocumentFragment();
     playedStatus.appendChild(document.getElementById(dataId));
     // create player
     removePlayer();
-    var playerElement = document.getElementById('player');
+    var playerElement = document.createElement('div');
+    playerElement.classList.add("video-player");
+    // var playerElement = document.getElementById('player');
     playerElement.setAttribute('data-id', dataId);
     // playerElement.innerHTML = '';
     var videoPlayer = document.createElement('video');
@@ -306,7 +309,7 @@ function createPlayer(button) {
     playerElement.appendChild(videoPlayer);
     // title bar
     var titleBar = document.createElement('div');
-    titleBar.className = 'player-title';
+    titleBar.classList.add('player-title', 'boxed-content');
     // close
     var closeButton = document.createElement('img');
     closeButton.className = 'close-button';
@@ -318,25 +321,30 @@ function createPlayer(button) {
     titleBar.appendChild(closeButton);
     // played
     titleBar.appendChild(playedStatus);
-    playerElement.appendChild(titleBar);
-    // title
-    var videoTitle = document.createElement('p');
+    // video title
+    var videoTitleLink = document.createElement('a');
+    videoTitleLink.setAttribute('href', '/video/' + dataId + '/');
+    var videoTitle = document.createElement('h2');
     videoTitle.innerText = mediaTitle;
-    titleBar.appendChild(videoTitle);
-    var videoChannel = document.createElement('p');
-    videoChannel.innerText = mediaChannel
-    titleBar.appendChild(videoChannel);
-    // button
-    var videoButton = document.createElement('button');
-    videoButton.innerText = 'Details';
-    videoButton.setAttribute('onclick', "window.location.href='/video/" + dataId + "/';");
-    titleBar.appendChild(videoButton);
+    videoTitleLink.appendChild(videoTitle);
+    titleBar.appendChild(videoTitleLink);
+    // channel title
+    var channelTitleLink = document.createElement('a');
+    channelTitleLink.setAttribute('href', '/channel/' + mediaChannelId + '/');
+    var channelTitle = document.createElement('h3');
+    channelTitle.innerText = mediaChannel;
+    channelTitleLink.appendChild(channelTitle);
+    titleBar.appendChild(channelTitleLink);
+    // add titlebar
+    playerElement.appendChild(titleBar);
+    // add whole
+    document.getElementById("player").appendChild(playerElement);
 }
 
 function removePlayer() {
     var playerElement = document.getElementById('player');
     if (playerElement.hasChildNodes()) {
-        var youtubeId = playerElement.getAttribute('data-id');
+        var youtubeId = playerElement.childNodes[0].getAttribute("data-id");
         var playedStatus = document.createDocumentFragment();
         playedStatus.appendChild(document.getElementById(youtubeId));
         playerElement.innerHTML = '';