21mm/Java.js at main · Marcis21/21mm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
//scripts.js

document.addEventListener("DOMContentLoaded", () => {
    // Globālais mainīgais hover pauzes kontrolei
    let pauseTriggeredByHover = false;

    const videoItems = document.querySelectorAll('.video-item');

    videoItems.forEach((item, index) => {
        const video = item.querySelector('video');
        const coverPhoto = item.querySelector('.cover-photo');
        const playButton = coverPhoto.querySelector('.play-button');
        const img = coverPhoto.querySelector('img');

        // Klikšķis uz cover-photo - atskaņo video
        coverPhoto.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                coverPhoto.classList.add('hidden');
                playButton.style.display = 'none';
            } else {
                video.pause();
                playButton.style.display = 'block';
            }
        });

        // Hover efekti tikai vizuāli
        item.addEventListener('mouseenter', () => {
            if (video.paused) {
                img.style.filter = 'grayscale(0)';
                img.style.transform = 'scale(1.05)';
            }
        });

        item.addEventListener('mouseleave', () => {
            if (video.paused) {
                img.style.filter = 'grayscale(100%)';
                img.style.transform = 'scale(1)';
            }
        });

        // Atjauno cover-photo stāvokli pēc video play/pause/end
        video.addEventListener('play', () => {
            coverPhoto.classList.add('hidden');
            playButton.style.display = 'none';
            img.style.filter = 'grayscale(0)';
        });

        video.addEventListener('pause', () => {
            coverPhoto.classList.remove('hidden');
            playButton.style.display = 'block';
            img.style.filter = 'grayscale(100%)';
            img.style.transform = 'scale(1)';
        });

        video.addEventListener('ended', () => {
            coverPhoto.classList.remove('hidden');
            playButton.style.display = 'block';
            img.style.filter = 'grayscale(100%)';
            img.style.transform = 'scale(1)';
        });
    });

    // Opcija, lai vienlaikus tikai viens video spēlētos
    videoItems.forEach((item, index) => {
        const video = item.querySelector('video');

        video.addEventListener('play', () => {
            videoItems.forEach((otherItem, otherIndex) => {
                if (otherIndex !== index) {
                    const otherVideo = otherItem.querySelector('video');
                    const otherCover = otherItem.querySelector('.cover-photo');
                    const otherPlay = otherCover.querySelector('.play-button');
                    const otherImg = otherCover.querySelector('img');

                    if (!otherVideo.paused) {
                        otherVideo.pause();
                        otherCover.classList.remove('hidden');
                        otherPlay.style.display = 'block';
                        otherImg.style.filter = 'grayscale(100%)';
                        otherImg.style.transform = 'scale(1)';
                    }
                }
            });
        });
    });
});