diff --git a/static/css/main.css b/static/css/main.css index bdb8df9..8bf58fe 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -27,4 +27,27 @@ } } -/* END LOADING SPINNER */ \ No newline at end of file +/* END LOADING SPINNER */ + +.transcodate-form-container { + margin-top: 20px; + display: flex; + flex-wrap: wrap; + flex-direction: row; + gap: 10px; +} + +.transcodate-form-container > .form-control { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + justify-content: flex-start; + gap: 10px; + align-items: center; +} + +.transcodate-form-container > .form-control > strong { + white-space: nowrap; + display: inline-block; + width: 100px; +} \ No newline at end of file diff --git a/static/js/media.js b/static/js/media.js index bcf3d51..1a67548 100644 --- a/static/js/media.js +++ b/static/js/media.js @@ -96,8 +96,25 @@ }); } +function transcodateFormHandlers() { + $(".show-transcodate-form").on("click", function(){ + const formContainer = $(".transcodate-form-container"); + if(formContainer.is(":visible")) { + formContainer.slideUp(); + } else { + formContainer.slideDown(); + } + }); + + $(".close-transcodate-form-container").on("click", function(){ + const formContainer = $(".transcodate-form-container"); + formContainer.slideUp(); + }); +} + // Load media list when the page is ready $(document).ready(function() { loadMediaList(); rescanMediaLibHandler(); + transcodateFormHandlers(); }); \ No newline at end of file diff --git a/templates/single.html b/templates/single.html index 521f745..d1f3340 100644 --- a/templates/single.html +++ b/templates/single.html @@ -13,6 +13,48 @@

Bitrate: {{ file.info.container.bitrate }}

Duration: {{ file.info.container.duration }}

Size: {{ file.info.container.size }}

+
+ +
+ + @@ -25,17 +67,17 @@ - + {% for video in file.info.video %} - + {% endfor %}
Bitrate Codec ResolutionBitrate
{{ video.bitrate }} {{ video.codec }} {{ video.resolution }}{{ video.bitrate }}