diff --git a/css/style.css b/css/style.css index 687fb59..7855e6c 100644 --- a/css/style.css +++ b/css/style.css @@ -16,7 +16,7 @@ body { display: grid; grid-template-columns: 25vw auto; - grid-template-rows: auto auto; + grid-template-rows: 60vh auto; grid-template-areas: "comments video" "comments text"; @@ -33,15 +33,12 @@ aside { main { background-color: #282828; grid-area: video; - - display: grid; - justify-items: center; - align-items: center; + position: relative; } video { - max-width: 100%; - max-height: 75vh; + width: 100%; + height: 100%; } article { @@ -116,3 +113,80 @@ article p:last-child { .commentText { grid-area: comment; } + +.video-controls { + width: 100%; + height: 100%; + position: absolute; + top: 0; + display: grid; + grid-template-rows: auto min-content; + justify-items: center; + align-items: center; +} + +.hidden { + display: none !important; +} + +#togglePlay { + height: 15vh; +} + +.video-progress { + width: 80%; + margin-bottom: 30px; + position: relative; +} + +progress { + position: absolute; + width: 100%; + height: 5px; + border: none; + background-color: #616161; +} + +progress::-moz-progress-bar { + background-color: #616161; +} + +.seek { + position: absolute; + appearance: none; + background: transparent; + width: 100%; + height: 5px; + margin: 0; + cursor: pointer; + z-index: 5; +} + +.seek:focus { + outline: none; +} + +.seek::-moz-range-thumb { + background-color: #ffa800; + width: 23px; + height: 23px; + border-radius: 23px; + border: none; +} + +.videoComment { + position: absolute; + background-color: #ffa800; + width: 10%; + left: 45%; + height: 5px; + z-index: 1; +} + +.videoComment img { + position: relative; + top: -30px; + left: 50%; + margin-left: -12px; + cursor: pointer; +} diff --git a/img/closed-captioning-active.svg b/img/closed-captioning-active.svg deleted file mode 100644 index 23c0187..0000000 --- a/img/closed-captioning-active.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - diff --git a/img/play-active.svg b/img/note.svg similarity index 61% rename from img/play-active.svg rename to img/note.svg index cc937c8..3ada44e 100644 --- a/img/play-active.svg +++ b/img/note.svg @@ -7,12 +7,12 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - viewBox="0 0 33.929565 40" - width="33.929565" - height="40" + viewBox="0 0 24 24" + width="24" + height="24" version="1.1" id="svg6" - sodipodi:docname="play-active.svg" + sodipodi:docname="note.svg" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)"> @@ -22,7 +22,6 @@ image/svg+xml - @@ -37,24 +36,19 @@ guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:window-width="746" - inkscape:window-height="1005" + inkscape:window-width="1280" + inkscape:window-height="1007" id="namedview8" showgrid="false" - fit-margin-top="7" - fit-margin-left="7" - fit-margin-right="7" - fit-margin-bottom="7" - inkscape:zoom="9.3854166" - inkscape:cx="1.9933429" - inkscape:cy="32.174597" + inkscape:zoom="13.272984" + inkscape:cx="14.545168" + inkscape:cy="10.646764" inkscape:window-x="1920" inkscape:window-y="0" inkscape:window-maximized="0" - inkscape:current-layer="svg6" - inkscape:document-rotation="0" /> + inkscape:current-layer="svg6" /> + style="fill:#ffa800;fill-opacity:1" /> diff --git a/img/play.svg b/img/play.svg index 421b747..f70eee8 100644 --- a/img/play.svg +++ b/img/play.svg @@ -7,12 +7,12 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - viewBox="0 0 33.929565 40" - width="33.929565" + viewBox="0 0 40 40" + width="40" height="40" version="1.1" id="svg6" - sodipodi:docname="play-fill.svg" + sodipodi:docname="play.svg" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)"> @@ -37,8 +37,8 @@ guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:window-width="1280" - inkscape:window-height="1007" + inkscape:window-width="1920" + inkscape:window-height="1063" id="namedview8" showgrid="false" fit-margin-top="7" @@ -46,15 +46,20 @@ fit-margin-right="7" fit-margin-bottom="7" inkscape:zoom="9.3854166" - inkscape:cx="19.520535" + inkscape:cx="-1.2031055" inkscape:cy="32.174597" - inkscape:window-x="1920" + inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" inkscape:current-layer="svg6" - inkscape:document-rotation="0" /> + inkscape:document-rotation="0" + inkscape:snap-bbox="true" + inkscape:bbox-paths="true" + inkscape:bbox-nodes="true" + inkscape:snap-bbox-edge-midpoints="true" + inkscape:snap-bbox-midpoints="true" /> diff --git a/img/sticky-note-line.svg b/img/sticky-note-line.svg deleted file mode 100644 index 2b35952..0000000 --- a/img/sticky-note-line.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/index.php b/index.php index bd02dd6..5433b28 100644 --- a/index.php +++ b/index.php @@ -8,8 +8,9 @@ + + - @@ -36,15 +37,17 @@
-
@@ -60,13 +63,6 @@ - + \ No newline at end of file diff --git a/js/controller.js b/js/controller.js index 88a7bed..18fb182 100644 --- a/js/controller.js +++ b/js/controller.js @@ -4,6 +4,6 @@ class Controller { } init() { - console.log("here"); + } } \ No newline at end of file diff --git a/js/main.js b/js/main.js index 49d2d1d..aa4bb1f 100644 --- a/js/main.js +++ b/js/main.js @@ -1 +1 @@ -const app = new Controller(); \ No newline at end of file +const app = new Controller(new Model(), new View()); \ No newline at end of file diff --git a/js/model.js b/js/model.js new file mode 100644 index 0000000..4d6f467 --- /dev/null +++ b/js/model.js @@ -0,0 +1,3 @@ +class Model { + constructor() {} +} diff --git a/js/view.js b/js/view.js new file mode 100644 index 0000000..fb1b551 --- /dev/null +++ b/js/view.js @@ -0,0 +1,47 @@ +class View { + constructor() { + this.init(); + } + + init() { + this.colorTogglePlaySVG(); + this.enableCustomControls(); + + + /* Obarvení aktivního komentáře - dát do special metody */ + var mySVG = document.getElementsByClassName("activeIcon")[0]; + var svgDoc; + mySVG.addEventListener( + "load", + function () { + svgDoc = mySVG.contentDocument; + svgDoc.getElementById("path4").style.fill = "#ffa800"; + }, + false + ); + } + + enableCustomControls() { + const video = document.getElementById("video"); + const videoControls = document.getElementById("video-controls"); + + const videoWorks = !!document.createElement("video").canPlayType; + if (videoWorks) { + video.controls = false; + videoControls.classList.remove("hidden"); + } + } + + colorTogglePlaySVG() { + var playSVG = document.getElementById("togglePlay"); + var svgDoc; + playSVG.addEventListener( + "load", + function () { + svgDoc = playSVG.contentDocument; + svgDoc.getElementById("path4").style.fill = "#ffa800"; + }, + false + ); + } +} diff --git a/video.mp4 b/video.mp4 deleted file mode 100644 index c077b10..0000000 Binary files a/video.mp4 and /dev/null differ diff --git a/video.webm b/video.webm new file mode 100644 index 0000000..d61dd15 Binary files /dev/null and b/video.webm differ