pixx/TVC
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

nastylování přehrávače

Browse Source
This commit is contained in:
David Zálešák
2021-01-23 21:19:52 +01:00
parent 4a53f21281
commit db9c865b86
12 changed files with 169 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
css/style.css
View File

@@ -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;
}

61
img/closed-captioning-active.svg
View File

@@ -1,61 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
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 36 32.400002"
width="36"
height="32.400002"
version="1.1"
id="svg6"
sodipodi:docname="closed-captioning-active.svg"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs10" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="746"
inkscape:window-height="1005"
id="namedview8"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="4.6927083"
inkscape:cx="-19.78161"
inkscape:cy="26.506288"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg6"
inkscape:document-rotation="0" />
<path
d="M 34.2,0 C 35.1936,0 36,0.8064 36,1.8 v 28.8 c 0,0.9936 -0.8064,1.8 -1.8,1.8 H 1.8 C 0.8064,32.4 0,31.5936 0,30.6 V 1.8 C 0,0.8064 0.8064,0 1.8,0 Z M 12.6,9 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.98,0 3.78,-0.81 5.0904,-2.1096 L 15.1452,18.7452 C 14.4954,19.3968 13.5954,19.8 12.6,19.8 10.611,19.8 9,18.189 9,16.2 c 0,-1.989 1.611,-3.6 3.6,-3.6 0.99,0 1.8864,0.396 2.547,1.0566 l 2.5452,-2.5452 C 16.389,9.8064 14.589,9 12.6,9 Z m 12.6,0 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.9872,0 3.7872,-0.8064 5.0904,-2.1096 L 27.7452,18.7452 C 27.0936,19.3968 26.1936,19.8 25.2,19.8 c -1.989,0 -3.6,-1.611 -3.6,-3.6 0,-1.989 1.611,-3.6 3.6,-3.6 0.9954,0 1.8954,0.4032 2.547,1.0566 l 2.5452,-2.5452 C 28.989,9.8064 27.189,9 25.2,9 Z"
id="path4"
style="fill:#ffa800;fill-opacity:1;stroke-width:1.8"
sodipodi:nodetypes="ssssssssssssccsssccssssccsssccs" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

30
img/play-active.svg → img/note.svg
View File

@@ -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)">
<metadata
id="metadata12">
@@ -22,7 +22,6 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@@ -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" />
<path
d="M 26.547059,20.714801 8.3350972,32.856109 A 0.85913585,0.85913585 0 0 1 7,32.141308 V 7.8586921 A 0.85913585,0.85913585 0 0 1 8.3350972,7.1438911 L 26.547059,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
d="M21 15l-6 5.996L4.002 21A.998.998 0 0 1 3 20.007V3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.456.993 1.002V15zM19 5H5v14h8v-5a1 1 0 0 1 .883-.993L14 13l5-.001V5zm-.829 9.999L15 15v3.169l3.171-3.17z"
id="path4"
style="fill:#ffa800;fill-opacity:1;stroke-width:1.71827" />
style="fill:#ffa800;fill-opacity:1" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

23
img/play.svg
View File

@@ -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)">
<metadata
id="metadata12">
@@ -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" />
<path
d="M 26.547059,20.714801 8.3350972,32.856109 A 0.85913585,0.85913585 0 0 1 7,32.141308 V 7.8586921 A 0.85913585,0.85913585 0 0 1 8.3350972,7.1438911 L 26.547059,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
d="M 29.582275,20.714801 11.370313,32.856109 A 0.85913585,0.85913585 0 0 1 10.035216,32.141308 V 7.8586919 a 0.85913585,0.85913585 0 0 1 1.335097,-0.714801 L 29.582275,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
id="path4"
style="fill:#c1c1c1;fill-opacity:1;stroke-width:1.71827" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

1
img/sticky-note-line.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 15l-6 5.996L4.002 21A.998.998 0 0 1 3 20.007V3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.456.993 1.002V15zM19 5H5v14h8v-5a1 1 0 0 1 .883-.993L14 13l5-.001V5zm-.829 9.999L15 15v3.169l3.171-3.17z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 340 B

24
index.php
View File

@@ -8,8 +8,9 @@
<link rel="stylesheet" href="css/style.css">
<script src="./js/controller.js"></script>
<script src="./js/model.js"></script>
<script src="./js/view.js"></script>
<script src="./js/main.js"></script>
</head>
<body>
@@ -36,15 +37,17 @@
</div>
</aside>
<main>
<video controls preload="auto">
<source src="video.mp4" type="video/mp4">
<video controls id="video" preload="auto">
<source src="video.webm">
</souce>
</video>
<div class="video-controls hidden" id="video-controls">
<object data="./img/play.svg" type="image/svg+xml" id="togglePlay"></object>
<div class="video-progress">
<progress id="progress-bar" value="0" min="0"></progress>
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
<progress id="progress-bar" value="50" min="0" max="100"></progress>
<input class="seek" id="seek" value="50" min="0" max="100" type="range" step="1">
<div class="videoComment"><img src="./img/note.svg" alt=""><div>
</div>
</div>
</main>
@@ -60,13 +63,6 @@
</article>
</body>
<script>
var mySVG = document.getElementsByClassName("activeIcon")[0];
var svgDoc;
mySVG.addEventListener("load", function() {
svgDoc = mySVG.contentDocument;
svgDoc.getElementById("path4").style.fill = "#ffa800";
}, false);
</script>
<script src="./js/main.js"></script>
</html>

2
js/controller.js
View File

@@ -4,6 +4,6 @@ class Controller {
}
init() {
console.log("here");
}
}

2
js/main.js
View File

@@ -1 +1 @@
const app = new Controller();
const app = new Controller(new Model(), new View());

3
js/model.js Normal file
View File

@@ -0,0 +1,3 @@
class Model {
constructor() {}
}

47
js/view.js Normal file
View File

@@ -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
);
}
}

BIN
video.mp4
View File

Binary file not shown.

BIN
video.webm Normal file
View File

Binary file not shown.