proxitok/scripts/feed.js

const video = document.getElementById('video')
const item_title = document.getElementById('item_title')
const audio = document.getElementById('audio')
const audio_title = document.getElementById('audio_title')
const modal = document.getElementById('modal')
const download_button = document.getElementById('download_button')

// -- HELPERS -- //
const getHash = () => window.location.hash.substring(1)

const getVideoDataById = (id) => {
  const el = document.getElementById(id)
  if (el) {
    return el.dataset
  }
  return false
}

const isModalActive = () => modal.classList.contains('is-active')

const toggleButton = (id, force) => document.getElementById(id) ? document.getElementById(id).toggleAttribute('disabled', force) : alert('That button does not exist')

// -- MODAL -- //
const swapData = ({ video_url, desc, video_download, music_title, music_url }) => {
  video.src = video_url
  item_title.innerText = desc
  download_button.href = video_download
  audio_title.innerText = music_title
  audio.src = music_url
}

const showModal = (id) => {
  const dataset = getVideoDataById(id)
  if (dataset) {
    swapData(dataset)
    modal.classList.toggle('is-active')
    video.play()
  }
}

const hideModel = () => {
  video.pause()
  audio.pause()
  video.currentTime = 0
  modal.classList.toggle('is-active')
  toggleButton('back-button', false)
  toggleButton('next-button', false)
  history.pushState('', document.title, window.location.pathname + window.location.search)
}

const getPrevOrNext = (forward) => {
  const hash = getHash()
  if (hash) {
    const el = document.getElementById(hash)
    if (el) {
      if (forward) {
        return el.parentElement.nextElementSibling ? el.parentElement.nextElementSibling.children[0] : null
      }
      return el.parentElement.previousElementSibling ? el.parentElement.previousElementSibling.children[0] : null
    }
  }
  return null
}

const moveVideo = (forward) => {
  // Re-enable buttons
  toggleButton('back-button', false)
  toggleButton('next-button', false)
  const new_el = getPrevOrNext(forward)
  if (new_el) {
    window.location.hash = new_el.id
  } else {
    // Max reached, disable buttons depending on direction
    if (forward) {
      toggleButton('next-button', true)
    } else {
      toggleButton('back-button', true)
    }
  }
}

// EVENTS //
const hashChange = () => {
  if (window.location.hash) {
    const hash = getHash()
    if (hash) {
      // Check first if the modal is already active
      if (isModalActive()) {
        // If it is, get hash video id and swap data
        const dataset = getVideoDataById(hash)
        if (dataset) {
          swapData(dataset)
          video.play()
        }
      } else {
        showModal(hash)
      }
    }
  }
}

const swapImages = (e, mode) => {
  let img = null
  let gif = null
  if (mode === 'gif') {
    const a = e.target
    img = a.children[0]
    gif = a.children[1]
  } else if (mode === 'img') {
    gif = e.target
    img = e.target.parentElement.children[0]
  }

  if (img && gif) {
    if (!gif.src) {
      gif.src = gif.dataset.src
    }
    img.classList.toggle('hidden')
    gif.classList.toggle('hidden')
  }
}

document.getElementById('modal-background').addEventListener('click', hideModel)
document.getElementById('modal-close').addEventListener('click', hideModel)
document.getElementById('back-button').addEventListener('click', () => moveVideo(false))
document.getElementById('next-button').addEventListener('click', () => moveVideo(true))
window.addEventListener('hashchange', hashChange, false)

// Image hover
const images = document.getElementsByClassName("clickable-img")
for (let i = 0; i < images.length; i++) {
  images[i].addEventListener('mouseenter', e => swapImages(e, 'gif'), false)
  images[i].addEventListener('mouseout', e => swapImages(e, 'img'), false)
}


hashChange()