remake video modal window

VKAPI/Handlers/Video.php

@@ -11,24 +11,55 @@ use openvk\Web\Models\Repositories\Comments as CommentsRepo;
 
 final class Video extends VKAPIRequestHandler
 {
-    function get(int $owner_id, string $videos = "", string $fields = "", int $offset = 0, int $count = 30, int $extended = 0): object
+    function get(int $owner_id = 0, string $videos = "", string $fields = "", int $offset = 0, int $count = 30, int $extended = 0): object
     {
         $this->requireUser();
 
         if(!empty($videos)) {
             $vids = explode(',', $videos);
-    
+            $profiles = [];
-            foreach($vids as $vid)
+            $groups = [];
-            {
+            foreach($vids as $vid) {
                 $id    = explode("_", $vid);
-    
                 $items = [];
     
                 $video = (new VideosRepo)->getByOwnerAndVID(intval($id[0]), intval($id[1]));
                 if($video) {
-                    $items[] = $video->getApiStructure($this->getUser());
+                    $out_video = $video->getApiStructure($this->getUser())->video;
+                    $items[] = $out_video;
+                    if($out_video['owner_id']) {
+                        if($out_video['owner_id'] > 0) 
+                            $profiles[] = $out_video['owner_id'];
+                        else
+                            $groups[] = abs($out_video['owner_id']);
                     }
                 }
+            }
+
+            if($extended == 1) {
+                $profiles = array_unique($profiles);
+                $groups   = array_unique($groups);
+    
+                $profilesFormatted = [];
+                $groupsFormatted   = [];
+    
+                foreach($profiles as $prof) {
+                    $profile = (new UsersRepo)->get($prof);
+                    $profilesFormatted[] = $profile->toVkApiStruct($this->getUser(), $fields);
+                }
+    
+                foreach($groups as $gr) {
+                    $group = (new ClubsRepo)->get($gr);
+                    $groupsFormatted[] = $group->toVkApiStruct($this->getUser(), $fields);
+                }
+    
+                return (object) [
+                    "count" => sizeof($items),
+                    "items" => $items,
+                    "profiles" => $profilesFormatted,
+                    "groups" => $groupsFormatted,
+                ];
+            }
     
             return (object) [
                 "count" => count($items),

Web/Models/Entities/Video.php

@@ -170,6 +170,7 @@ class Video extends Media
                 "repeat" => 0,
                 "type" => "video",
                 "views" => 0,
+                "is_processed" => $this->isProcessed(),
                 "reposts" => [
                     "count" => 0,
                     "user_reposted" => 0

Web/Presenters/templates/@layout.xml

@@ -27,6 +27,7 @@
         {css "js/node_modules/tippy.js/dist/border.css"}
         {css "js/node_modules/tippy.js/dist/svg-arrow.css"}
         {css "js/node_modules/tippy.js/themes/light.css"}
+        {css "js/node_modules/jquery-ui/themes/base/resizable.css"}
         {script "js/node_modules/@popperjs/core/dist/umd/popper.min.js"}
         {script "js/node_modules/tippy.js/dist/tippy-bundle.umd.min.js"}
         {script "js/node_modules/handlebars/dist/handlebars.min.js"}

Web/Presenters/templates/Photos/Photo.xml

@@ -65,7 +65,7 @@
                     </div>
                     <a href="{$photo->getURL()}" class="profile_link" target="_blank" style="display:block;width:96%;">{_"open_original"}</a>
                     <a n:if="isset($thisUser) && $thisUser->getId() != $photo->getOwner()->getId()" class="profile_link" style="display:block;width:96%;" href="javascript:reportPhoto({$photo->getId()})">{_report}</a>
-                    <a onclick="javascript:repost({$photo->getPrettyId()}, 'photo')" class="profile_link" style="display:block;width:96%;">
+                    <a n:if="isset($thisUser)" onclick="javascript:repost({$photo->getPrettyId()}, 'photo')" class="profile_link" style="display:block;width:96%;">
                         {_share}
                     </a>
                 </div>

Web/Presenters/templates/Videos/View.xml

@@ -75,11 +75,11 @@
                             <a id='_videoDelete' href="/video{$video->getPrettyId()}/remove" class="profile_link" style="display:block;width:96%;">
                                 {_delete}
                             </a>
-                            <a onclick="javascript:repost({$video->getPrettyId()}, 'video')" class="profile_link" style="display:block;width:96%;">
+                        </div>
+                        <a n:if="isset($thisUser)" onclick="javascript:repost({$video->getPrettyId()}, 'video')" class="profile_link" style="display:block;width:96%;">
                             {_share}
                         </a>
                     </div>
-                    </div>
 
                     {if isset($thisUser)}
                         {if $thisUser->getId() != $video->getOwner()->getId()}
@@ -87,31 +87,7 @@
                         {/if}
                     {/if}
 
-                    <a n:if="$canReport ?? false" class="profile_link" style="display:block;width:96%;" href="javascript:reportVideo()">{_report}</a>
+                    <a n:if="$canReport ?? false" class="profile_link" style="display:block;width:96%;" href="javascript:reportVideo({$video->getId()})">{_report}</a>
-
-                    <script n:if="$canReport ?? false">
-                        function reportVideo() {
-                        uReportMsgTxt  = tr("going_to_report_video");
-                        uReportMsgTxt += "<br/>"+tr("report_question_text");
-                        uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
-
-                        MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
-                            (function() {
-                                res = document.querySelector("#uReportMsgInput").value;
-                                xhr = new XMLHttpRequest();
-                                xhr.open("GET", "/report/" + {$video->getId()} + "?reason=" + res + "&type=video", true);
-                                xhr.onload = (function() {
-                                if(xhr.responseText.indexOf("reason") === -1)
-                                    MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
-                                else
-                                MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
-                                });
-                                xhr.send(null);
-                            }),
-                            Function.noop
-                        ]);
-                        }
-                    </script>
                 </div>
             </div>
         </div>

Web/Presenters/templates/components/attachment.xml

@@ -26,11 +26,11 @@
 
         <div class="video-wowzer">
             <div class="small-video-ico"></div>
-            <a href="/video{$attachment->getPrettyId()}" id="videoOpen" data-id="{$attachment->getId()}">{$attachment->getName()}</a>
+            <a href="/video{$attachment->getPrettyId()}" id="videoOpen" data-id="{$attachment->getPrettyId()}">{$attachment->getName()}</a>
             <span class="video-wowzer-length" n:if="$attachment->getLength() != NULL">({$attachment->getFormattedLength()})</span>
         </div>
     {else}
-        <a class='compact_video' id='videoOpen' data-id='{$attachment->getId()}' href="/video{$attachment->getPrettyId()}">
+        <a class='compact_video' id='videoOpen' data-id='{$attachment->getPrettyId()}' href="/video{$attachment->getPrettyId()}">
             <div class='play-button'>
                 <div class='play-button-ico'></div>
             </div>

Web/Presenters/templates/components/textArea.xml

@@ -2,7 +2,7 @@
 {var $textAreaId = ($post ?? NULL) === NULL ? (++$GLOBALS["textAreaCtr"]) : $post->getId()}
 {var $textAreaId = ($custom_id ?? NULL) === NULL ? $textAreaId : $custom_id}
 
-<div id="write" class='model_content_textarea' style="padding: 5px 0;" onfocusin="expand_wall_textarea({$textAreaId});">
+<div id="write" class='model_content_textarea' style="padding: 5px 0;">
     <form action="{$route}" method="post" enctype="multipart/form-data" style="margin:0;">
         <textarea id="wall-post-input{$textAreaId}" placeholder="{_write}" name="text" style="width: 100%;resize: none;" class="small-textarea"></textarea>
         <div>

Web/Presenters/templates/components/video.xml

@@ -3,7 +3,7 @@
 <tbody>
     <tr>
         <td valign="top">
-            <a href="/video{$video->getPrettyId()}" data-id="{$video->getId()}">
+            <a href="/video{$video->getPrettyId()}" id='videoOpen' data-id="{$video->getPrettyId()}">
                 <div class="video-preview">
                     <img src="{$video->getThumbnailURL()}"
                     style="max-width: 170px; max-height: 127px; margin: auto;" >
@@ -15,7 +15,7 @@
                 {include infotable, x => $dat}
             {else}
         <a href="/video{$video->getPrettyId()}">
-            <b class='video_name' {$videoModal ? "id='videoOpen'" : ''} data-id="{$video->getId()}">
+            <b class='video_name' id='videoOpen' data-id="{$video->getPrettyId()}">
             {$video->getName()}
             </b>
         </a>
@@ -29,7 +29,7 @@
             <span style="color: grey;">{_video_uploaded} {$video->getPublicationTime()}</span><br/>
             
             <p>
-                <a href="/video{$video->getPrettyId()}" {$videoModal ? "id='videoOpen'" : ''} data-id="{$video->getId()}">{_view_video}</a>
+                <a href="/video{$video->getPrettyId()}" id='videoOpen' data-id="{$video->getPrettyId()}">{_view_video}</a>
                 {if $video->getCommentsCount() > 0}| <a href="/video{$video->getPrettyId()}#comments">{_comments} ({$video->getCommentsCount()})</a>{/if}
             </p>
             {/ifset}

Web/static/css/dialog.css

@@ -64,243 +64,147 @@ body.dimmed > .dimmer #absolute_territory {
     margin-left: 10px;
 }
 
+/* Modal player */
 
-/* fullscreen player */
+.ovk-modal-player-window {
-
+    box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.2);
-.ovk-fullscreen-player {
-    top: 9%;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, 0%);
-    z-index: 6667;
-    position: absolute;
     width: 823px;
     min-height: 400px;
-    box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.2);
+    margin: 9vh auto 0 auto;
 }
 
-.top-part span {
+.ovk-modal-player-window #ovk-player-part {
+    height: 70vh;
+    background: black;
+    padding: 15px 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.ovk-modal-player-window #ovk-player-part .top-part {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ovk-modal-player-window #ovk-player-part .top-part b {
     color: #515151;
-    font-size: 13px;
+    font-size: 12px;
-    transition: color 200ms ease-in-out;
 }
 
-.top-part .clickable:hover {
+.ovk-modal-player-window #ovk-player-part .top-part .top-part-buttons, .ovk-modal-player-window #ovk-player-part .bottom-part {
-    color: #ffffff;
+    color: #515151;
 }
 
-.ovk-fullscreen-player .bsdn_teaserTitleBox span {
+.ovk-modal-player-window #ovk-player-part .top-part .top-part-buttons a, .ovk-modal-player-window #ovk-player-part .bottom-part a {
-    color: unset;
+    color: #515151;
-    font-size: unset;
 }
 
-.ovk-fullscreen-player .bsdn-player {
+.ovk-modal-player-window #ovk-player-info {
-    max-width: 80%;
-    max-height: 350px;
-}
-
-.inner-player {
-    background: #000000;
-    min-height: 438px;
-    max-height: 439px;
-    position: relative;
-    padding-top: 11px;
-}
-
-.top-part-name {
-    font-size: 15px;
-    font-weight: bolder;
-    margin-left: 20px;
-    margin-top: 5px;
-}
-
-.top-part-buttons {
-    float: right;
-    margin-right: 20px;
-}
-
-.top-part-buttons span {
-    cursor: pointer;
-    user-select: none;
-}
-
-.fplayer {
-    text-align: center;
-    margin-top: 20px;
-}
-
-.top-part-bottom-buttons {
-    position: absolute;
-    margin-left: 20px;
-    bottom: 0;
-    margin-bottom: 20px;
-}
-
-.top-part-bottom-buttons span {
-    user-select: none;
-}
-
-.top-part .clickable {
-    cursor: pointer;
-}
-
-.bottom-part {
     display: none;
+}
+
+.ovk-modal-player-window #ovk-player-info.shown {
+    display: block;
+}
+
+.ovk-modal-player-window #ovk-player-info {
     background: white;
-    padding-bottom: 20px;
+    min-height: 200px;
-    padding-top: 30px;
+    padding: 5px 15px;
 }
 
-.left_block {
+.ovk-modal-player-window .media-page-wrapper-comments {
-    padding-left: 20px;
+    width: 100%;
-    /*padding-top: 20px;*/
-    width: 75%;
-    float: left;
-    background: white;
-    padding-right: 6px;
-    max-height: 400px;
-    overflow-y: auto;
 }
 
-.right_block {
+.ovk-modal-player-window .center-part {
-    padding-left: 10px;
+    text-align: center;
-    /*padding-top: 20px;*/
+    height: 90%;
-    width: 20%;
+    display: flex;
-    border-left: 1px solid gray;
+    align-items: center;
-    float: right;
+    justify-content: center;
 }
 
-.bottom-part span {
+.ovk-modal-player-window .center-part .gray {
-    font-size: 13px;
-}
-
-.bottom-part .gray {
     color: gray;
 }
 
-.ovk-fullscreen-dimmer {
+.ovk-modal-player-window .center-part .bsdn, .ovk-modal-player-window .center-part .bsdn-player {
-    /* спижжено у пулла с несколькими картинками там где просмотрщик фоток */
+    height: 100%;
-    position: fixed;
+    width: 100%;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    overflow: auto;
-    padding-bottom: 20px;
-    z-index: 300;
-}
-
-.v_author {
-    margin-top: 20px;
 }
 
 .miniplayer {
     position: absolute;
-    top:0;
+    background: rgba(54, 54, 54, 0.95);
-    background: rgba(54, 54, 54, 0.9);
     border-radius: 3px;
     min-width: 299px;
     min-height: 192px;
-    padding-top: 3px;
+    z-index: 7777;
-    z-index: 9999;
+    padding: 2px 7px;
+    display: flex;
+    flex-direction: column;
 }
 
-.miniplayer .bsdn-player {
+.miniplayer .miniplayer-head {
-    max-height: 150px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.miniplayer .fplayer {
+.miniplayer .miniplayer-head b {
-    max-width: 286px;
+    color: white;
-    margin-left: 6px;
-    margin-top: 10px;
-}
-
-.miniplayer-actions {
-    float: right;
-    margin-right: 8px;
-    margin-top: 4px;
-}
-
-.miniplayer-name {
-    color: #8a8a8a;
-    font-size: 14px;
-    margin-left: 7px;
-    margin-top: -6px;
-    font-weight: bolder;
     user-select: none;
 }
 
-.ui-draggable {
+.miniplayer .miniplayer-head .miniplayer-head-buttons {
-    position:fixed !important;
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
 
-.miniplayer-actions img {
+.miniplayer .miniplayer-head .miniplayer-head-buttons div {
-    max-width: 11px;
+    width: 16px;
+    height: 16px;
+    background: url(/assets/packages/static/openvk/img/wall.png) no-repeat 1px 0;
+    background-repeat: no-repeat;
+    opacity: 0.5;
     cursor: pointer;
-    transition: opacity 200ms ease-in-out;
-    opacity: 70%;
 }
 
-.miniplayer .fplayer iframe {
+.miniplayer .miniplayer-head .miniplayer-head-buttons div:hover {
-    max-width: 260px;
+    opacity: 1;
-    max-height: 160px;
 }
 
-.miniplayer-actions img:hover {
+.miniplayer .miniplayer-head .miniplayer-head-buttons #__miniplayer_return {
-    opacity: 100%;
+    background-position: -28px 0px;
 }
 
-#vidComments {
+.miniplayer .miniplayer-head .miniplayer-head-buttons #__miniplayer_close {
-    margin-top: 10px;
+    background-position: -12px 0px;
 }
 
-.showMoreComments {
+.miniplayer .miniplayer-head-buttons {
-    background: #eaeaea;
+    height: 20px;
-    cursor: pointer;
-    text-align: center;
-    padding: 10px;
-    user-select: none;
-    margin-top: 10px;
 }
 
-.loader {
+.miniplayer .miniplayer-body {
-    display: none;
+    height: 100%;
-    position: fixed;
-    top: -10%;
-    background: rgba(26, 26, 26, 0.9);;
-    padding-top: 12px;
-    width: 91px;
-    height: 25px;
-    text-align: center;
-    border-radius: 1px;
-    margin: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 5555;
 }
 
-.right-arrow, .left-arrow {
+.miniplayer .miniplayer-body .bsdn {
-    position: absolute;
+    height: 100%;
-    cursor: pointer;
-    transition: all 200ms ease-in-out;
-    margin-left: -50px;
-    background: none;
-    height: 449px;
-    width: 57px;
-    user-select: none;
 }
 
-.right-arrow img, .left-arrow img {
+.miniplayer .miniplayer-body .bsdn .bsdn-player {
-    user-select: none;
+    height: 100%;
-    opacity: 5%;
-    transition: all 200ms ease-in-out;
 }
 
-.right-arrow:hover, .left-arrow:hover {
+.miniplayer .miniplayer-body iframe {
-    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
-}
+    height: 100%;
-
-.right-arrow img:hover, .left-arrow img:hover {
-    opacity: 50%;
 }

Web/static/css/main.css

@@ -2630,6 +2630,7 @@ a.poll-retract-vote {
     overflow-y: auto;
     overflow-x: hidden;
     min-height: 300px;
+    width: 100%;
 }
 
 .ovk-photo-view .ovk-photo-details {
@@ -3649,3 +3650,32 @@ hr {
 .media-page-author-block .media-page-author-block-name span {
     text-transform: lowercase;
 }
+
+#ajloader {
+    display: none;
+    position: fixed;
+    top: -10%;
+    background: rgba(26, 26, 26, 0.9);;
+    padding-top: 12px;
+    width: 91px;
+    height: 25px;
+    text-align: center;
+    border-radius: 1px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 5555;
+}
+
+#ajloader.shown {
+    display: block;
+}
+
+.hoverable_color {
+    transition: all 0.17s ease-in-out;
+}
+
+.hoverable_color:hover {
+    color: white !important;
+}

Web/static/js/al_wall.js

@@ -288,6 +288,177 @@ async function OpenMiniature(e, photo, post, photo_id, type = "post") {
     return photo_viewer.getNode()
 }
 
+async function OpenVideo(video_arr = [], init_player = true)
+{
+    CMessageBox.toggleLoader()
+    const video_owner = video_arr[0]
+    const video_id    = video_arr[1]
+    let video_api     = null
+    try {
+        video_api   = await window.OVKAPI.call('video.get', {'videos': `${video_owner}_${video_id}`, 'extended': 1})
+    
+        if(!video_api.items || !video_api.items[0]) {
+            throw new Error('Not found')
+        }
+    } catch(e) {
+        CMessageBox.toggleLoader()
+        fastError(e.message)
+
+        return
+    }
+
+    // TODO: video lists
+    const video_object = video_api.items[0]
+    const pretty_id    = `${video_object.owner_id}_${video_object.id}`
+    const author       = find_author(video_object.owner_id, video_api.profiles, video_api.groups)
+    let player_html = ''
+    if(init_player) {
+        if(video_object.platform == 'youtube') {
+            const video_url = new URL(video_object.player)
+            const video_id = video_url.pathname.replace('/', '')
+            player_html = `
+            <iframe
+               width="600"
+               height="340"
+               src="https://www.youtube-nocookie.com/embed/${video_id}"
+               frameborder="0"
+               sandbox="allow-same-origin allow-scripts allow-popups"
+               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+               allowfullscreen></iframe>
+            `
+        } else {
+            if(!video_object.is_processed) {
+                player_html = `<span class='gray'>${tr('video_processing')}</span>`
+            } else {
+                const author_name = `${author.first_name} ${author.last_name}`
+                player_html = `
+                    <div class='bsdn media' data-name="${escapeHtml(video_object.title)}" data-author="${escapeHtml(author_name)}">
+                        <video class='media' src='${video_object.player}'></video>
+                    </div>
+                `
+            }
+        }
+    }
+
+    const msgbox = new CMessageBox({
+        title: '...',
+        close_on_buttons: false,
+        warn_on_exit: true,
+        custom_template: u(`
+        <div class="ovk-photo-view-dimmer">
+            <div class="ovk-modal-player-window">
+                <div id="ovk-player-part">
+                    <div class='top-part'>
+                        <b>${escapeHtml(video_object.title)}</b>
+
+                        <div class='top-part-buttons'>
+                            <a id='__modal_player_minimize' class='hoverable_color'>${tr('hide_player')}</a>
+                            |
+                            <a id='__modal_player_close' class='hoverable_color'>${tr('close')}</a>
+                        </div>
+                    </div>
+                    <div class='center-part'>
+                        ${player_html}
+                    </div>
+                    <div class='bottom-part'>
+                        <a id='__toggle_comments' class='hoverable_color'>${tr('show_comments')}</a>
+                        |
+                        <a href='/video${pretty_id}' class='hoverable_color'>${tr('to_page')}</a>
+                    </div>
+                </div>
+                <div id="ovk-player-info"></div>
+            </div>
+        </div>
+        `)
+    })
+
+    if(video_object.platform != 'youtube' && video_object.is_processed) {
+        bsdnInitElement(msgbox.getNode().find('.bsdn').nodes[0])
+    }
+
+    msgbox.getNode().find('#ovk-player-part #__modal_player_close').on('click', (e) => {
+        msgbox.close()
+    })
+
+    msgbox.getNode().find('#__toggle_comments').on('click', async (e) => {
+        if(msgbox.getNode().find('#ovk-player-info').hasClass('shown')) {
+            msgbox.getNode().find('#__toggle_comments').html(tr('show_comments'))
+        } else {
+            msgbox.getNode().find('#__toggle_comments').html(tr('close_comments'))
+        }
+
+        msgbox.getNode().find('#ovk-player-info').toggleClass('shown')
+        if(msgbox.getNode().find('#ovk-player-info').html().length < 1) {
+            u('#ovk-player-info').html(`<div id='gif_loader'></div>`)
+
+            const fetcher = await fetch(`/video${pretty_id}`)
+            const fetch_r = await fetcher.text()
+            const dom_parser = new DOMParser
+            const results =  u(dom_parser.parseFromString(fetch_r, 'text/html'))
+            const details = results.find('.ovk-vid-details')
+            details.find('.media-page-wrapper-description b').remove()
+
+            u('#ovk-player-info').html(details.html())
+        }
+    })
+
+    msgbox.getNode().find('#__modal_player_minimize').on('click', (e) => {
+        e.preventDefault()
+
+        const miniplayer = u(`
+            <div class='miniplayer'>
+                <div class='miniplayer-head'>
+                    <b>${escapeHtml(video_object.title)}</b>
+                    <div class='miniplayer-head-buttons'>
+                        <div id='__miniplayer_return'></div>
+                        <div id='__miniplayer_close'></div>
+                    </div>
+                </div>
+                <div class='miniplayer-body'></div>
+            </div>
+        `)
+        msgbox.hide()
+
+        u('body').append(miniplayer)
+        miniplayer.find('.miniplayer-body').nodes[0].append(msgbox.getNode().find('.center-part > *').nodes[0])
+        miniplayer.attr('style', `left:100px;top:${scrollY}px;`)
+        miniplayer.find('#__miniplayer_return').on('click', (e) => {
+            msgbox.reveal()
+            msgbox.getNode().find('.center-part').nodes[0].append(miniplayer.find('.miniplayer-body > *').nodes[0])
+            u('.miniplayer').remove()
+        })
+
+        miniplayer.find('#__miniplayer_close').on('click', (e) => {
+            msgbox.close()
+            u('.miniplayer').remove()
+        })
+
+        $('.miniplayer').draggable({cursor: 'grabbing', containment: 'body', cancel: '.miniplayer-body'})
+        $('.miniplayer').resizable({
+            maxHeight: 2000,
+            maxWidth: 3000,
+            minHeight: 150,
+            minWidth: 200
+        })
+    })
+
+    CMessageBox.toggleLoader()
+}
+
+u(document).on('click', '#videoOpen', (e) => {
+    e.preventDefault()
+
+    try {
+        const target = e.target.closest('#videoOpen')
+        const vid = target.dataset.id
+        const split = vid.split('_')
+
+        OpenVideo(split)
+    } catch(ec) {
+        return
+    }
+})
+
 u("#write > form").on("keydown", function(event) {
     if(event.ctrlKey && event.keyCode === 13)
         this.submit();
@@ -315,6 +486,28 @@ function reportPhoto(photo_id) {
     ]);
 }
 
+function reportVideo(video_id) {
+    uReportMsgTxt  = tr("going_to_report_video");
+    uReportMsgTxt += "<br/>"+tr("report_question_text");
+    uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
+
+    MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
+        (function() {
+            res = document.querySelector("#uReportMsgInput").value;
+            xhr = new XMLHttpRequest();
+            xhr.open("GET", "/report/" + video_id + "?reason=" + res + "&type=video", true);
+            xhr.onload = (function() {
+            if(xhr.responseText.indexOf("reason") === -1)
+                MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
+            else
+            MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
+            });
+            xhr.send(null);
+        }),
+        Function.noop
+    ]);
+}
+
 var tooltipClientTemplate = Handlebars.compile(`
     <table>
         <tr>
@@ -637,7 +830,7 @@ u('#write').on("drop", function(e) {
     }
 })
 
-u('#write > form').on('submit', (e) => {
+u(document).on('submit', '#write > form', (e) => {
     const target = u(e.target)
     const horizontal_array = []
     const horizontal_input = target.find(`input[name='horizontal_attachments']`)
@@ -1271,6 +1464,12 @@ u(document).on('click', '.post.post-nsfw .post-content', (e) => {
     u(e.target).closest('.post-nsfw').removeClass('post-nsfw')
 })
 
+u(document).on('focusin', '#write', (e) => {
+    const target = u(e.target).closest('#write')
+    target.find('.post-buttons').attr('style', 'display:block')
+    target.find('.small-textarea').addClass('expanded-textarea')
+})
+
 async function repost(id, repost_type = 'post') {
     const repostsCount = u(`#repostsCount${id}`)
     const previousVal  = repostsCount.length > 0 ? Number(repostsCount.html()) : 0;
@@ -1730,3 +1929,19 @@ u(document).on('click', '#__sourceAttacher', (e) => {
     u('.ovk-diag-cont').attr('style', 'width: 325px;')
     u('#source_flex_kunteynir input').nodes[0].focus()
 })
+
+u(document).on('keyup', async (e) => {
+    if(u('#ovk-player-part .bsdn').length > 0) {
+        switch(e.keyCode) {
+            case 32:
+                u('#ovk-player-part .bsdn .bsdn_playButton').trigger('click')
+                break
+            case 39:
+                u('#ovk-player-part video').nodes[0].currentTime = u('#ovk-player-part video').nodes[0].currentTime + 2
+                break
+            case 37:
+                u('#ovk-player-part video').nodes[0].currentTime = u('#ovk-player-part video').nodes[0].currentTime - 2
+                break
+        }
+    }
+})

Web/static/js/messagebox.js

@@ -97,6 +97,22 @@ class CMessageBox {
     close() {
         this.__exitDialog()
     }
+
+    hide() {
+        u('body').removeClass('dimmed')
+        u('html').attr('style', 'overflow-y:scroll')
+        this.getNode().attr('style', 'display: none;')
+    }
+
+    reveal() {
+        u('body').addClass('dimmed')
+        u('html').attr('style', 'overflow-y:hidden')
+        this.getNode().attr('style', 'display: block;')
+    }
+
+    static toggleLoader() {
+        u('#ajloader').toggleClass('shown')
+    }
 }
 
 window.messagebox_stack = []

Web/static/js/openvk.cls.js

@@ -2,13 +2,6 @@
     console.error('!!! You forgot to install NPM packages !!!')
 }
 
-function expand_wall_textarea(id) {
-    var el = document.getElementById('post-buttons'+id);
-    var wi = document.getElementById('wall-post-input'+id);
-    el.style.display = "block";
-    wi.className = "expanded-textarea";
-}
-
 function expand_comment_textarea(id) {
     var el = document.getElementById('commentTextArea'+id);
     var wi = document.getElementById('wall-post-input'+id);

Web/static/js/utils.js

@@ -140,3 +140,20 @@ function strip_tags(text)
 {
     return text.replace(/(<([^>]+)>)/gi, "")
 }
+
+function find_author(id, profiles, groups) 
+{
+    if(id > 0) {
+        const profile = profiles.find(prof => prof.id == id)
+        if(profile) {
+            return profile
+        }
+    } else {
+        const group = groups.find(grou => grou.id == Math.abs(id))
+        if(group) {
+            return group
+        }
+    }
+
+    return null
+}

locales/ru.strings

@@ -2016,7 +2016,7 @@
 
 /* Fullscreen player */
 
-"hide_player" = "Скрыть";
+"hide_player" = "Свернуть";
 "close_player" = "Закрыть";
 "show_comments" = "Показать информацию";
 "close_comments" = "Скрыть информацию";