https://dvadokdeti.ru/local/templates/Dvadoctor/assets/js/video.js?17327817065925

1document.addEventListener('DOMContentLoaded', () => {
2    const videoContainer = document.getElementById('videoContainer');
3    const previewVideo = document.getElementById('previewVideo');
4    const fullVideo = document.getElementById('fullVideo');
5    const muteToggle = document.getElementById('muteToggle');
6    const volumeOn = document.getElementById('volumeOn');
7    const volumeOff = document.getElementById('volumeOff');
8    const closeButton = document.getElementById('closeButton');
9    const progressBarContainer = document.getElementById('progressBarContainer');
10    const progressBar = document.getElementById('progressBar');
11    const currentTime = document.getElementById('currentTime');
12    const playPause = document.getElementById('playPause');
13    const playIcon = document.getElementById('playIcon');
14    const pauseIcon = document.getElementById('pauseIcon');
15  
16    function formatTime(timeInSeconds) {
17      const minutes = Math.floor(timeInSeconds / 60);
18      const seconds = Math.floor(timeInSeconds % 60);
19      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
20    }
21  
22    previewVideo.addEventListener('click', () => {
23      videoContainer.classList.remove('small');
24      videoContainer.classList.add('large');
25      previewVideo.style.display = 'none';
26      fullVideo.style.display = 'block';
27      fullVideo.play();
28    });
29  
30    function showPlayPause() {
31      playPause.style.display = 'block';
32      playPause.style.animation = 'fadeIn 0.5s forwards';
33      setTimeout(() => {
34        playPause.style.animation = 'fadeOut 0.5s forwards';
35        setTimeout(() => {
36          playPause.style.display = 'none';
37        }, 300);
38      }, 300);
39    }
40  
41    fullVideo.addEventListener('click', () => {
42      if (fullVideo.paused) {
43        fullVideo.play();
44        playIcon.style.display = 'none';
45        pauseIcon.style.display = 'inline';
46      } else {
47        fullVideo.pause();
48        playIcon.style.display = 'inline';
49        pauseIcon.style.display = 'none';
50      }
51      showPlayPause();
52    });
53  
54    muteToggle.addEventListener('click', () => {
55      fullVideo.muted = !fullVideo.muted;
56      if (fullVideo.muted) {
57        volumeOn.style.display = 'none';
58        volumeOff.style.display = 'inline';
59      } else {
60        volumeOn.style.display = 'inline';
61        volumeOff.style.display = 'none';
62      }
63    });
64  
65    closeButton.addEventListener('click', () => {
66      fullVideo.pause();
67      fullVideo.currentTime = 0;
68      progressBar.style.width = '0%';
69      currentTime.textContent = '00:00';
70      videoContainer.classList.remove('large');
71      videoContainer.classList.add('small');
72      previewVideo.style.display = 'block';
73      fullVideo.style.display = 'none';
74    });
75  
76    fullVideo.addEventListener('timeupdate', () => {
77      const progressPercentage = (fullVideo.currentTime / fullVideo.duration) * 100;
78      progressBar.style.width = `${progressPercentage}%`;
79  
80      currentTime.textContent = formatTime(fullVideo.currentTime);
81    });
82  });
83   
84  var myElement = document.getElementById('videoContainer');
85  var fullVideo = document.getElementById('fullVideo');
86  
87  var initialPosition = { x: 0, y: 0 };
88  var currentTranslate = { x: 0, y: 0 };
89  var currentGesture = { x: 0, y: 0 };
90  var dragThreshold = 10; // Минимальное расстояние для перетаскивания
91  var isElementHidden = false; // Флаг для отслеживания состояния скрытия элемента
92  
93  // Начало касания
94  myElement.addEventListener('touchstart', function(event) {
95      if (event.touches.length > 1) {
96          return;
97      }
98  
99      initialPosition.x = event.touches[0].clientX - currentTranslate.x;
100      initialPosition.y = event.touches[0].clientY - currentTranslate.y;
101  });
102  
103  // Перетаскивание
104  myElement.addEventListener('touchmove', function(event) {
105      if (event.touches.length > 1) {
106          return;
107      }
108  
109      currentGesture.x = event.touches[0].clientX;
110      currentGesture.y = event.touches[0].clientY;
111  
112      if (Math.abs(currentGesture.x - initialPosition.x) > dragThreshold || 
113          Math.abs(currentGesture.y - initialPosition.y) > dragThreshold) {
114  
115          currentTranslate.x = currentGesture.x - initialPosition.x;
116          currentTranslate.y = currentGesture.y - initialPosition.y;
117  
118          // Перемещаем элемент
119          myElement.style.transform = 'translate(' + currentTranslate.x + 'px, ' + currentTranslate.y + 'px)';
120  
121          event.preventDefault();
122      }
123  });
124  
125  // Окончание касания
126  myElement.addEventListener('touchend', function(event) {
127      var rect = myElement.getBoundingClientRect();
128  
129      // Если элемент выходит за пределы экрана на 20px или более, скрываем его и ставим на паузу видео
130      if (rect.right - 20 >

130 window.innerWidth || rect.bottom - 20 > window.innerHeight || rect.left + 20 < 0 || rect.top + 20 < 0) {
131          myElement.style.display = 'none';
132          fullVideo.pause();
133          isElementHidden = true;
134      }
135      // Если элемент был скрыт и мы прокручиваем страницу вверх менее чем на 300px, показываем его снова
136      else if (window.scrollY < 300 && isElementHidden) {
137          isElementHidden = false;
138          myElement.style.display = 'block';
139          $('#videoContainer').animate({ 
140              opacity: 1,
141              marginRight: '0px',
142          }, 500);
143      }
144  });
145  
146  // Обработка кликов на контейнере
147  myElement.addEventListener('click', function(event) {
148      // Ваша логика для обработки кликов
149      console.log('Элемент был нажат.');
150  });