mirror of
https://github.com/openvk/openvk
synced 2024-12-23 00:51:03 +03:00
remake video modal window
This commit is contained in:
mrilyew
parent
73325a3acb
commit
e5c114c6cf
15 changed files with 417 additions and 233 deletions
|
|
@ -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);
|
||||
|
||||
foreach($vids as $vid)
|
||||
{
|
||||
$profiles = [];
|
||||
$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),
|
||||
|
|
|
|||
|
|
@ -170,6 +170,7 @@ class Video extends Media
|
|||
"repeat" => 0,
|
||||
"type" => "video",
|
||||
"views" => 0,
|
||||
"is_processed" => $this->isProcessed(),
|
||||
"reposts" => [
|
||||
"count" => 0,
|
||||
"user_reposted" => 0
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -75,10 +75,10 @@
|
|||
<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%;">
|
||||
{_share}
|
||||
</a>
|
||||
</div>
|
||||
<a n:if="isset($thisUser)" onclick="javascript:repost({$video->getPrettyId()}, 'video')" class="profile_link" style="display:block;width:96%;">
|
||||
{_share}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{if isset($thisUser)}
|
||||
|
|
@ -87,31 +87,7 @@
|
|||
{/if}
|
||||
{/if}
|
||||
|
||||
<a n:if="$canReport ?? false" class="profile_link" style="display:block;width:96%;" href="javascript:reportVideo()">{_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>
|
||||
<a n:if="$canReport ?? false" class="profile_link" style="display:block;width:96%;" href="javascript:reportVideo({$video->getId()})">{_report}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -64,243 +64,147 @@ body.dimmed > .dimmer #absolute_territory {
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Modal player */
|
||||
|
||||
/* fullscreen player */
|
||||
|
||||
.ovk-fullscreen-player {
|
||||
top: 9%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, 0%);
|
||||
z-index: 6667;
|
||||
position: absolute;
|
||||
.ovk-modal-player-window {
|
||||
box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.2);
|
||||
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;
|
||||
transition: color 200ms ease-in-out;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.top-part .clickable:hover {
|
||||
color: #ffffff;
|
||||
.ovk-modal-player-window #ovk-player-part .top-part .top-part-buttons, .ovk-modal-player-window #ovk-player-part .bottom-part {
|
||||
color: #515151;
|
||||
}
|
||||
|
||||
.ovk-fullscreen-player .bsdn_teaserTitleBox span {
|
||||
color: unset;
|
||||
font-size: unset;
|
||||
.ovk-modal-player-window #ovk-player-part .top-part .top-part-buttons a, .ovk-modal-player-window #ovk-player-part .bottom-part a {
|
||||
color: #515151;
|
||||
}
|
||||
|
||||
.ovk-fullscreen-player .bsdn-player {
|
||||
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 {
|
||||
.ovk-modal-player-window #ovk-player-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ovk-modal-player-window #ovk-player-info.shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ovk-modal-player-window #ovk-player-info {
|
||||
background: white;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 30px;
|
||||
min-height: 200px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.left_block {
|
||||
padding-left: 20px;
|
||||
/*padding-top: 20px;*/
|
||||
width: 75%;
|
||||
float: left;
|
||||
background: white;
|
||||
padding-right: 6px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
.ovk-modal-player-window .media-page-wrapper-comments {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right_block {
|
||||
padding-left: 10px;
|
||||
/*padding-top: 20px;*/
|
||||
width: 20%;
|
||||
border-left: 1px solid gray;
|
||||
float: right;
|
||||
.ovk-modal-player-window .center-part {
|
||||
text-align: center;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bottom-part span {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bottom-part .gray {
|
||||
.ovk-modal-player-window .center-part .gray {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.ovk-fullscreen-dimmer {
|
||||
/* спижжено у пулла с несколькими картинками там где просмотрщик фоток */
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.v_author {
|
||||
margin-top: 20px;
|
||||
.ovk-modal-player-window .center-part .bsdn, .ovk-modal-player-window .center-part .bsdn-player {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.miniplayer {
|
||||
position: absolute;
|
||||
top:0;
|
||||
background: rgba(54, 54, 54, 0.9);
|
||||
background: rgba(54, 54, 54, 0.95);
|
||||
border-radius: 3px;
|
||||
min-width: 299px;
|
||||
min-height: 192px;
|
||||
padding-top: 3px;
|
||||
z-index: 9999;
|
||||
z-index: 7777;
|
||||
padding: 2px 7px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.miniplayer .bsdn-player {
|
||||
max-height: 150px;
|
||||
.miniplayer .miniplayer-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.miniplayer .fplayer {
|
||||
max-width: 286px;
|
||||
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;
|
||||
.miniplayer .miniplayer-head b {
|
||||
color: white;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui-draggable {
|
||||
position:fixed !important;
|
||||
.miniplayer .miniplayer-head .miniplayer-head-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.miniplayer-actions img {
|
||||
max-width: 11px;
|
||||
.miniplayer .miniplayer-head .miniplayer-head-buttons div {
|
||||
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 {
|
||||
max-width: 260px;
|
||||
max-height: 160px;
|
||||
.miniplayer .miniplayer-head .miniplayer-head-buttons div:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.miniplayer-actions img:hover {
|
||||
opacity: 100%;
|
||||
.miniplayer .miniplayer-head .miniplayer-head-buttons #__miniplayer_return {
|
||||
background-position: -28px 0px;
|
||||
}
|
||||
|
||||
#vidComments {
|
||||
margin-top: 10px;
|
||||
.miniplayer .miniplayer-head .miniplayer-head-buttons #__miniplayer_close {
|
||||
background-position: -12px 0px;
|
||||
}
|
||||
|
||||
.showMoreComments {
|
||||
background: #eaeaea;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
user-select: none;
|
||||
margin-top: 10px;
|
||||
.miniplayer .miniplayer-head-buttons {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
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;
|
||||
.miniplayer .miniplayer-body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-arrow, .left-arrow {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-in-out;
|
||||
margin-left: -50px;
|
||||
background: none;
|
||||
height: 449px;
|
||||
width: 57px;
|
||||
user-select: none;
|
||||
.miniplayer .miniplayer-body .bsdn {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-arrow img, .left-arrow img {
|
||||
user-select: none;
|
||||
opacity: 5%;
|
||||
transition: all 200ms ease-in-out;
|
||||
.miniplayer .miniplayer-body .bsdn .bsdn-player {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-arrow:hover, .left-arrow:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.right-arrow img:hover, .left-arrow img:hover {
|
||||
opacity: 50%;
|
||||
.miniplayer .miniplayer-body iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 = []
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2016,7 +2016,7 @@
|
|||
|
||||
/* Fullscreen player */
|
||||
|
||||
"hide_player" = "Скрыть";
|
||||
"hide_player" = "Свернуть";
|
||||
"close_player" = "Закрыть";
|
||||
"show_comments" = "Показать информацию";
|
||||
"close_comments" = "Скрыть информацию";
|
||||
|
|
|
|||
Loading…
Reference in a new issue