mirror of
https://github.com/openvk/openvk
synced 2025-04-23 16:43:02 +03:00
Add audio embed thing
This commit is contained in:
Celestora
parent
ee56859acd
commit
5936240342
7 changed files with 231 additions and 70 deletions
|
|
@ -69,7 +69,7 @@ class Audio extends Media
|
|||
$this->stateChanges("key", $key);
|
||||
$this->stateChanges("token", $tok);
|
||||
$this->stateChanges("segment_size", $ss);
|
||||
$this->stateChanges("length", $ss);
|
||||
$this->stateChanges("length", $duration);
|
||||
|
||||
try {
|
||||
$args = [
|
||||
|
|
@ -128,6 +128,19 @@ class Audio extends Media
|
|||
return $this->getRecord()->length;
|
||||
}
|
||||
|
||||
function getFormattedLength(): string
|
||||
{
|
||||
$len = $this->getLength();
|
||||
$mins = floor($len / 60);
|
||||
$secs = $len - ($mins * 60);
|
||||
|
||||
return (
|
||||
str_pad((string) $mins, 2, "0", STR_PAD_LEFT)
|
||||
. ":" .
|
||||
str_pad((string) $secs, 2, "0", STR_PAD_LEFT)
|
||||
);
|
||||
}
|
||||
|
||||
function getSegmentSize(): float
|
||||
{
|
||||
return $this->getRecord()->segment_size;
|
||||
|
|
@ -162,17 +175,17 @@ class Audio extends Media
|
|||
|
||||
function isExplicit(): bool
|
||||
{
|
||||
return $this->getRecord()->explicit;
|
||||
return (bool) $this->getRecord()->explicit;
|
||||
}
|
||||
|
||||
function isWithdrawn(): bool
|
||||
{
|
||||
return $this->getRecord()->withdrawn;
|
||||
return (bool) $this->getRecord()->withdrawn;
|
||||
}
|
||||
|
||||
function isUnlisted(): bool
|
||||
{
|
||||
return $this->getRecord()->unlisted;
|
||||
return (bool) $this->getRecord()->unlisted;
|
||||
}
|
||||
|
||||
# NOTICE may flush model to DB if it was just processed
|
||||
|
|
@ -187,8 +200,8 @@ class Audio extends Media
|
|||
|
||||
try {
|
||||
$fragments = str_replace(".mpd", "_fragments", $this->getFileName());
|
||||
$original = "original_" . bin2hex($this->getRecord()->token) . "mp3";
|
||||
if (file_exists("$fragments/$original")) {
|
||||
$original = "original_" . bin2hex($this->getRecord()->token) . ".mp3";
|
||||
if(file_exists("$fragments/$original")) {
|
||||
# Original gets uploaded after fragments
|
||||
$this->stateChanges("processed", 0x01);
|
||||
|
||||
|
|
|
|||
94
Web/Presenters/templates/Audio/Embed.xml
Normal file
94
Web/Presenters/templates/Audio/Embed.xml
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
|
||||
<title>{$audio->getName()}</title>
|
||||
|
||||
{css "css/style.css"}
|
||||
</head>
|
||||
<body id="audioEmbed">
|
||||
<audio id="audio" />
|
||||
|
||||
<div id="miniplayer" class="audioEntry">
|
||||
<div class="playerButton">
|
||||
<img src="/assets/packages/static/openvk/img/play.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<div class="mediaInfo">
|
||||
<strong>
|
||||
{$audio->getPerformer()}
|
||||
</strong>
|
||||
-
|
||||
<span class="nobold">
|
||||
{$audio->getTitle()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="track">
|
||||
<div class="selectableTrack">
|
||||
<div> <!-- actual track --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="volume">
|
||||
<span class="nobold">
|
||||
{$audio->getFormattedLength()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{script "js/node_modules/umbrellajs/umbrella.min.js"}
|
||||
{script "js/node_modules/dashjs/dist/dash.all.min.js"}
|
||||
<script>
|
||||
function fmtTime(time) {
|
||||
mins = Math.floor(time / 60).toString().padStart(2, 0);
|
||||
secs = (time - (Math.floor(time / 60) * 60)).toString().padStart(2, 0);
|
||||
|
||||
return mins + ":" + secs;
|
||||
}
|
||||
|
||||
const protData = {
|
||||
"org.w3.clearkey": {
|
||||
"clearkeys": {$audio->getKeys()}
|
||||
}
|
||||
};
|
||||
|
||||
const play = u(".playerButton > img");
|
||||
const audio = document.querySelector("#audio");
|
||||
const player = dashjs.MediaPlayer().create();
|
||||
player.initialize(audio, {$audio->getURL()}, true);
|
||||
player.setProtectionData(protData);
|
||||
|
||||
play.on("click", function() {
|
||||
audio.paused ? audio.play() : audio.pause();
|
||||
});
|
||||
|
||||
u(audio).on("timeupdate", function() {
|
||||
let time = audio.currentTime;
|
||||
let ps = Math.ceil((time * 100) / {$audio->getLength()});
|
||||
|
||||
u(".volume span").html(fmtTime(Math.floor(time)));
|
||||
u(".track > div > div").nodes[0].style.width = ps + "%";
|
||||
});
|
||||
|
||||
u(audio).on("play", function() {
|
||||
play.attr("src", "/assets/packages/static/openvk/img/pause.jpg");
|
||||
});
|
||||
|
||||
u(audio).on(["pause", "ended", "suspended"], function() {
|
||||
play.attr("src", "/assets/packages/static/openvk/img/play.jpg");
|
||||
});
|
||||
|
||||
u(".track > div").on("click", function(e) {
|
||||
let rect = document.querySelector(".selectableTrack").getBoundingClientRect();
|
||||
let width = e.clientX - rect.left;
|
||||
let time = Math.ceil((width * {$audio->getLength()}) / (rect.right - rect.left));
|
||||
|
||||
audio.currentTime = time;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1989,112 +1989,102 @@ table td[width="120"] {
|
|||
#upload_container h4 {
|
||||
border-bottom: solid 1px #daE1E8;
|
||||
text-align: left;
|
||||
padding: 0px 0px 4px 0px;
|
||||
margin: 0px;
|
||||
padding: 0 0 4px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#audio_upload {
|
||||
width: 350px;
|
||||
margin: 20px auto;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px 0px;
|
||||
padding: 15px 0;
|
||||
border: 2px solid #ccc;
|
||||
background-color: #EFEFEF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: url(http://vkontakte.ru/images/bullet.gif) outside;
|
||||
margin: 10px 0px;
|
||||
list-style: url(http://vkontakte.ru/images/bullet.gif) outside; /* TODO cock */
|
||||
margin: 10px 0;
|
||||
padding-left: 30px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 1px 0px;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
#upload_container ul {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.audio_list {
|
||||
margin: 5px 20px;
|
||||
#audioEmbed {
|
||||
user-select: none;
|
||||
background: #eee;
|
||||
height: 40px;
|
||||
width: 486px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
border: 1px solid #8B8B8B;
|
||||
}
|
||||
|
||||
.audio_row {
|
||||
.audioEntry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.audio_row .play_button {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: url(http://web.archive.org/web/20101203010619im_/http://vkontakte.ru/images/play.gif);
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
vertical-align: top;
|
||||
.audioEntry > * {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.audio_row .info {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 1px;
|
||||
width: 514px;
|
||||
.audioEntry .playerButton {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.audio_row .duration {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: #777;
|
||||
font-size: 10px;
|
||||
margin-left: 5px;
|
||||
margin-top: 2px;
|
||||
.audioEntry .playerButton img {
|
||||
position: absolute;
|
||||
max-width: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.audio_row .lines {
|
||||
height: 5px;
|
||||
margin-top: 15px;
|
||||
font-size: 0;
|
||||
.audioEntry .status {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.audio_row .lines .dotted {
|
||||
border-top: dashed 1px #d8dfea;
|
||||
.audioEntry .status strong {
|
||||
color: #4C4C4C;
|
||||
}
|
||||
|
||||
.audio_row .active.volume_line {
|
||||
width: 50px;
|
||||
margin-left: 20px;
|
||||
.audioEntry .status .track {
|
||||
display: none;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.audio_row .volume_line .dot {
|
||||
width: 10px;
|
||||
#audioEmbed .audioEntry .status .track, .audioEntry.playing .status .track {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.audio_row .active {
|
||||
border-top: 1px solid #5f7d9d;
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
.audioEntry .status .track > .selectableTrack {
|
||||
margin-top: 3px;
|
||||
width: calc(100% - 8px);
|
||||
border-top: #707070 1px solid;
|
||||
height: 6px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.audio_row .active.duraton_line .dot {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.audio_row .dot {
|
||||
height: 5px;
|
||||
background: #5f7d9d;
|
||||
}
|
||||
|
||||
.audio_row .active.duraton_line {
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.audio_row .add_button {
|
||||
background: url(https://vkontakte.ru/images/plus.gif) no-repeat center;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
margin-left: -16px;
|
||||
.audioEntry .status .track > div > div {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background-color: #BFBFBF;
|
||||
}
|
||||
BIN
Web/static/img/pause.jpg
Normal file
BIN
Web/static/img/pause.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
BIN
Web/static/img/play.jpg
Normal file
BIN
Web/static/img/play.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 994 B |
|
|
@ -2,6 +2,7 @@
|
|||
"dependencies": {
|
||||
"@atlassian/aui": "^8.5.1",
|
||||
"create-react-class": "^15.7.0",
|
||||
"dashjs": "^4.3.0",
|
||||
"jquery": "^2.1.0",
|
||||
"knockout": "^3.5.1",
|
||||
"ky": "^0.19.0",
|
||||
|
|
|
|||
|
|
@ -41,6 +41,11 @@ backbone@^1.3.3:
|
|||
dependencies:
|
||||
underscore ">=1.8.3"
|
||||
|
||||
codem-isoboxer@0.3.6:
|
||||
version "0.3.6"
|
||||
resolved "https://registry.yarnpkg.com/codem-isoboxer/-/codem-isoboxer-0.3.6.tgz#867f670459b881d44f39168d5ff2a8f14c16151d"
|
||||
integrity sha512-LuO8/7LW6XuR5ERn1yavXAfodGRhuY2yP60JTZIw5yNYMCE5lUVbk3NFUCJxjnphQH+Xemp5hOGb1LgUXm00Xw==
|
||||
|
||||
core-js@^1.0.0:
|
||||
version "1.2.7"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
|
||||
|
|
@ -59,6 +64,18 @@ css.escape@1.5.0:
|
|||
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.0.tgz#95984d7887ce4ca90684e813966f42d1ef87ecea"
|
||||
integrity sha1-lZhNeIfOTKkGhOgTlm9C0e+H7Oo=
|
||||
|
||||
dashjs@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/dashjs/-/dashjs-4.3.0.tgz#cccda5a490cabf6c3b48aa887ec8c8ac0df1a233"
|
||||
integrity sha512-cqpnJaPQpEY4DsEdF9prwD00+5dp5EGHCFc7yo9n2uuAH9k4zPkZJwXQ8dXmVRhPf3M89JfKSoAYIP3dbXmqcg==
|
||||
dependencies:
|
||||
codem-isoboxer "0.3.6"
|
||||
es6-promise "^4.2.8"
|
||||
fast-deep-equal "2.0.1"
|
||||
html-entities "^1.2.1"
|
||||
imsc "^1.0.2"
|
||||
localforage "^1.7.1"
|
||||
|
||||
encoding@^0.1.11:
|
||||
version "0.1.13"
|
||||
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
|
||||
|
|
@ -66,6 +83,11 @@ encoding@^0.1.11:
|
|||
dependencies:
|
||||
iconv-lite "^0.6.2"
|
||||
|
||||
es6-promise@^4.2.8:
|
||||
version "4.2.8"
|
||||
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
|
||||
integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
|
||||
|
||||
event-lite@^0.1.1:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/event-lite/-/event-lite-0.1.2.tgz#838a3e0fdddef8cc90f128006c8e55a4e4e4c11b"
|
||||
|
|
@ -76,6 +98,11 @@ fancy-file-input@~2.0.4:
|
|||
resolved "https://registry.yarnpkg.com/fancy-file-input/-/fancy-file-input-2.0.4.tgz#698c216482e07649a827681c4db3054fddc9a32b"
|
||||
integrity sha512-l+J0WwDl4nM/zMJ/C8qleYnXMUJKsLng7c5uWH/miAiHoTvPDtEoLW1tmVO6Cy2O8i/1VfA+2YOwg/Q3+kgO6w==
|
||||
|
||||
fast-deep-equal@2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
|
||||
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
|
||||
|
||||
fbjs@^0.8.0:
|
||||
version "0.8.17"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||
|
|
@ -89,6 +116,11 @@ fbjs@^0.8.0:
|
|||
setimmediate "^1.0.5"
|
||||
ua-parser-js "^0.7.18"
|
||||
|
||||
html-entities@^1.2.1:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
|
||||
integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
|
||||
|
||||
iconv-lite@^0.6.2:
|
||||
version "0.6.3"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
|
||||
|
|
@ -101,6 +133,18 @@ ieee754@^1.1.8:
|
|||
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
|
||||
integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
|
||||
|
||||
immediate@~3.0.5:
|
||||
version "3.0.6"
|
||||
resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
|
||||
integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
|
||||
|
||||
imsc@^1.0.2:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/imsc/-/imsc-1.1.3.tgz#e96a60a50d4000dd7b44097272768b9fd6a4891d"
|
||||
integrity sha512-IY0hMkVTNoqoYwKEp5UvNNKp/A5jeJUOrIO7judgOyhHT+xC6PA4VBOMAOhdtAYbMRHx9DTgI8p6Z6jhYQPFDA==
|
||||
dependencies:
|
||||
sax "1.2.1"
|
||||
|
||||
int64-buffer@^0.1.9:
|
||||
version "0.1.10"
|
||||
resolved "https://registry.yarnpkg.com/int64-buffer/-/int64-buffer-0.1.10.tgz#277b228a87d95ad777d07c13832022406a473423"
|
||||
|
|
@ -156,6 +200,13 @@ ky@^0.19.0:
|
|||
resolved "https://registry.yarnpkg.com/ky/-/ky-0.19.0.tgz#d6ad117e89efe2d85a1c2e91462d48ca1cda1f7a"
|
||||
integrity sha512-RkDgbg5ahMv1MjHfJI2WJA2+Qbxq0iNSLWhreYiCHeHry9Q12sedCnP5KYGPt7sydDvsyH+8UcG6Kanq5mpsyw==
|
||||
|
||||
lie@3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
|
||||
integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
|
||||
dependencies:
|
||||
immediate "~3.0.5"
|
||||
|
||||
literallycanvas@^0.5.2:
|
||||
version "0.5.2"
|
||||
resolved "https://registry.yarnpkg.com/literallycanvas/-/literallycanvas-0.5.2.tgz#7d4800a8d9c4b38a593e91695d52466689586abd"
|
||||
|
|
@ -163,6 +214,13 @@ literallycanvas@^0.5.2:
|
|||
dependencies:
|
||||
react-addons-pure-render-mixin "^15.1"
|
||||
|
||||
localforage@^1.7.1:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
|
||||
integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
|
||||
dependencies:
|
||||
lie "3.1.1"
|
||||
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
|
|
@ -251,6 +309,11 @@ requirejs@^2.3.6:
|
|||
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
|
||||
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
|
||||
|
||||
sax@1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
|
||||
integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
|
||||
|
||||
setimmediate@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
|
||||
|
|
|
|||
Loading…
Reference in a new issue