reimagining the video player in theater mode, #98

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)">

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">

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">

tubearchivist/static/css/style.css

@@ -331,38 +331,30 @@ button:hover {
 
 
 /* video player */
-.video-player {
+.player-wrapper {
-    position: relative;
+    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 */

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);
+    // video title
-    // title
+    var videoTitleLink = document.createElement('a');
-    var videoTitle = document.createElement('p');
+    videoTitleLink.setAttribute('href', '/video/' + dataId + '/');
+    var videoTitle = document.createElement('h2');
     videoTitle.innerText = mediaTitle;
-    titleBar.appendChild(videoTitle);
+    videoTitleLink.appendChild(videoTitle);
-    var videoChannel = document.createElement('p');
+    titleBar.appendChild(videoTitleLink);
-    videoChannel.innerText = mediaChannel
+    // channel title
-    titleBar.appendChild(videoChannel);
+    var channelTitleLink = document.createElement('a');
-    // button
+    channelTitleLink.setAttribute('href', '/channel/' + mediaChannelId + '/');
-    var videoButton = document.createElement('button');
+    var channelTitle = document.createElement('h3');
-    videoButton.innerText = 'Details';
+    channelTitle.innerText = mediaChannel;
-    videoButton.setAttribute('onclick', "window.location.href='/video/" + dataId + "/';");
+    channelTitleLink.appendChild(channelTitle);
-    titleBar.appendChild(videoButton);
+    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 = '';