Lanmikeman/openvk
Lanmikeman/openvk
1
1
Fork 0
mirror of https://github.com/openvk/openvk synced 2025-04-23 16:43:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add audio embed thing

Browse source
This commit is contained in:
Celestora 2022-03-22 15:44:26 +02:00
parent ee56859acd
commit 5936240342
7 changed files with 231 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
Web/Models/Entities/Audio.php
View file

@ -69,7 +69,7 @@ class Audio extends Media
$this->stateChanges("key", $key); $this->stateChanges("key", $key);
$this->stateChanges("token", $tok); $this->stateChanges("token", $tok);
$this->stateChanges("segment_size", $ss); $this->stateChanges("segment_size", $ss);
$this->stateChanges("length", $ss); $this->stateChanges("length", $duration);
try { try {
$args = [ $args = [
@ -128,6 +128,19 @@ class Audio extends Media
return $this->getRecord()->length; 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 function getSegmentSize(): float
{ {
return $this->getRecord()->segment_size; return $this->getRecord()->segment_size;
@ -162,17 +175,17 @@ class Audio extends Media
function isExplicit(): bool function isExplicit(): bool
{ {
return $this->getRecord()->explicit; return (bool) $this->getRecord()->explicit;
} }
function isWithdrawn(): bool function isWithdrawn(): bool
{ {
return $this->getRecord()->withdrawn; return (bool) $this->getRecord()->withdrawn;
} }
function isUnlisted(): bool function isUnlisted(): bool
{ {
return $this->getRecord()->unlisted; return (bool) $this->getRecord()->unlisted;
} }
# NOTICE may flush model to DB if it was just processed # NOTICE may flush model to DB if it was just processed
@ -187,7 +200,7 @@ class Audio extends Media
try { try {
$fragments = str_replace(".mpd", "_fragments", $this->getFileName()); $fragments = str_replace(".mpd", "_fragments", $this->getFileName());
$original = "original_" . bin2hex($this->getRecord()->token) . "mp3"; $original = "original_" . bin2hex($this->getRecord()->token) . ".mp3";
if(file_exists("$fragments/$original")) { if(file_exists("$fragments/$original")) {
# Original gets uploaded after fragments # Original gets uploaded after fragments
$this->stateChanges("processed", 0x01); $this->stateChanges("processed", 0x01);

94
Web/Presenters/templates/Audio/Embed.xml Normal file
View 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>&nbsp;<!-- 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>

118
Web/static/css/style.css
View file

@ -1989,112 +1989,102 @@ table td[width="120"] {
#upload_container h4 { #upload_container h4 {
border-bottom: solid 1px #daE1E8; border-bottom: solid 1px #daE1E8;
text-align: left; text-align: left;
padding: 0px 0px 4px 0px; padding: 0 0 4px 0;
margin: 0px; margin: 0;
} }
#audio_upload { #audio_upload {
width: 350px; width: 350px;
margin: 20px auto; margin: 20px auto;
margin-bottom: 20px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 15px 0px; padding: 15px 0;
border: 2px solid #ccc; border: 2px solid #ccc;
background-color: #EFEFEF; background-color: #EFEFEF;
text-align: center; text-align: center;
} }
ul { ul {
list-style: url(http://vkontakte.ru/images/bullet.gif) outside; list-style: url(http://vkontakte.ru/images/bullet.gif) outside; /* TODO cock */
margin: 10px 0px; margin: 10px 0;
padding-left: 30px; padding-left: 30px;
color: black; color: black;
} }
li { li {
padding: 1px 0px; padding: 1px 0;
} }
#upload_container ul { #upload_container ul {
padding-left: 15px; padding-left: 15px;
} }
.audio_list { #audioEmbed {
margin: 5px 20px; 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%; width: 100%;
margin-bottom: 10px;
} }
.audio_row .play_button { .audioEntry > * {
height: 16px; padding: 5px;
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;
} }
.audio_row .info { .audioEntry .playerButton {
display: inline-block; position: relative;
vertical-align: top;
margin-top: 1px;
width: 514px;
} }
.audio_row .duration { .audioEntry .playerButton img {
display: inline-block; position: absolute;
vertical-align: top; max-width: 50%;
color: #777; top: 50%;
font-size: 10px; left: 50%;
margin-left: 5px; margin-right: -50%;
margin-top: 2px; transform: translate(-50%, -50%);
cursor: pointer;
} }
.audio_row .lines { .audioEntry .status {
height: 5px; display: grid;
margin-top: 15px; grid-template-columns: 1fr;
font-size: 0;
} }
.audio_row .lines .dotted { .audioEntry .status strong {
border-top: dashed 1px #d8dfea; color: #4C4C4C;
} }
.audio_row .active.volume_line { .audioEntry .status .track {
width: 50px; display: none;
margin-left: 20px; padding: 4px 0;
} }
.audio_row .volume_line .dot { #audioEmbed .audioEntry .status .track, .audioEntry.playing .status .track {
width: 10px; display: unset;
} }
.audio_row .active { .audioEntry .status .track > .selectableTrack {
border-top: 1px solid #5f7d9d; margin-top: 3px;
display: inline-block; width: calc(100% - 8px);
margin-bottom: 5px; border-top: #707070 1px solid;
height: 6px;
cursor: text;
} }
.audio_row .active.duraton_line .dot { .audioEntry .status .track > div > div {
width: 15px; height: 100%;
} width: 0%;
background-color: #BFBFBF;
.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;
} }

BIN
Web/static/img/pause.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 948 B

BIN
Web/static/img/play.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 994 B

1
Web/static/js/package.json
View file

@ -2,6 +2,7 @@
"dependencies": { "dependencies": {
"@atlassian/aui": "^8.5.1", "@atlassian/aui": "^8.5.1",
"create-react-class": "^15.7.0", "create-react-class": "^15.7.0",
"dashjs": "^4.3.0",
"jquery": "^2.1.0", "jquery": "^2.1.0",
"knockout": "^3.5.1", "knockout": "^3.5.1",
"ky": "^0.19.0", "ky": "^0.19.0",

63
Web/static/js/yarn.lock
View file

@ -41,6 +41,11 @@ backbone@^1.3.3:
dependencies: dependencies:
underscore ">=1.8.3" 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: core-js@^1.0.0:
version "1.2.7" version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 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" resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.0.tgz#95984d7887ce4ca90684e813966f42d1ef87ecea"
integrity sha1-lZhNeIfOTKkGhOgTlm9C0e+H7Oo= 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: encoding@^0.1.11:
version "0.1.13" version "0.1.13"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9" resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@ -66,6 +83,11 @@ encoding@^0.1.11:
dependencies: dependencies:
iconv-lite "^0.6.2" 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: event-lite@^0.1.1:
version "0.1.2" version "0.1.2"
resolved "https://registry.yarnpkg.com/event-lite/-/event-lite-0.1.2.tgz#838a3e0fdddef8cc90f128006c8e55a4e4e4c11b" 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" 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== 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: fbjs@^0.8.0:
version "0.8.17" version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
@ -89,6 +116,11 @@ fbjs@^0.8.0:
setimmediate "^1.0.5" setimmediate "^1.0.5"
ua-parser-js "^0.7.18" 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: iconv-lite@^0.6.2:
version "0.6.3" version "0.6.3"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" 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" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== 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: int64-buffer@^0.1.9:
version "0.1.10" version "0.1.10"
resolved "https://registry.yarnpkg.com/int64-buffer/-/int64-buffer-0.1.10.tgz#277b228a87d95ad777d07c13832022406a473423" 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" resolved "https://registry.yarnpkg.com/ky/-/ky-0.19.0.tgz#d6ad117e89efe2d85a1c2e91462d48ca1cda1f7a"
integrity sha512-RkDgbg5ahMv1MjHfJI2WJA2+Qbxq0iNSLWhreYiCHeHry9Q12sedCnP5KYGPt7sydDvsyH+8UcG6Kanq5mpsyw== 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: literallycanvas@^0.5.2:
version "0.5.2" version "0.5.2"
resolved "https://registry.yarnpkg.com/literallycanvas/-/literallycanvas-0.5.2.tgz#7d4800a8d9c4b38a593e91695d52466689586abd" resolved "https://registry.yarnpkg.com/literallycanvas/-/literallycanvas-0.5.2.tgz#7d4800a8d9c4b38a593e91695d52466689586abd"
@ -163,6 +214,13 @@ literallycanvas@^0.5.2:
dependencies: dependencies:
react-addons-pure-render-mixin "^15.1" 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: loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 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" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== 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: setimmediate@^1.0.5:
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"