diff --git a/Web/Models/Entities/Audio.php b/Web/Models/Entities/Audio.php
index 8bd9ccf6..db87c6f3 100644
--- a/Web/Models/Entities/Audio.php
+++ b/Web/Models/Entities/Audio.php
@@ -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);
diff --git a/Web/Presenters/templates/Audio/Embed.xml b/Web/Presenters/templates/Audio/Embed.xml
new file mode 100644
index 00000000..7f9e8714
--- /dev/null
+++ b/Web/Presenters/templates/Audio/Embed.xml
@@ -0,0 +1,94 @@
+
+
+
+
+
+ {$audio->getName()}
+
+ {css "css/style.css"}
+
+
+
+
+
+
+
+
+
+
+ {$audio->getPerformer()}
+
+ -
+
+ {$audio->getTitle()}
+
+
+
+
+
+
+
+
+ {$audio->getFormattedLength()}
+
+
+
+
+ {script "js/node_modules/umbrellajs/umbrella.min.js"}
+ {script "js/node_modules/dashjs/dist/dash.all.min.js"}
+
+
+
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index 5d470284..2844fa3d 100644
--- a/Web/static/css/style.css
+++ b/Web/static/css/style.css
@@ -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;
}
\ No newline at end of file
diff --git a/Web/static/img/pause.jpg b/Web/static/img/pause.jpg
new file mode 100644
index 00000000..2b185a64
Binary files /dev/null and b/Web/static/img/pause.jpg differ
diff --git a/Web/static/img/play.jpg b/Web/static/img/play.jpg
new file mode 100644
index 00000000..1bf73952
Binary files /dev/null and b/Web/static/img/play.jpg differ
diff --git a/Web/static/js/package.json b/Web/static/js/package.json
index d3b0c088..25107f7a 100644
--- a/Web/static/js/package.json
+++ b/Web/static/js/package.json
@@ -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",
diff --git a/Web/static/js/yarn.lock b/Web/static/js/yarn.lock
index 78235893..81a13b38 100644
--- a/Web/static/js/yarn.lock
+++ b/Web/static/js/yarn.lock
@@ -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"