Merge branch 'f0ckdev' into 'master'
Neuer Video Player See merge request !73
This commit is contained in:
noxy
commit
41480a8b65
|
|
@ -2,6 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>{{ id }} - f0ck.me</title>
|
<title>{{ id }} - f0ck.me</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./s/plyr.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="./s/stylo.css" />
|
<link rel="stylesheet" type="text/css" href="./s/stylo.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="./s/style.css" />
|
<link rel="stylesheet" type="text/css" href="./s/style.css" />
|
||||||
<link rel="icon" type="image/gif" href="./s/favicon.gif" />
|
<link rel="icon" type="image/gif" href="./s/favicon.gif" />
|
||||||
|
|
@ -23,13 +24,13 @@
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="medium">
|
<div class="medium">
|
||||||
{% if item == "video" %}
|
{% if item == "video" %}
|
||||||
<video id="player" src="{{ dest }}" style="max-width: 1280px; height: 50%;" preload="auto" autoplay controls loop></video>
|
<video id="player" src="{{ dest }}" style="/*max-width: 1280px; height: 50%;*/" preload="auto" controls loop></video>
|
||||||
{% elseif item == "audio" %}
|
{% elseif item == "audio" %}
|
||||||
{% if thumb != null %}
|
{% if thumb != null %}
|
||||||
<div>
|
<div>
|
||||||
<img src="{{ thumb }}" /><br />
|
<img src="{{ thumb }}" /><br />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<audio id="player" controls loop src="{{ dest }}" type="audio/mp3" autoplay></audio>
|
<audio id="player" controls loop src="{{ dest }}" type="audio/mp3" ></audio>
|
||||||
{% if thumb != null %}
|
{% if thumb != null %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
@ -44,7 +45,7 @@
|
||||||
<div class="panel info">
|
<div class="panel info">
|
||||||
<span class="id">ID: {{ id }} | by: {{ username }}<span></span><br />
|
<span class="id">ID: {{ id }} | by: {{ username }}<span></span><br />
|
||||||
<span class="src">src: <a id="holland" href="{{ srcurl }}" target="_blank">{{ src }}</a></span><br />
|
<span class="src">src: <a id="holland" href="{{ srcurl }}" target="_blank">{{ src }}</a></span><br />
|
||||||
<span class="dest">dest: {{ dest }}</span><br />
|
<span class="dest">Download: <a href="{{ dest }}" download>{{ dest }}</a></span><br />
|
||||||
<span class="mime">mime: {{ mime }}</span> <br />
|
<span class="mime">mime: {{ mime }}</span> <br />
|
||||||
<span class="size">size: {{ size }}</span><br />
|
<span class="size">size: {{ size }}</span><br />
|
||||||
<span class="channel">channel: {{ userchannel }}</span>
|
<span class="channel">channel: {{ userchannel }}</span>
|
||||||
|
|
@ -55,5 +56,7 @@
|
||||||
|
|
||||||
<script src="./s/shit.js"></script>
|
<script src="./s/shit.js"></script>
|
||||||
<script src="./s/theme.js"></script>
|
<script src="./s/theme.js"></script>
|
||||||
|
<script src="./s/plyr.js"></script>
|
||||||
|
<script>plyr.setup( { autoplay: "true" } );</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
1
s/plyr.css
Normal file
1
s/plyr.css
Normal file
File diff suppressed because one or more lines are too long
1
s/plyr.svg
Normal file
1
s/plyr.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
106
s/style.css
106
s/style.css
|
|
@ -148,3 +148,109 @@ img {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 888px;
|
width: 888px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Plyr */
|
||||||
|
.plyr--audio .plyr__controls {
|
||||||
|
padding: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: #262626;
|
||||||
|
border: 0;
|
||||||
|
color: #99ff00;
|
||||||
|
width: 300px;
|
||||||
|
padding-right: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr audio, .plyr video {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Video Player Style */
|
||||||
|
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||||
|
background: #484747;
|
||||||
|
color: #9f0;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px solid #262626;
|
||||||
|
margin: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr--video .plyr__controls {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0px 0px 0px;
|
||||||
|
background: rgba(38, 38, 38, 0.97);
|
||||||
|
border-bottom-left-radius: inherit;
|
||||||
|
border-bottom-right-radius: inherit;
|
||||||
|
color: #91ee06;
|
||||||
|
transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr {
|
||||||
|
position: relative;
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 200px;
|
||||||
|
font-family: Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;
|
||||||
|
direction: ltr;
|
||||||
|
border: 1px solid #262626;
|
||||||
|
box-shadow: 0 0 15px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
|
||||||
|
background: #484747;
|
||||||
|
color: #9f0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.plyr__progress--played, .plyr__volume--display {
|
||||||
|
z-index: 1;
|
||||||
|
color: #99ff00;
|
||||||
|
background: 0 0;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr input[type=range]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -4px;
|
||||||
|
position: relative;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
background: #262626;
|
||||||
|
border: 1px solid #99ff00;
|
||||||
|
border-radius: 100%;
|
||||||
|
transition: background .2s ease,border .2s ease,transform .2s ease;
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr input[type=range]:active::-webkit-slider-thumb {
|
||||||
|
background: #262626;
|
||||||
|
border-color: #99ff00;
|
||||||
|
transform: scale(1.25)
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr--fullscreen-active video {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Feuerfick */
|
||||||
|
.plyr input[type="range"]::-moz-range-thumb {
|
||||||
|
position: relative;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
background: #9f0;
|
||||||
|
border: 2px solid #262626;
|
||||||
|
border-radius: 100%;
|
||||||
|
transition: background .2s ease, border .2s ease, transform .2s ease;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr input[type=range]:active::-moz-range-thumb {
|
||||||
|
background: #9f0;
|
||||||
|
border-color: #262626;
|
||||||
|
transform: scale(1.25)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user