From baa24ae9f00167aca25d2b83836ab04b5bbf076e Mon Sep 17 00:00:00 2001
From: celestora <kitsuruko@gmail.com>
Date: Sat, 28 Jan 2023 00:31:05 +0200
Subject: [PATCH] Add VK-styled player

---
 Web/Presenters/templates/@layout.xml          |   3 +
 Web/Presenters/templates/_includeCSS.xml      |   5 +-
 .../templates/components/attachment.xml       |   4 +-
 Web/static/css/bsdn.css                       | 211 ++++++++++++
 Web/static/css/style.css                      |  18 +
 Web/static/img/bsdn/fullscreen.gif            | Bin 0 -> 333 bytes
 Web/static/img/bsdn/pause.gif                 | Bin 0 -> 248 bytes
 Web/static/img/bsdn/play.png                  | Bin 0 -> 3806 bytes
 Web/static/img/bsdn/speaker.gif               | Bin 0 -> 240 bytes
 Web/static/img/bsdn/speaker_muted.gif         | Bin 0 -> 88 bytes
 Web/static/js/player.js                       | 324 ++++++++++++++++++
 11 files changed, 563 insertions(+), 2 deletions(-)
 create mode 100644 Web/static/css/bsdn.css
 create mode 100644 Web/static/img/bsdn/fullscreen.gif
 create mode 100644 Web/static/img/bsdn/pause.gif
 create mode 100644 Web/static/img/bsdn/play.png
 create mode 100644 Web/static/img/bsdn/speaker.gif
 create mode 100644 Web/static/img/bsdn/speaker_muted.gif
 create mode 100644 Web/static/js/player.js

diff --git a/Web/Presenters/templates/@layout.xml b/Web/Presenters/templates/@layout.xml
index 490225b6..bb0d172e 100644
--- a/Web/Presenters/templates/@layout.xml
+++ b/Web/Presenters/templates/@layout.xml
@@ -294,6 +294,7 @@
         {script "js/messagebox.js"}
         {script "js/notifications.js"}
         {script "js/scroll.js"}
+        {script "js/player.js"}
         {script "js/al_wall.js"}
         {script "js/al_api.js"}
         {script "js/al_mentions.js"}
@@ -310,6 +311,8 @@
             </script>
         {/if}
 
+        <script>bsdnHydrate();</script>
+
         <script n:if="OPENVK_ROOT_CONF['openvk']['telemetry']['plausible']['enable']" async defer data-domain="{php echo OPENVK_ROOT_CONF['openvk']['telemetry']['plausible']['domain']}" src="{php echo OPENVK_ROOT_CONF['openvk']['telemetry']['plausible']['server']}js/plausible.js"></script>
         
         <script n:if="OPENVK_ROOT_CONF['openvk']['telemetry']['piwik']['enable']">
diff --git a/Web/Presenters/templates/_includeCSS.xml b/Web/Presenters/templates/_includeCSS.xml
index 7f83c01a..ffd0c195 100644
--- a/Web/Presenters/templates/_includeCSS.xml
+++ b/Web/Presenters/templates/_includeCSS.xml
@@ -5,6 +5,7 @@
 
     {if $theme !== NULL}
         {if $theme->inheritDefault()}
+            {css "css/bsdn.css"}
             {css "css/style.css"}
             {css "css/dialog.css"}
             {css "css/notifications.css"}
@@ -20,6 +21,7 @@
             <link rel="stylesheet" href="/themepack/{$theme->getId()}/{$theme->getVersion()}/resource/xmas.css" />
         {/if}
     {else}
+        {css "css/bsdn.css"}
         {css "css/style.css"}
         {css "css/dialog.css"}
         {css "css/notifications.css"}
@@ -41,6 +43,7 @@
         {css "css/microblog.css"}
     {/if}
 {else}
+    {css "css/bsdn.css"}
     {css "css/style.css"}
     {css "css/dialog.css"}
     {css "css/nsfw-posts.css"}
@@ -49,4 +52,4 @@
     {if $isXmas}
         {css "css/xmas.css"}
     {/if}
-{/ifset}
\ No newline at end of file
+{/ifset}
diff --git a/Web/Presenters/templates/components/attachment.xml b/Web/Presenters/templates/components/attachment.xml
index 95fcdec8..3f3161f3 100644
--- a/Web/Presenters/templates/components/attachment.xml
+++ b/Web/Presenters/templates/components/attachment.xml
@@ -10,7 +10,9 @@
         </a>
     {/if}
 {elseif $attachment instanceof \openvk\Web\Models\Entities\Video}
-    <video class="media" src="{$attachment->getURL()}" controls="controls"></video>
+    <div class="bsdn media" data-name="{$attachment->getName()}" data-author="{$attachment->getOwner()->getCanonicalName()}">
+        <video class="media" src="{$attachment->getURL()}"></video>
+    </div>
     <div class="video-wowzer">
         <img src="/assets/packages/static/openvk/img/videoico.png" />
         <a href="/video{$attachment->getPrettyId()}">{$attachment->getName()}</a>
diff --git a/Web/static/css/bsdn.css b/Web/static/css/bsdn.css
new file mode 100644
index 00000000..2aabb4e9
--- /dev/null
+++ b/Web/static/css/bsdn.css
@@ -0,0 +1,211 @@
+.bsdn-player {
+    width: 100%;
+    position: relative;
+    display: inline-flex;
+    font-family: sans-serif;
+    user-select: none;
+    background-color: black;
+}
+
+.bsdn-player > .bsdn_controls, .bsdn-player > .bsdn_teaserWrap, .bsdn-player > .bsdn_contextMenu {
+    position: absolute;
+}
+
+.bsdn_controls {
+    display: flex;
+    width: 100%;
+    bottom: 0;
+    background-color: hsl(0deg 0% 0% / 59%);
+    border-top: 1px solid hsl(0deg 0% 100% / 70%);
+    padding: 7px 12px;
+    color: #fff;
+    align-items: center;
+    box-sizing: border-box;
+    gap: 6px;
+    z-index: 2;
+    opacity: 0;
+}
+
+.bsdn-player.bsdn-dirty > .bsdn_controls {
+    opacity: 1;
+}
+
+.bsdn_video {
+    width: 100%;
+    display: inline-flex;
+    justify-content: center;
+}
+
+.bsdn_terebilkaUpperWrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bsdn_terebilkaWrap {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.bsdn_logo {
+    height: 8px;
+}
+
+p.bsdn_timeWrap {
+    display: inline;
+    margin: 0;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.bsdn_terebilkaLowerWrap, .bsdn_soundControlSubWrap {
+    position: relative;
+    height: 6px;
+    border-top: 1px solid white;
+}
+
+.bsdn_terebilkaBrick, .bsdn_soundControlBrick {
+    position: absolute;
+    height: 100%;
+    width: 15px;
+    background-color: #fff;
+    pointer-events: none;
+}
+
+.bsdn_soundIcon {
+    cursor: pointer;
+}
+
+.bsdn_soundControl {
+    width: 64px;
+}
+
+.bsdn_soundControlBrick {
+    width: 10px;
+}
+
+.bsdn_soundControlPadding {
+    height: 8px;
+}
+
+button.bsdn_playButton {
+    appearance: none;
+    background: none;
+    border: none;
+    color: #fff;
+    padding: 0 8px;
+    padding-left: 0;
+    font-size: 22px;
+    cursor: pointer;
+}
+
+.bsdn_fullScreenButton {
+    cursor: pointer;
+}
+
+.bsdn_teaserWrap {
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: hsl(0deg 0% 0% / 10%);
+}
+
+.bsdn_teaser {
+    display: flex;
+    padding: 10px 20px;
+    width: 266px;
+    background-color: hsl(0deg 0% 14.17% / 74.12%);
+    border-radius: 10px;
+    align-items: stretch;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.bsdn_teaserTitleBox {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.bsdn_teaserButton {
+    cursor: pointer;
+}
+
+
+time.bsdn_timeFull {
+    margin-left: 10px;
+    color: #b1b1b1;
+}
+
+.bsdn-player._bsdn_playing .bsdn_controls {
+    opacity: 0;
+    pointer-events: none;
+    transition: 1s opacity ease-in-out;
+    transition-delay: 2s;
+}
+
+.bsdn-player._bsdn_playing:hover .bsdn_controls {
+    opacity: 1;
+    pointer-events: unset;
+    transition: .2s opacity ease-in-out;
+    transition-delay: 0;
+}
+
+
+.bsdn_video > video {
+    height: 100%;
+    max-width: 100%;
+}
+
+
+.bsdn_contextMenu {
+    z-index: 3;
+    background-color: #f4f4f4;
+    padding: 6px;
+    border: 1px solid #908f90;
+    width: 232px;
+    height: 191px;
+}
+
+.bsdn_contextMenuElement {
+    display: block;
+    color: #666294;
+    cursor: pointer;
+    padding: 3px 0px 3px 20px;
+}
+
+.bsdn_contextMenu hr {
+    margin: 5px 0;
+    border-color: #878f8e;
+    border-bottom: none;
+}
+
+
+.bsdn_contextMenuElement:hover, .bsdn_contextMenuElement:active {
+    color: #fff;
+}
+.bsdn_contextMenuElement:hover {
+    background-color: #9797c8;
+}
+
+.bsdn_contextMenuElement:active {
+    background-color: #5a5a8f;
+}
+
+
+.bsdn_teaserWrap span {
+    color: #fff;
+}
+
+.bsdn_teaserButton > img {
+    max-height: 69px;
+}
+
+.bsdn_fullScreenButton > img, .bsdn_soundIcon {
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index 588ca03d..b2399bc7 100644
--- a/Web/static/css/style.css
+++ b/Web/static/css/style.css
@@ -2277,3 +2277,21 @@ a.poll-retract-vote {
 .tour div {
     font-size: 11px; color:#000; 
 }
+
+.video-wowzer > img {
+    vertical-align: bottom;
+}
+
+.video-wowzer {
+    font-weight: bolder;
+    font-size: 12px;
+    padding: 3px 0;
+}
+
+.video-wowzer a::before {
+    content: "b";
+    color: transparent;
+    width: 12px;
+    background-image: url(/assets/packages/static/openvk/img/videoico.png);
+    display: none;
+}
\ No newline at end of file
diff --git a/Web/static/img/bsdn/fullscreen.gif b/Web/static/img/bsdn/fullscreen.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7004d5fbc8e1928d98e72feb98cde83b879aa260
GIT binary patch
literal 333
zcmZ?wbhEHb6k_0I_^QAF1gfg4RaI5h)zu9R4J|D#r%s)^eEIT~D_3sczWw0AgNF|v
zK6&!w>C>mrpFe-`;>F9CFJHfY{pQV^ckkZ4fB*i&hYw%Be*O0C+xPF^fBg9I^XJcB
zzkdDx{rk_KKY#!J{rB(R|Ns9%cF+tc{$ybU8Ls%B+cP&YJ=HfcJu^9*FFi3gH__HW
z&%_i28FWBOKt5(*^KocqYI!JN=^@Y|%owV~&XwS`Hj0tw!qun+1_BLF%T9B89}m;*
uXxzrdFs0~r*TsF$gS({cMYVq<=6G?kFy{I+RJwG#dAa+zamhF`SOWlmBYK?x

literal 0
HcmV?d00001

diff --git a/Web/static/img/bsdn/pause.gif b/Web/static/img/bsdn/pause.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b3f64d0359412c6d481632a5b621e7388630ea6e
GIT binary patch
literal 248
zcmZ?wbhEHb<Yy3K_#(~#1gB1&I(_=|nKNh3o;`c++`04T&tJH3;o`-Mmo8npeEIT~
zD_5>wy?X81wd>cf-@SYH+qZ8&fByXS>(}q!zyJLC^Y`!HfB*jd|NkFk5H_IrlZ6o^
zuK1tZGdD3k)i*IcGdY_tJux>o(bhoE#1sS>bU;c#E@EH}U$Dr8m2=Knjjjo)o@Y5t
z)~y!VDmuR+mP3DbPuT9KBF>&07t|;QS_XwIJ0V)-l;ImC<F;{{`hs0^=AAIxFk^;Y
e)%I8A)!O{W&$~Cea4wb;<yTfq*VIyEum%9IC2imU

literal 0
HcmV?d00001

diff --git a/Web/static/img/bsdn/play.png b/Web/static/img/bsdn/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..c282502c2e211de7e8ad65c1db126840de2c5bce
GIT binary patch
literal 3806
zcmV<44k7W0P)<h;3K|Lk000e1NJLTq002h-002=41^@s6fIqvL000i9Nkl<ZcwX&X
zS!`728NHApn9XJlYbc8i25drELx3U*Ee);Up;04<loybYh}4u)sZtW9%|l44lq`zF
zCLAJYz(9xr6Cl_aumQ7U%)W*ln}FGO@bsLE5B+j$;~9GfW|Ca#YG&^KpE=+D{nv4R
zUdlzFn%(otE3Y)|-@pH#6A}{oHg4Rw_pMvE>Rh>U<>;9+XL9oL@?M`dZQ7Ne5|$6a
z89#pf&^~?oyquhz{D%e&8Z`0we9oOacO1Xp?*Js{`0?Y;&Ye3yo-kp;_@5F$&bV>o
zTBW6>%{+Sa=<%C3Z~E`vz3T@c{u?)L_yLgn`{Kom{!N=U`KM2xK6~ugu`mB*0DAxZ
z_s4D9wr%UZd-weJ@85U9xPAM!zoeuD#PPeI+{XO`?BKzJ{*;uIkB1E#7WZQY$@jtw
zFT^x&-n?6EY-|!m2tc@^#6`ckt$Ow94ghn&EGI55&KW#-@ar8qbQp%u#ap*-&7M1V
z?(!cSP`)~K>a=gsqD32kQxmLl0jXB4n!EBlw-Frv=0cEa)vDzJ)T&jhgf?y3{0-;#
zedd{GI_%!PJ9pKpRoj0oAo(!RrY&2x><n;RAOrwG5PJkt&6+ix+O=yxRMG^kUAuNp
ze0+Srp+krETeogqUfZ^9r>$ADCIjMk30AHont}2`;XZ|>5eLD+)~Hd#Wrx7QK9@Dn
zHxI|jeNR9Aw8MP_lva&P=gyt`Hfq$U@1Q}0zS_8P<JX4{9ol&M^yy=}cI|o~r%|@}
zphx)c#)u^r7>O7`AUOQ3mB$k_i6TLT?sC9F2fFAbfRwan&z_9Ed-rD5ty_0D{G>Bc
zhK=Kc$-Yg-XdyTpG`C3+6CAGEM?he`Twn+a#f|&9P-(}+#5hBS3`y+Rv11~{t`GL7
z;98kSjvTpq{`~m|vKs}9kEU8I(BNgIICv>yI)wy_4B|F|A`#^A6fKD!_g}qw)uA5i
z)vMR9z^3PV_wJomP*CtKMC?#zX6EiFz{c_6ANTP=35@=IiI@h!!E(P$ynb6Id6`F`
zXw~Z1ukSQ#)+`PdZ7eKXk7u8KHXT+j?!bWqCpT=^a3YdH@`3WT#2hJK=^72*?&mi7
zLJ~UxOC_y^qNd{rCctr;Hf`E7DJiKZbWtW0_F{x7+rXqfCr+HW8i^qJFrb?9Ya~Kq
zhCaPavMdsC8k}_^bsj}diW`2F)2UOZ-vF2aF#BHuoYnA;j-;ojZ;Uj6d;s8qLxV+*
zpO-ljCod3X{noXtmu)Q^^%Nq0>Z6#34I7Szi2V{uI}1)^eK6?o^5x49M+!(j=!Sbz
zyk2nh&vS6{dn}M;4MME4B1I9i3-8C{nlx!bpt>g}CU)=ArOUw0n>WwF?`;sfJ=?c$
zzx1R*qB3^l0<p!iBvcRQy{6Y!qUoo}M@Z5MK2j!v;N|Vxx8J#7!Gf)!dWOne=OH+i
zIk~)Zq{FPPvVeHcqo_f|7_Y@by#5G%lnf^_11xF^FZ)PVR@VMdK3|~M3JW;)=5i>@
z0!N~14FMH)j~+cbbnDh_!tmk4|B{oF^9B5*xro=cBjI*2(1C^GID+#~A&26EUY+Ds
z%w8ofV5||Kb)yH)pbtQeh70iAfB^$?cI?=Zg>WQy_3G8vLiw!aT`O$hRP^uyMaPwb
z@dL$Aze)ZPBLALXP$vM@29D)AnEqWA-J`1e!v>CJgqJOrT@pLysi}LYoCylU75PT|
z4n0J1dl8EIMT8<t0NQk9BnuFVoUAGck7CXbDiEQ*kqtehcdWwJ{cLEW{c;QVn*cFZ
zD-CpqgFS8c@86#Vk30LLk3L!&>gVS5!p0oS7VAGrw|LpZK`XYiK9cp`bqr%Rq(_or
z*^=QawF9e~!OPB@KY#w7P=Z8o9^@Lrv{*~TTUeh*-^mbKDP;o`-7B}G?E+TW0E8b*
z)sE=iz5581jpidPSp@605(@i5D25YO=9Kk-Uh5=Lqe2!K9K6@+d4c6`g2<J?qTco=
zME{8Zs6Xm&nW(5NswzNXXHIz!C{goTt+Moy1<LDf^LU0Q6g4=FT>(&6DC>AwwuCKP
zwk(@9YgVO2?TLZo)k)si?NOj=AI~An1Q>M|^bjrEZ;^%U3l{Z8+?EdiXaho#W5F`%
ziGmaC!|Hft9+lqprdkLZLXmn9wU@xA)&Qy>>i;W{9$Ar*k#RTB`w|>C6Btd4^psWT
z{7%1!I!HNh#AgnY`@IpjCBgLn0v4`w>(;F|fA-mDs{<KtR5C|7Y%xdKN&aSnp9}pW
zI+HvWAk~Hr`hCxyJqI2;c5F9NwX<N=mM&Yi?2!)SW4Bg;{9_dzBgaw|66r63;muO2
zVoPSh`>qRMo*yw{M5C@<yZ#y#l8w+ut7p%iU1pUwDw!iNIAB#n$P}(tK@&Wi7w30~
z8LPGlh|v-digbZxON6*BM`dLFiWMu0>>m^Mlto1>sLFm0p8k=XL|#k2lC^%)M`RJ#
z>({TlF&q+WOs;i8dgS@s+}v+)dg|fBhmT=(m3GvEqtvZJ3NeIWNf)UQX-&Vj@qBiS
z5G+`<B&0;D!<mdjy+0kUz%KYmXQL7v%M^)|4N}W<FvTo7jRcV^mwNT;QQSHM=o;)r
zVm?XWRE613>|DiPwoFY>C@$WGU<wHNL~<YrF1PV|F!zlhV*PM_jTtj$tc*GzN6Og7
zU$R>Ae>h+p;Y%^o%(G0*ePj=hBWSXIU{6CR=aS;$;`o6B2et@Hiu7^N$)+-NKY?T$
zBdorWAEY9q?Lp#k1RNq33kEd+aCIVvIl-2M)NQ6xw8X`Bp;_yt?_`Zlx)Bgt-o|l$
zT(df^cbniuWn+<-odic=g9XZ_S}8_MZ}2!;s_(!5-c7&q7>XRW-@*1v7cN{Vf(|+v
z)nY|}Y{^GHjyDY=AjM8OiUh<mjlg{O-FFA!5ayy3<d0hB$aKrBOQ~951eU;|t|4Ox
zj$$t!!|zybUAlDX3OZvEaxME*PT=FvpO5t(-b6mxK~PFl8SW<mVS<ccUb}Yf%BfSQ
zj>1cxjfV9P^{`RP9IL>+*+YRNk+BJTF-@f(f&x*>N3rnh*Is+=OZzWIjI|1uS{5AJ
zk!H=hlrfpY7GcIzV2K-iB7(mIol}fP&gmmZj{H|y_m5iUSlwckvRLGet9T3@KYkV!
z6&=7lj>V%!jr#ke{*<U?js=Heqr8pneC5Cy7SIdk=ecv|4xBuBvH)GJ3&)HZGp{1H
zMlCqjJgdu<04Vz>XOCrOgbYRaJhyi3+Nq;QkDgo+C{`f{dThiTN6{#C+FYw6ox|@6
z2}+&3^H8{3!IbP*Uw!q1U<VLU%uzCmgOGUGpi(&-FKZMU@RK5hxnb8Z?;;=Vyg8Ud
zHt(&s-YN(dn6Uae!Ny9|AsiV0aV|_faJAj?6d5JAxK9;NfysM9gigaOXQP!j_02cm
zTw57XtXPGm%c49NzO08;9ZES~9wX5qU~<^F-&Pomck3V?I*rb+g8cmaMd-Jj`N=1r
z1YDmg55R~KE1SI&2ug+8KvIm95{B-%fA;KIcA&0BGr_!x6DMw~3R~>C5dn_sP*k#9
zm55SSkK1T<l)a;9QQQy<6{8Nd1yzI8x8HtyL8w59NNZ&$nkZtHGbjCX`SN84nY#N(
zH*7+$^0#p2CeE2N=YNyILWoen9x~}1j2;R08NJm@Z@k2a8q<*+Sf2xEcgsZ!?&3+4
zCWWP=%Q7e6WLGd2C>S7BoYNnmih}eIMG6X+^V&I~<g54IdvAKM;8*7Ou<4v&fOLI|
z()nBhNOdL5hj8Gp<U`?R!!%E*%pfa!PQYSS*&76Uo|0EI-K-E$gb)WE1Y1_YZ}~Je
zHFaO0*9z5f1Sg<rg~2kRG7m_-LlJ@nDu(zhMfEWS^VPRh=31dRhv0-|dUG&f(k$bJ
zA_RpZv}oVHee>Ua_uaXn7+_Vd!TDAtq_nLAabTKbZmotl!zQI$R#uL#y~-x?cy*l4
zlL)a2fS%$l0A|@6Z@lr(sthQU=W>qcQv!z<=67{SaWFR0Ro+DNvvi(<LkkAQL$MIA
zOR$u-Bsl!etQ<NT&cI(uM^gK*SRYJKkC26v(XR7ZlxJ1sYa?LAGu);Wfmp;(ZRel~
z3VjkfZ7PA-zG5Dah}l6J;V$B!G_YmH)TvW*A_R{gJO;tJ!7XA72W5L(Bm#CCwc5<Q
z;$(Yc1Ps9vko0;H2RSgyYtT_OAHBj;A`uil6T!JDCrojTSYvC>>PFx;fhQ-;z92-Y
z2Ht>TgLhiE;>Bwh78YL3&dyF<zkdBc7A{;E@o#Yo$doHEwEwd0hoNHS;Q6V(Jc<@U
zCWD}COE7;k4bu}-&@`PF$!xLD=CdrY;^ZBGEx_Au2Aw12tYkJ>Lq`rdmV8tZ)1h?#
zjUHfEgrjAFwD{Oja0`QvQF6MxhnE;p!CJ*DQKER#Utt`CwGb0D(pIiq`2pUk6Ll~7
zAO>U(+q_O;VDS_I0pN|oRr(NX2qZxfqmWynyH7{%2BPK+h|m;xw^d40K52&WMIU#O
zBRK<|5zk7XHR}=;0_9C~OKFoqs0X>;ElhJ3O!GG|)1PBTZ^SFyioo}Q5x3!?79!ZY
zjIO3Qfxr{32Q0H~^R`sN1O_@~FXEticyUJxz86<?(`ec6I)Nx<oJAeE2tdWzu)%Ac
z<k>PC2X;7^9k&;~EPO9c+L9$pBJN!jRs9ouD242W3%?GtZ<8@;qBWQiBUfLY2zrSS
zQwgXu)8#M33=}4`=ivQ<ORD-15r6*7nKM6xrMU=Gd<V?%!(nq@pa_%fhvjkK8wfB?
zO_?&~KPbTeF5(9if(Lw<2}B+F3s|3fXm{_0KDp-Tor{J3X#ky4h-A}tIC4AC$C8KX
zIIBW%->A66{}uG!dFP!rnC&(g?WPInX^Dk--T`pZCr_SyJ}O4^^F#iOz!OK{zZ7(H
U;)KH$%K!iX07*qoM6N<$g1|&I82|tP

literal 0
HcmV?d00001

diff --git a/Web/static/img/bsdn/speaker.gif b/Web/static/img/bsdn/speaker.gif
new file mode 100644
index 0000000000000000000000000000000000000000..cb02421ea66d316b6815c51c65de4504a7661346
GIT binary patch
literal 240
zcmZ?wbhEHb6lCCG_#({!1dA6hUcP+!+O=zM-MaPo@#AODo;`p5{KbnGFJHcV^XARl
zw{PFSfB)gbhmRjWe){z3^XJcBzI^%m_3O89-@bqU{`2S0U%!6+{{8#UpFe;9{{8pw
z-~a#rL59MB;!hSv5L@v-w`Xo*da7??dS-GqUwUG0ZlbM$o{1?4GU$MmfLz4D>aU>C
zm%?eImaybNQc#p6bJ)%Z)0vBpEIK%ACiet^qjIxaT9Y(8=BNvHeX97O!*a18%$P-2
iYDtHZ7E{`y1G?s?7P>Ys_01BR5d1!{VJRmggEasEN_Tny

literal 0
HcmV?d00001

diff --git a/Web/static/img/bsdn/speaker_muted.gif b/Web/static/img/bsdn/speaker_muted.gif
new file mode 100644
index 0000000000000000000000000000000000000000..909ea43c8a66438de54f382eae411f180873724b
GIT binary patch
literal 88
zcmZ?wbhEHb6lCCG_{huv1T$yOJagvE|Ns9Lf3h%w1av?INS=X7v!#Ef`fFnb7vat>
lWdZTD`ii*ZhKE-t2Bnr<2<`GpNHZ48;(Tl27|+094FH{!8@T`g

literal 0
HcmV?d00001

diff --git a/Web/static/js/player.js b/Web/static/js/player.js
new file mode 100644
index 00000000..5472a48c
--- /dev/null
+++ b/Web/static/js/player.js
@@ -0,0 +1,324 @@
+function _bsdnUnwrapBitMask(number) {
+    return number.toString(2).split("").reverse().map(x => x === "1");
+}
+
+function _bsdnToHumanTime(time) {
+    time = Math.ceil(time);
+    let mins = Math.floor(time / 60);
+    let secs = (time - (mins * 60));
+
+    if(secs < 10)
+        secs = "0" + secs;
+    if(mins < 10)
+        mins = "0" + mins;
+
+    return mins + ":" + secs;
+}
+
+function _bsdnTpl(name, author) {
+    return `
+            <div class="bsdn_contextMenu" style="display: none;">
+                <span class="bsdn_contextMenuElement bsdn_copyVideoUrl">Copy video link to clipboard</span>
+                <hr/>
+                <span class="bsdn_contextMenuElement">OpenVK BSDN///Player 0.1</span>
+                <hr/>
+                <span class="bsdn_contextMenuElement">Developers:</span>
+                <span class="bsdn_contextMenuElement" onclick="window.location.assign('https://github.com/celestora');">
+                    - celstora
+                </span>
+                <span class="bsdn_contextMenuElement" onclick="window.location.assign('https://github.com/openvk/openvk/issues');">
+                    - Report a problem...
+                </span>
+                <hr/>
+                <span class="bsdn_contextMenuElement" onclick="confirm('эм это шутка');">About Adobe Flash Player...</span>
+            </div>
+
+            <div class="bsdn_controls">
+                <div>
+                    <button class="bsdn_playButton">▶</button>
+                </div>
+
+                <div class="bsdn_terebilkaWrap">
+                    <div class="bsdn_terebilkaUpperWrap">
+                        <img class="bsdn_logo" src="/assets/packages/static/openvk/img/bsdn/logo.gif" style="opacity: 0; /* TODO add logo xdd */" />
+                        <p class="bsdn_timeWrap">
+                            <time class="bsdn_timeReal">--:--</time>
+                            <time class="bsdn_timeFull">--:--</time>
+                        </p>
+                    </div>
+
+                    <div class="bsdn_terebilkaLowerWrap">
+                        <div class="bsdn_terebilkaBrick"></div>
+                    </div>
+                </div>
+
+                <div>
+                    <img class="bsdn_soundIcon" src="/assets/packages/static/openvk/img/bsdn/speaker.gif" />
+                </div>
+
+                <div class="bsdn_soundControl">
+                    <div class="bsdn_soundControlPadding"></div>
+                    <div class="bsdn_soundControlSubWrap">
+                        <div class="bsdn_soundControlBrick" style="left: calc(100% - 10px);"></div>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="bsdn_fullScreenButton">
+                        <img src="/assets/packages/static/openvk/img/bsdn/fullscreen.gif" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="bsdn_teaserWrap">
+                <div class="bsdn_teaser">
+                    <div class="bsdn_teaserTitleBox">
+                        <b>${name}</b>
+                        <span>${author}</span>
+                    </div>
+
+                    <div class="bsdn_teaserButton">
+                        <img src="/assets/packages/static/openvk/img/bsdn/play.png" />
+                    </div>
+                </div>
+            </div>
+        `;
+}
+
+function _bsdnTerebilkaEventFactory(el, terebilka, callback, otherListeners) {
+    let terebilkaSize = () => el.querySelector(terebilka).getBoundingClientRect().width; // чтобы просралось
+
+    let listeners = {
+        mousemove: [
+            e => {
+                let buttonsPresseed = _bsdnUnwrapBitMask(e.buttons);
+                if(!buttonsPresseed[0])
+                    return; // user doesn't click so nothing should be done
+
+                let offset    = e.offsetX;
+                let percents  = Math.max(0, Math.min(100, offset / (terebilkaSize() / 100)));
+
+                return callback(percents);
+            }
+        ],
+        mousedown: [
+            e => {
+                let offset   = e.offsetX;
+                let percents = Math.max(0, Math.min(100, offset / (terebilkaSize() / 100)));
+
+                return callback(percents);
+            }
+        ]
+    };
+
+    for(eventName in (otherListeners || {})) {
+        if(listeners.hasOwnProperty(eventName))
+            listeners[eventName] = otherListeners[eventName].concat(listeners[eventName]);
+        else
+            listeners[eventName] = otherListeners[eventName];
+    }
+
+    return listeners;
+}
+
+function _bsdnEventListenerFactory(el, v) {
+    return {
+        ".bsdn-player": {
+            click: [
+                e => {
+                    if(el.querySelector(".bsdn_controls").contains(e.target) || el.querySelector(".bsdn_teaser").contains(e.target) || el.querySelector(".bsdn_contextMenu").contains(e.target))
+                        return;
+
+                    if(el.querySelector(".bsdn_contextMenu").style.display !== "none") {
+                        el.querySelector(".bsdn_contextMenu").style.display = "none";
+                        return;
+                    }
+
+                    if(v.paused)
+                        v.play();
+                    else
+                        v.pause();
+                }
+            ],
+            contextmenu: [
+                e => {
+                    e.preventDefault();
+                    if(el.querySelector(".bsdn_controls").contains(e.target) || el.querySelector(".bsdn_contextMenu").contains(e.target))
+                        return;
+
+                    let rect = el.querySelector(".bsdn-player").getBoundingClientRect();
+
+                    let h = rect.height, w = rect.width;
+                    let x = e.pageX - rect.x, y = e.pageY - rect.y;
+
+                    if(h - y < 191)
+                        y -= 191;
+
+                    if(w - x < 246)
+                        x -= 246;
+
+                    let menu = el.querySelector(".bsdn_contextMenu");
+                    menu.style.top     = y;
+                    menu.style.left    = x;
+                    menu.style.display = "unset";
+                }
+            ]
+        },
+
+        ".bsdn_contextMenuElement": {
+            click: [ () => el.querySelector(".bsdn_contextMenu").style.display = "none" ]
+        },
+
+        ".bsdn_video > video": {
+            play: [
+                () => {
+                    if(!el.querySelector(".bsdn-player").classList.contains("bsdn-dirty"))
+                        el.querySelector(".bsdn-player").classList.add("bsdn-dirty")
+
+                    el.querySelector(".bsdn_playButton").innerHTML = "<img src='/assets/packages/static/openvk/img/bsdn/pause.gif' style='padding-right: 3px; padding-top: 3px;' />";
+                    el.querySelector(".bsdn-player").classList.add("_bsdn_playing");
+                    el.querySelector(".bsdn_teaserWrap").style.display = "none";
+                }
+            ],
+            pause: [
+                () => {
+                    el.querySelector(".bsdn_playButton").innerHTML = "▶";
+                    el.querySelector(".bsdn-player").classList.remove("_bsdn_playing");
+                    el.querySelector(".bsdn_teaserWrap").style.display = "flex";
+                }
+            ],
+            timeupdate: [
+                () => {
+                    el.querySelector(".bsdn_timeReal").innerHTML = _bsdnToHumanTime(v.currentTime);
+
+                    let terebilkaSize = el.querySelector(".bsdn_terebilkaLowerWrap").getBoundingClientRect().width;
+                    let brickSize     = 15;
+                    let percents      = Math.ceil(v.currentTime / (v.duration / 100));
+                    let offset        = ((terebilkaSize - brickSize) / 100) * percents;
+                    el.querySelector(".bsdn_terebilkaBrick").style.left = `min(calc(100% - 15px), ${offset}px`; // смешной мясной костыль ибо мне лень делать onresize
+                }
+            ],
+            volumechange: [
+                () => {
+                    if(v.volume === 0)
+                        el.querySelector(".bsdn_soundIcon").src = "/assets/packages/static/openvk/img/bsdn/speaker_muted.gif";
+                    else
+                        el.querySelector(".bsdn_soundIcon").src = "/assets/packages/static/openvk/img/bsdn/speaker.gif";
+
+                    let scSize    = el.querySelector(".bsdn_soundControlSubWrap").getBoundingClientRect().width;
+                    let brickSize = 10;
+                    let offset    = (scSize - brickSize) * v.volume;
+                    el.querySelector(".bsdn_soundControlBrick").style.left = offset + "px";
+                }
+            ],
+            loadedmetadata: [
+                () => {
+                    el.querySelector(".bsdn_timeFull").innerHTML = _bsdnToHumanTime(v.duration);
+                }
+            ]
+        },
+
+        ".bsdn_fullScreenButton": {
+            click: [
+                () => {
+                    if(document.fullscreen) {
+                        document.exitFullscreen();
+                    } else {
+                        el.querySelector(".bsdn-player").requestFullscreen();
+                    }
+                }
+            ]
+        },
+
+        ".bsdn_teaserButton|.bsdn_playButton": {
+            click: [
+                () => {
+                    if(v.paused)
+                        v.play();
+                    else
+                        v.pause();
+                }
+            ]
+        },
+
+        ".bsdn_terebilkaLowerWrap": _bsdnTerebilkaEventFactory(el, ".bsdn_terebilkaLowerWrap", function(p) {
+            let time = (v.duration / 100) * p;
+            setTimeout(() => {
+                v.currentTime = time;
+                if(v.currentTime === 0) {
+                    console.warn("[!] Хромог момент");
+                    console.warn("Теребилка не работает в хроме если сервер не реализует HTTP полностью.");
+                    console.warn("Встроенный сервер РНР не возвращает заголовки Accept-Range из-за чего хром отказывается seek'ать. Google как всегда.");
+                    console.warn("Установите Firefox для лучшей безопасности в сети: https://www.mozilla.org/ru/firefox/enterprise/#download");
+                }
+            }, 0);
+        }, {
+            mousedown: [
+                e => v.pause()
+            ],
+            mouseup: [
+                e => v.play()
+            ]
+        }),
+
+        ".bsdn_soundControlSubWrap": _bsdnTerebilkaEventFactory(el, ".bsdn_soundControlSubWrap", function(p) {
+            let volume = p / 100;
+            v.volume   = volume;
+        }),
+
+        ".bsdn_soundIcon": {
+            click: [
+                e => v.volume = v.volume === 0 ? 0.75 : 0
+            ]
+        }
+    }
+}
+
+function _bsdnApplyBindings(el, v) {
+    let listeners = _bsdnEventListenerFactory(el, v);
+
+    for(key in listeners) {
+        let selectors = key.split("|");
+        selectors.forEach(sel => {
+            for(eventName in listeners[key]) {
+                listeners[key][eventName].forEach(listener => {
+                    el.querySelectorAll(sel).forEach(target => {
+                        target.addEventListener(eventName, listener, {
+                            passive: (["contextmenu"]).indexOf(eventName) === -1
+                        });
+                    });
+                });
+            }
+        });
+    }
+}
+
+function bsdnInitElement(el) {
+    if(el.querySelector(".bdsn-hydrated") != null) {
+        console.debug(el, " is already hydrated.");
+        return;
+    }
+
+    let video = el.querySelector("video");
+    if(!video) {
+        console.warning(el, " does not contain any <video>s.");
+        return;
+    }
+
+    el.innerHTML = `
+        <div class="bsdn-player bdsn-hydrated">
+            ${_bsdnTpl(el.dataset.name, el.dataset.author)}
+            <div class="bsdn_video">
+                ${video.outerHTML}
+            </div>
+        </div>
+    `;
+
+    video = el.querySelector(".bsdn_video > video");
+    _bsdnApplyBindings(el, video);
+    video.volume = 0.75;
+}
+
+function bsdnHydrate() {
+    document.querySelectorAll(".bsdn").forEach(bsdnInitElement);
+}