<div class="content post-editing-form">
<div class="valign user-heading">
<img src="{{ME avatar}}" class="img-circle">
<div>
<span>{{ME username}}</span>
<span class="pp_area">{{LANG reels}}</span>
</div>
<div id="pp_loader">
<span>0%</span>
</div>
</div>
<form class="form" id="upload-post-reels" action="{{CONFIG site_url}}/aj/posts/upload-post-reels">
<div class="form-group">
<textarea class="form-control" name="caption" rows="3" placeholder="{{LANG add_post_caption}}"></textarea>
</div>
<div class="form-group">
<!-- <div class="form-control selecet-file-control" onclick="$('#post-video').trigger('click');"> -->
<input type="hidden" id="txt-recording-duration" value="5000">
<div>
<style>
.blinking {-webkit-animation: 1s blink ease infinite;-moz-animation: 1s blink ease infinite;animation: 1s blink ease infinite;}
@keyframes "blink" {
from, to {opacity: 0;}
50% {opacity: 1;}
}
@-moz-keyframes blink {
from, to {opacity: 0;}
50% {opacity: 1;}
}
@-webkit-keyframes "blink" {
from, to {opacity: 0;}
50% {opacity: 1;}
}
button#btn-start-recording {background: none;border: none;cursor: pointer;}
button#btn-stop-recording{background: none;border: none;cursor: pointer;}
.butt_div_rec {width: 100%;text-align: center;}
</style>
<div class="butt_div_rec">
<button id="btn-start-recording" type="button">
<svg height="60" viewBox="0 0 497 497" width="60" xmlns="http://www.w3.org/2000/svg"> <g> <path d="m451 350h-406c-24.853 0-44-20.147-44-45v-113c0-14.265 5.637-27.98 15.993-36.224 7.685-6.119 17.419-9.776 28.007-9.776h407c24.853 0 45 20.147 45 45v115c0 10.588-3.657 20.322-9.776 28.008-8.244 10.355-21.959 15.992-36.224 15.992z" fill="#FD3018" /> <path d="m49 334c-17.673 0-32-14.327-32-32v-146.215c-10.355 8.245-17 20.95-17 35.215v115c0 24.853 20.147 45 45 45h407c14.265 0 26.97-6.645 35.215-17z" fill="#e94444" /> <path d="m307.912 285.785h-26.838c-1.657 0-3-1.343-3-3v-16.178c0-1.657 1.343-3 3-3h23.532c8.284 0 15-6.764 15-15.107s-6.716-15.107-15-15.107h-23.532c-1.657 0-3-1.343-3-3v-16.178c0-1.657 1.343-3 3-3h26.838c8.284 0 15-6.764 15-15.107s-6.716-15.107-15-15.107h-44.838c-8.284 0-14 7.764-14 16.107v102.785c0 8.343 5.716 16.107 14 16.107h44.838c8.284 0 15-6.764 15-15.107 0-8.344-6.716-15.108-15-15.108z" fill="#f9f8f9" /> <path d="m263.074 181c-8.284 0-15 6.764-15 15.107v104.785c0 8.344 6.716 15.107 15 15.107z" fill="#efedef" /> <g> <g> <path d="m418.172 315c-37.879 0-67.696-29.28-67.696-66.5 0-22.506 10.268-42.475 27.551-54.745 11.3-8.022 25.17-12.755 40.145-12.755 13.708 0 26.948 3.959 38.289 11.449 6.913 4.565 8.815 13.87 4.25 20.783-4.566 6.912-13.872 8.813-20.783 4.25-6.421-4.241-13.944-6.482-21.756-6.482-21.337 0-38.696 16.822-38.696 37.5s17.359 37.5 38.696 37.5c7.885 0 14.486-2.267 19.619-6.736.995-.866 1.944-1.824 2.824-2.85 5.395-6.288 14.863-7.013 21.151-1.62 6.288 5.394 7.013 14.863 1.619 21.151-.368.43-.743.854-1.124 1.273-1.505 1.654-4.104 3.22-5.769 4.67-10.602 9.232-23.198 13.112-38.32 13.112z" fill="#f9f8f9" /> </g> </g> <g> <path d="m430.172 306c-37.879 0-68.696-30.28-68.696-67.5 0-17.846 7.098-34.085 18.649-46.167-18.461 12.114-30.649 32.765-30.649 56.167 0 37.22 30.817 67.5 68.696 67.5 15.122 0 28.719-4.88 39.32-14.112 1.665-1.449 3.26-3.02 4.764-4.674-9.282 5.764-20.209 8.786-32.084 8.786z" fill="#efedef" /> </g> <path d="m191.865 266.128c-1.353-1.503-.858-3.883.981-4.726 14.913-6.836 25.229-21.35 25.229-38.113 0-23.317-19.958-42.288-44.49-42.288h-28.538c-.006 0-.012.001-.018.001l-.018-.002c-8.25-.463-14 6.919-14 15.182v103.395c0 8.077 5.207 16.027 13.275 16.407 8.614.406 15.725-6.458 15.725-14.983v-17.601c0-2.749 3.39-6.05 5.23-4.007l27.684 30.643c2.962 3.291 6.049 4.965 10.153 4.965 2.342 0 4.69.454 6.838-.648 1.13-.58 2.205-1.314 3.193-2.204 6.157-5.543 6.655-15.027 1.113-21.184zm-18.281-55.128c.506 0 1.007.023 1.502.069 7.18.661 13.988 3.069 13.988 12.219 0 9.318-6.732 11.49-13.899 12.207-.544.054-1.096.082-1.654.082l-10.344.044c-1.658.007-3.007-1.332-3.013-2.989l-.068-18.621c-.006-1.661 1.339-3.011 3-3.011z" fill="#f9f8f9" /> <g fill="#efedef"> <path d="m175.174 235.488.001.146 8.346-.057c7.918 0 14.553-5.628 14.553-12.289s-6.635-12.288-14.49-12.288h-8.499v.071c7.18.661 12.988 5.986 12.988 12.217.001 6.191-5.733 11.483-12.899 12.2z" /> <path d="m160.029 181.001c.006 0 .012-.001.018-.001h-.035z" /> <path d="m209.911 314.342-40.295-44.802c-3.377-3.754-9.604-1.366-9.604 3.684v10.174c-.002-.325.043-.878.357-1.441.625-1.12 2.044-1.785 3.339-1.488.783.179 1.298.659 1.549.938 8.89 9.876 17.78 19.751 26.669 29.627 2.962 3.291 7.049 4.965 11.153 4.965 2.583.001 5.136-.722 6.832-1.657z" /> <path d="m145.011 307.726v-126.726c-8.25-.463-15 5.918-15 14.182v105.395c0 8.077 6.207 15.027 14.275 15.407.297.014.588-.001.881-.004-.101-3.144-.156-8.041-.156-8.254z" /> </g> <path d="m99.011 248.5c0-18.613-15.089-33.702-33.702-33.702-4.09 0-8.011.729-11.638 2.063-12.878 4.739-21.064 17.116-21.064 31.639 0 18.613 14.089 32.702 32.702 32.702 14.523 0 26.9-8.186 31.639-21.064 1.335-3.627 2.063-7.548 2.063-11.638z" fill="#f9f8f9" /> <path d="m85.309 262.202c-18.613 0-33.702-15.089-33.702-33.702 0-4.091.73-8.01 2.065-11.637-12.878 4.739-22.065 17.115-22.065 31.637 0 18.613 15.089 33.702 33.702 33.702 14.523 0 26.899-9.186 31.638-22.065-3.627 1.335-7.547 2.065-11.638 2.065z" fill="#efedef" /> </g> </svg>
<svg height="12" width="12" class="blinking" style="display: none;"><circle cx="5" cy="5" r="3" fill="red" /></svg>
</button>
<button id="btn-stop-recording" type="button" disabled style="display: none;">
<svg height="30" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path style="fill:#FD3018;" d="M437.02,74.98C388.667,26.629,324.38,0,256,0C187.619,0,123.332,26.629,74.98,74.98 C26.629,123.332,0,187.619,0,256s26.629,132.668,74.98,181.02C123.332,485.371,187.619,512,256,512 c68.38,0,132.667-26.629,181.02-74.98C485.371,388.668,512,324.381,512,256C512,187.62,485.371,123.332,437.02,74.98z"/> <path style="fill:#E61E14;" d="M437.02,74.981C388.666,26.629,324.379,0,256,0h-0.001v512H256c68.38,0,132.667-26.628,181.02-74.979 C485.371,388.668,512,324.381,512,256C512,187.62,485.371,123.333,437.02,74.981z"/> <path style="fill:#F2F2F2;" d="M359.277,137.723H152.721c-8.284,0-15,6.716-15,15V359.28c0,8.284,6.716,15,15,15h206.557 c8.284,0,15-6.716,15-15V152.723C374.277,144.439,367.561,137.723,359.277,137.723z"/> <path style="fill:#D9D9D9;" d="M359.277,137.723H256V374.28h103.277c8.284,0,15-6.716,15-15V152.723 C374.277,144.439,367.561,137.723,359.277,137.723z"/> </svg>
</button>
</div>
</div>
<div class="embed-responsive embed-responsive-16by9" style="display: none">
<video id="output-video" width="320px" height="180px" muted></video>
<video id="recorded" playsinline loop controls width="320px" height="180px"
style="display: none;"></video>
</div>
<div class="valign selecet-file-control" onclick="$('#post-reels').trigger('click');">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 491.535 491.535" xml:space="preserve"> <rect x="0" y="474.278" style="fill:#f6f6f6;" width="368.896" height="17.244"/> <polygon style="fill:#fff;" points="86.969,0.013 368.878,0.013 368.878,474.287 0,474.287 0,86.981 "/> <polygon style="fill:#d1d1d1;" points="86.969,86.981 0,86.981 86.969,0.013 "/> <rect x="180.531" y="36.539" style="fill:#64798A;" width="311.004" height="345.958"/> <g> <rect x="194.765" y="53.281" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="445.276" y="53.281" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="194.765" y="123.405" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="445.276" y="123.405" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="194.765" y="193.518" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="445.276" y="193.518" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="194.765" y="263.642" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="445.276" y="263.642" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="194.765" y="333.734" style="fill:#FFFFFF;" width="31.995" height="31.995"/> <rect x="445.276" y="333.734" style="fill:#FFFFFF;" width="31.995" height="31.995"/> </g> <g> <rect x="244.7" y="53.281" style="fill:#27A2DB;" width="182.63" height="172.232"/> <rect x="244.7" y="251.814" style="fill:#27A2DB;" width="182.63" height="113.951"/> </g></svg>
<h5>{{LANG select_file}}</h5>
<span class="video-file-name">{{LANG no_file_choosen}}</span>
</div>
</div>
<div class="form-group publish">
<div class="loading_cont hidden"></div>
<button type="reset" class="btn btn-default btn-mat" id="close-anim-modal">{{LANG close}}</button>
<button type="submit" class="btn btn-main btn-mat">{{LANG publish}}</button>
</div>
<input class="hidden" type="file" name="video" id="post-reels" accept="video/*">
<input type="hidden" name="hash" value="<?php echo($context['csrf_token']) ?>">
</form>
</div>
<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://www.webrtc-experiment.com/gif-recorder.js"></script>
<script src="https://www.webrtc-experiment.com/getScreenId.js"></script>
<script src="https://www.webrtc-experiment.com/DetectRTC.js"> </script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script>
function progress(e) {
if (e.lengthComputable) {
var max = e.total;
var current = e.loaded;
var Percentage = (current * 100) / max;
$(".user-heading #pp_loader").find('span').html(Percentage.toFixed(0) + '%');
if (Percentage >= 100) {
$(".user-heading #pp_loader").find('span').html('Processing...').css('margin-right', "10px");
$(".speeding_wheel").hide();
}
}
}
jQuery(document).ready(function ($) {
// var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
function mobileAndTabletCheck() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
if (mobileAndTabletCheck()) {
$('#output-video').hide()
$('.butt_div_rec').hide()
} else {
console.log('This is Not a IOS device');
startCamera()
$('.embed-responsive').show()
}
var filesss = ''
var recordVideo; // globally accessible
var streamG; // globally accessible
var recordedBlobs;
var streaming = false
var inner = document.querySelector('.inner');
var video = document.querySelector('video');
function startCamera(){
navigator.getUserMedia({
video: true,
audio: { echoCancellation: true }
}, function (stream) {
video.srcObject = stream;
video.play();
streamG = stream
streaming = true
}, function (error) {
throw error;
});
}
document.getElementById('btn-start-recording').onclick = function () {
$('#btn-stop-recording').show();
$('.embed-responsive').show()
setTimeout(function () { $('#btn-stop-recording').click(); console.log('300000') }, 30000);
this.disabled = true;
$('#recorded').hide()
$('#output-video').show()
$('.blinking').show()
$('.selecet-file-control').hide()
// if (streaming = false) {
// startCamera()
// }
// navigator.getUserMedia({
// video: true,
// audio: { echoCancellation: true }
// }, function (stream) {
video.srcObject = streamG;
video.play();
// navigator.getUserMedia({
// video: true,
// audio: { echoCancellation: true }
// }, function (stream) {
// video.srcObject = stream;
// video.play();
// streamG = stream
// streaming = true
// }, function (error) {
// throw error;
// });
recordVideo = RecordRTC(streamG, {
type: 'video/webm;codecs=h264'
});
recordVideo.stream = streamG;
recordVideo.startRecording();
// }, function (error) {
// throw error;
// });
document.getElementById('btn-stop-recording').disabled = false;
};
document.getElementById('btn-stop-recording').onclick = function () {
this.disabled = true;
// document.getElementById('btn-start-recording').disabled = false;
$('.blinking').hide()
// downloadButton.disabled = false;
recordVideo.stopRecording(function (url) {
video.src = url;
video.download = 'video.webm';
$('#recorded').show()
const dataUri = window.URL.createObjectURL(recordVideo.getBlob())
$('#recorded').attr('src', dataUri)
recordedBlobs = recordVideo.getBlob()
filesss = new File([recordVideo.getBlob()], 'video.mp4', { type: 'video/mp4', lastModified: Date.now() });
delay(function () {
window.cframe = capture_video_frame('output-video', 'png');
}, 200);
$('#output-video').hide()
recordVideo.stream.stop();
recordVideo = null;
streaming = false
});
};
function blobToFile(theBlob, fileName) {
//A Blob() is almost a File() - it's just missing the two properties below which we will add
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
$("#post-reels").change(function (event) {
$('#recorded').show()
$('#output-video').hide()
$('.butt_div_rec').hide()
$('.embed-responsive').show()
try {
window.URL = window.URL || window.webkitURL;
var video_file = $(this).prop('files')[0];
filesss = video_file
var video_blob = window.URL.createObjectURL(video_file);
$("#recorded").html('<source src="' + video_blob + '" type="video/mp4">');
// $("#post_video_prnt").removeClass('hidden');
$("#recorded")[0].load();
delay(function () {
window.cframe = capture_video_frame('recorded', 'png');
$('.video-file-name').html('<div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>' + video_file.name + '</div>');
}, 200);
}
catch (e) {
$("body").removeClass('active');
$("#create-newpost").empty();
$("#pp_loader").fadeOut(100);
}
});
$("#upload-post-reels").submit(function (event) {
event.preventDefault();
if (filesss == '') {
$(".selecet-file-control").addClass('active');
return false;
}
let caption = $(this).find('textarea').val();
// let video = $(this).find('#reel_file').prop('files')[0];
let video = filesss
var thumb = new File([base64_2_blob(window.cframe.dataUri)], "thumb.png", {
type: "image/png"
});
if (!video || !window.cframe) {
return false;
}
var formData = new FormData();
formData.append('thumb', thumb);
formData.append('video', video);
formData.append('caption', caption);
var action = $(this).attr('action') + '?hash=' + $(this).find('input[name=hash]').val();
$(".user-heading #pp_loader").fadeIn(100);
$("#upload-post-reels").find('button[type="submit"]').attr('disabled', 'true');
console.log('Hello I am here')
console.log(action)
$.ajax({
processData: false,
url: action,
type: 'POST',
dataType: 'json',
data: formData,
contentType: false,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', progress, false);
}
return myXhr;
}
})
.done(function (data) {
if (data.status == 200) {
$(".home-posts-container").prepend(data.html);
}
if (data.message) {
$.toast(data.message, {
duration: 5000,
type: '',
align: 'top-right',
singleton: false
});
}
$("body").removeClass('active');
$("#create-newpost").empty();
$(".user-heading #pp_loader").fadeOut(100);
});
console.log('Hello I am hereeeeeee')
});
});
</script>
<!-- <?php
include $context['dirname_theme'].'/home/templates/home/js/script.upload.video.html';
?> -->