https://bishop-music.com/js/home.js

1$(function() {
2  const currentLang = $('body').data('lang');
3  const enPath = (currentLang === 'en' ? '../' : '');
4  const $thumbs = $('.main-movies');
5  let currentIndex = 0; // 現在のインデックスを記録
6
7  // ポップアップ初期化
8  $thumbs.magnificPopup({
9    disableOn: 600,
10    delegate: 'a',
11    type: 'inline',
12    callbacks: {
13      open: function() {
14        const $trigger = this.st.el;
15        const $li = $trigger.closest('li'); // 親の <li> を取得
16        currentIndex = $li.index(); // 何番目か記録
17        showContent(currentIndex);
18      },
19      close: function() {
20        // 動画を止める
21        const $audio = $('audio');
22        if ($audio.length > 0) {
23          $audio.get(0).pause();
24          $audio.attr('src', '');
25        } else {
26          $('#popup-video').get(0).pause();
27          $('#popup-video').attr('src', '');
28        }
29      }
30    }
31  });
32
33  // 共通：表示内容を更新する関数
34  function showContent(currentIndex) {
35    const $item = $thumbs.find('li').eq(currentIndex).find('a');
36    const mediaFile = $item.data('media');
37    const is_movie = (mediaFile.match(/\.mp4$/)) ? true: false;
38
39    if (is_movie) {
40      const imageFile = mediaFile.replace('.mp4', '.jpg');
41      $('.popup-left').html(`<video id="popup-video" src="${enPath}video/${mediaFile}" poster="${enPath}img/home/${imageFile}" controls></video>`);
42      // const $video = $('#popup-video');
43      // const video = $video.get(0);
44      // $video.on('loadedmetadata', function onMeta() {
45      //   $('#popup-duration').text(formatTime(video.duration));
46      //   video.removeEventListener('loadedmetadata', onMeta);
47      // });
48    } else {
49      const imageFile = mediaFile.replace('.mp3', '.jpg');
50      const audioHtml = audioPlayerHtml(`${enPath}audio/home/${mediaFile}`);
51      $('.popup-left').html(`<img id="popup-image" src="${enPath}img/home/${imageFile}">${audioHtml}`);
52      loadAudioPlayer('.audio-player');
53      $('#popup-image').on('click', function() {
54        $('.play-btn').trigger('click');
55      });
56    }
57
58    $('#popup-title').text($item.data('title'));
59    $('#popup-producer').text(`Music ${(currentLang === 'ja') ? 'Producer' : 'Supervisor'}: ${$item.data('producer')}`);
60    $('#popup-duration').text('');
61  }
62
63  function formatTime(seconds) {
64    const minutes = Math.floor(seconds / 60);
65    const remainingSeconds = Math.floor(seconds % 60);
66    const formattedMinutes = String(minutes).padStart(2, '0');
67    const formattedSeconds = String(remainingSeconds).padStart(2, '0');
68    return `${formattedMinutes}:${formattedSeconds}`;
69  }
70
71  // 「次へ」ボタン
72  $('#popup-next').on('click', function() {
73    currentIndex = (currentIndex + 1) % $thumbs.find('li').length; // 次のインデックス（ループ）
74    showContent(currentIndex);
75  });
76
77  // 「前へ」ボタン
78  $('#popup-prev').on('click', function() {
79    currentIndex = (currentIndex - 1 + $thumbs.find('li').length) % $thumbs.find('li').length; // 前のインデックス（ループ）
80    showContent(currentIndex);
81  });
82
83  $(document).on('click', '.main-movies li', function() {
84    if (!window.matchMedia('(max-width: 600px)').matches) return false;
85    const $this = $(this);
86    const $a = $('a', $this);
87    const mediaFile = $a.attr('data-media');
88    const is_movie = (mediaFile.match(/\.mp4$/)) ? true : false;
89
90    $('.main-movies video').remove();
91    $('.video-close').remove();
92    $('.audio-player').remove();
93
94    if (is_movie) {
95      $this.append(`<video src="${enPath}video/${mediaFile}" controls autoplay></video><button class="video-close"><svg viewBox="0 0 22 22" fill="currentColor" width="1em" height="1em"><path stroke="currentColor" fill="currentColor" d="M9.996 9.29L.707 0 0 .707l9.29 9.29L0 19.285l.707.707 9.29-9.29 9.289 9.29.707-.707-9.29-9.29 9.29-9.289L19.286 0l-9.29 9.29z" transform="translate(1 1)" stroke-linecap="round" fill-rule="evenodd"></path></svg></button>`);
96  
97      $('.video-close').on('click', function() {
98        const $close = $(this);
99        $close.prev('video').remove();
100        $close.remove();
101        return false;

102      })
103    } else {
104      if ($('audio').length > 0) return false;
105      // console.log("ok");
106      const audioHtml = audioPlayerHtml(`${enPath}audio/home/${mediaFile}`);
107      $this.append(audioHtml);
108      $this.append(`<button class="video-close"><svg viewBox="0 0 22 22" fill="currentColor" width="1em" height="1em"><path stroke="currentColor" fill="currentColor" d="M9.996 9.29L.707 0 0 .707l9.29 9.29L0 19.285l.707.707 9.29-9.29 9.289 9.29.707-.707-9.29-9.29 9.29-9.289L19.286 0l-9.29 9.29z" transform="translate(1 1)" stroke-linecap="round" fill-rule="evenodd"></path></svg></button>`)
109      loadAudioPlayer('.audio-player');
110      $('.play-btn').trigger('click');
111      $('.main-movies li:has(.audio-player) a').on('click', function() {
112        $('.play-btn').trigger('click');
113        return false;
114      });
115      $('.video-close').on('click', function() {
116        const $close = $(this);
117        $close.prev('.audio-player').remove();
118        $close.remove();
119        return false;
120      })
121    }
122    return false;
123  });
124});
125