public folder, update wrapper

public/.htaccess

@@ -0,0 +1,7 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.php [QSA,L]
+
+# Disable index view
+Options -Indexes

public/index.php

@@ -0,0 +1,14 @@
+<?php
+require __DIR__ . "/../vendor/autoload.php";
+
+// LOAD DOTENV
+$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
+$dotenv->safeLoad();
+
+// ROUTER
+$router = new Bramus\Router\Router();
+$router->setNamespace('\App\Controllers');
+
+require __DIR__ . '/../routes.php';
+
+$router->run();

public/scripts/feed.js

@@ -0,0 +1,125 @@
+var opened_video_id = null
+
+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_watermark = document.getElementById('download_watermark')
+const download_nowatermark = document.getElementById('download_nowatermark')
+const share_input = document.getElementById('share_input')
+
+const getVideoDataById = id => {
+  const el = document.getElementById(id)
+  if (el) {
+    opened_video_id = id
+    return el.dataset
+  }
+  return false
+}
+
+const isModalActive = () => modal.classList.contains('is-active')
+
+const toggleButton = (id, force) => document.getElementById(id).toggleAttribute('disabled', force)
+
+// -- MODAL -- //
+const swapData = ({ video_url, desc, video_download_watermark, video_download_nowatermark, video_share_url, music_title, music_url }) => {
+  video.src = video_url
+  item_title.innerText = desc
+  download_watermark.href = video_download_watermark
+  download_nowatermark.href = video_download_nowatermark
+  share_input.value = video_share_url
+  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 => {
+  if (opened_video_id) {
+    const el = document.getElementById(opened_video_id)
+    if (el) {
+      if (forward) {
+        return el.nextElementSibling
+      }
+      return el.previousElementSibling
+    }
+  }
+  return null
+}
+
+const moveVideo = forward => {
+  // Re-enable buttons
+  toggleButton('back-button', false)
+  toggleButton('next-button', false)
+  const new_el = getPrevOrNext(forward)
+  if (new_el) {
+    opened_video_id = new_el.id
+    swapData(new_el.dataset)
+  } else {
+    // Max reached, disable buttons depending on direction
+    if (forward) {
+      toggleButton('next-button', true)
+    } else {
+      toggleButton('back-button', true)
+    }
+  }
+}
+
+// EVENTS //
+const openVideo = video_id => {
+  if (isModalActive()) {
+    const dataset = getVideoDataById(video_id)
+    if (dataset) {
+      swapData(dataset)
+    }
+  } else {
+    showModal(video_id)
+  }
+}
+
+const swapImages = e => {
+  const div = e.target
+  const img = div.children[0]
+  const gif = div.children[1]
+  if (!gif.src) {
+    gif.src = gif.dataset.src
+  }
+  img.classList.toggle('hidden')
+  gif.classList.toggle('hidden')
+}
+
+const copyShare = () => {
+  share_input.select();
+  navigator.clipboard.writeText(share_input.value);
+  alert('Copied!')
+}
+
+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))
+
+// Image hover
+const images = document.getElementsByClassName("clickable-img")
+for (let i = 0; i < images.length; i++) {
+  images[i].addEventListener('mouseenter', swapImages, false)
+  images[i].addEventListener('mouseout', swapImages, false)
+}

public/scripts/navbar.js

@@ -0,0 +1,6 @@
+const navbar_menu = document.getElementById('navbar-menu')
+const burger = document.getElementById('navbar-burger')
+burger.addEventListener('click', () => {
+  burger.classList.toggle('is-active')
+  navbar_menu.classList.toggle('is-active')
+})

public/styles/feed.css

@@ -0,0 +1,23 @@
+#video {
+	height: 100%;
+	overflow: hidden;
+}
+
+figure {
+	position: relative;
+	display: inline-block;
+}
+
+.hidden {
+	display: none;
+}
+
+.clickable-img {
+	cursor: pointer;
+}
+
+.clickable-img img {
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}