@extends('layouts/fullLayoutMaster')

@section('title', 'Ролики')

@section('vendor-style')

@endsection
@section('page-style')
<link href="{{ asset('vndrs/emojiarea/css/emoji.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="reels-container">
 <div class="video-container slider single-item">
		@include('includes/reels/card', ['reels' => $reels])
	</div>
		</div>
@endsection

@section('vendor-script')
	<script src="{{ asset('vndrs/emojiarea/js/jquery.emojiarea.min.js') }}"></script>
	<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
	
@endsection
@section('page-script')
<script src="{{ asset('vndrs/emojiarea/js/config.min.js') }}"></script>
<script src="{{ asset('vndrs/emojiarea/js/util.min.js') }}"></script>
<script src="{{ asset('vndrs/emojiarea/js/emoji-picker.min.js') }}"></script>
<script>
  $('.single-item').slick({
      vertical: true,
                verticalSwiping: true,
                slidesToShow: 1,
                autoplay: false,
				infinite: false,
				dots: false,
    prevArrow: false,
    nextArrow: false
    });
	$('.single-item').on('beforeChange', function(event, slick, currentSlide, nextSlide){
	//console.log('На какой сменился: ' + nextSlide + ' | Какой был: ' + currentSlide);
	if(nextSlide != currentSlide){
		//var $item = $('.slick-slide').children('[data-slick-index="'+currentSlide+'"]');
		pauseVideo(currentSlide);
		playVideo(nextSlide);
	}
});

$('.single-item').on('wheel', (function(e) {
  e.preventDefault();

  if (e.originalEvent.deltaY < 0) {
    $(this).slick('slickPrev');
  } else {
   
    $(this).slick('slickNext');
  }
}));

        const postVideo = document.querySelectorAll(".reels-post-video");
const videoPlayer = document.querySelectorAll(".video-player");
const post = document.querySelectorAll(".reels-post");
let isPlaying = true;

postVideo.forEach((item, index) => {
  item.loop = true;
  item.autoBuffer = true;
  videoPlayer[index].addEventListener("click", function () {
    isPlaying ? pauseVideo(index) : playVideo(index);
  });
});

function playVideo(index) {
	var id = post[index].getAttribute("id");
	$('#' + id + ' .video-icon-pause').remove();
  postVideo[index].play();
  isPlaying = true;
}

function pauseVideo(index) {
  postVideo[index].pause();
  isPlaying = false;
  $(postVideo[index]).after('<svg class="video-icon-pause" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">'+
'<path d="M19.07 19.0699C22.98 15.1599 22.98 8.82993 19.07 4.92993" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M4.93 4.92993C1.02 8.83993 1.02 15.1699 4.93 19.0699" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M8.70001 21.4099C9.77001 21.7799 10.88 21.96 12 21.96C13.12 21.95 14.23 21.7799 15.3 21.4099" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M8.70001 2.59009C9.77001 2.22009 10.88 2.04004 12 2.04004C13.12 2.04004 14.23 2.22009 15.3 2.59009" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M8.73999 12.0001V10.3302C8.73999 8.25016 10.21 7.40014 12.01 8.44014L13.46 9.28017L14.91 10.1201C16.71 11.1601 16.71 12.8602 14.91 13.9002L13.46 14.7401L12.01 15.5802C10.21 16.6202 8.73999 15.7701 8.73999 13.6901V12.0001Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
function unmute(id){
	if($('#reels'+ id + ' video').prop('muted') == true){
		$('#reels'+ id + ' video').prop('muted', false);
$('#reels'+ id + ' .unmute-btn').html(' <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">'+
'<path d="M2 10V14C2 16 3 17 5 17H6.43C6.8 17 7.17 17.11 7.49 17.3L10.41 19.13C12.93 20.71 15 19.56 15 16.59V7.41003C15 4.43003 12.93 3.29003 10.41 4.87003L7.49 6.70003C7.17 6.89003 6.8 7.00003 6.43 7.00003H5C3 7.00003 2 8.00003 2 10Z" stroke="currentColor" stroke-width="1.5"/>'+
'<path d="M18 8C19.78 10.37 19.78 13.63 18 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M19.83 5.5C22.72 9.35 22.72 14.65 19.83 18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	}else{
		$('#reels'+ id + ' video').prop('muted', true);
	$('#reels'+ id + ' .unmute-btn').html('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">'+
'<path d="M15 8.37003V7.41003C15 4.43003 12.93 3.29003 10.41 4.87003L7.49 6.70003C7.17 6.89003 6.8 7.00003 6.43 7.00003H5C3 7.00003 2 8.00003 2 10V14C2 16 3 17 5 17H7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M10.41 19.13C12.93 20.71 15 19.56 15 16.59V12.95" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M18.81 9.41992C19.71 11.5699 19.44 14.0799 18 15.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M21.15 7.80005C22.62 11.29 22.18 15.37 19.83 18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
'<path d="M22 2L2 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	}
	
	
}

$(function() {
        window.emojiPicker = new EmojiPicker({
          emojiable_selector: '[data-emojiable=true]',
          assetsPath: '/vndrs/emojiarea/img/',
          popupButtonClasses: 'fa fa-smile-o'
        });
        window.emojiPicker.discover();
      });
</script>
@endsection