From 7461ddb811b56f44bff3b66e42ed9763783875d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Muhammed=20Mustafa=20Ak=C5=9Fam?=
 <mmustafaaksam@trakya.edu.tr>
Date: Mon, 11 Jul 2022 20:26:34 +0300
Subject: [PATCH] Create index.html

Created index.html file for quick access to video via another device.
---
 index.html | 281 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 281 insertions(+)
 create mode 100644 index.html

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..46ae793
--- /dev/null
+++ b/index.html
@@ -0,0 +1,281 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="cache-control" content="no-cache"/>
+    <title>RedditVideoMakerBot</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
+
+    <style>
+        .bd-placeholder-img {
+          font-size: 1.125rem;
+          text-anchor: middle;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          user-select: none;
+        }
+
+        @media (min-width: 768px) {
+          .bd-placeholder-img-lg {
+            font-size: 3.5rem;
+          }
+        }
+
+        .b-example-divider {
+          height: 3rem;
+          background-color: rgba(0, 0, 0, .1);
+          border: solid rgba(0, 0, 0, .15);
+          border-width: 1px 0;
+          box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+        }
+
+        .b-example-vr {
+          flex-shrink: 0;
+          width: 1.5rem;
+          height: 100vh;
+        }
+
+        .bi {
+          vertical-align: -.125em;
+          fill: currentColor;
+        }
+
+        .nav-scroller {
+          position: relative;
+          z-index: 2;
+          height: 2.75rem;
+          overflow-y: hidden;
+        }
+
+        .nav-scroller .nav {
+          display: flex;
+          flex-wrap: nowrap;
+          padding-bottom: 1rem;
+          margin-top: -1px;
+          overflow-x: auto;
+          text-align: center;
+          white-space: nowrap;
+          -webkit-overflow-scrolling: touch;
+        }
+        
+        #tooltip {
+          background-color: #333;
+          color: white;
+          padding: 5px 10px;
+          border-radius: 4px;
+          font-size: 13px;
+        }
+    </style>
+  </head>
+
+  <body>
+
+    <header>
+      <div class="navbar navbar-dark bg-dark shadow-sm">
+        <div class="container">
+          <a href="#" class="navbar-brand d-flex align-items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+            <strong>RedditVideoMakerBot</strong>
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <div class="album py-2 bg-light">
+        <div class="container">
+
+          <div class="row mt-2">
+            <div class="col-12 col-md-3 mb-3">
+              <input type="text" class="form-control" placeholder="Search videos" aria-label="Search videos" onkeyup="searchFilter()">
+            </div>
+          </div>
+
+          <div class="grid row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="videos">
+
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer class="text-muted py-5">
+      <div class="container">
+        <p class="float-end mb-1">
+          <a href="#">Back to top</a>
+        </p>
+        <p class="mb-1"><a href="https://getbootstrap.com/docs/5.2/examples/album/" target="_blank">Album</a> Example Theme by &copy; Bootstrap.</p>
+        <p class="mb-0">If your data is not refreshing, try to Hard reload(Ctrl + F5) and visit your local <a href="video_creation/data/videos.json" target="_blank">videos.json</a> file.</p>
+      </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
+    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
+
+    <script>
+      const intervals = [
+        { label: 'year', seconds: 31536000 },
+        { label: 'month', seconds: 2592000 },
+        { label: 'day', seconds: 86400 },
+        { label: 'hour', seconds: 3600 },
+        { label: 'minute', seconds: 60 },
+        { label: 'second', seconds: 1 }
+      ];
+
+      function timeSince(date) {
+        const seconds = Math.floor((Date.now() / 1000 - date));
+        const interval = intervals.find(i => i.seconds < seconds);
+        const count = Math.floor(seconds / interval.seconds);
+        return `${count} ${interval.label}${count !== 1 ? 's' : ''} ago`;
+      }
+
+      $(document).ready(function () {
+        $.getJSON("video_creation/data/videos.json",
+            function (data) {
+          data.sort((b, a) => a['time'] - b['time'])
+          var video = '';
+          $.each(data, function (key, value) {
+
+            video += '<div class="col">';
+            video += '<div class="card shadow-sm">';
+            //keeping original themed image card for future thumbnail usage video += '<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">r/'+value.subreddit+'</text></svg>';
+
+            video += '<div class="card-body">';
+            video += '<p class="card-text">r/'+value.subreddit+' • '+checkTitle(value.reddit_title, value.filename)+'</p>';
+            video += '<div class="d-flex justify-content-between align-items-center">';
+            video += '<div class="btn-group">';
+            video += '<a href="https://www.reddit.com/r/'+value.subreddit+'/comments/'+value.id+'/" class="btn btn-sm btn-outline-secondary" target="_blank">View</a>';
+            video += '<a href="results/'+value.subreddit+'/'+value.filename+'" class="btn btn-sm btn-outline-secondary" download>Download</a>';
+            video += '</div>';
+            video += '<div class="btn-group">';
+            video += '<button type="button" data-toggle="tooltip" id="copy" data-original-title="Copy to clipboard" class="btn btn-sm btn-outline-secondary" data-clipboard-text="'+getCopyData(value.subreddit, value.reddit_title, value.filename, value.background_credit)+'"><i class="bi bi-card-text"></i></button>';
+            video += '<button type="button" data-toggle="tooltip" id="copy" data-original-title="Copy to clipboard" class="btn btn-sm btn-outline-secondary" data-clipboard-text="'+checkTitle(value.reddit_title, value.filename)+' #Shorts #reddit"><i class="bi bi-youtube"></i></button>';
+            video += '<button type="button" data-toggle="tooltip" id="copy" data-original-title="Copy to clipboard" class="btn btn-sm btn-outline-secondary" data-clipboard-text="'+checkTitle(value.reddit_title, value.filename)+' #reddit"><i class="bi bi-instagram"></i></button>';
+            video += '</div>';
+            video += '<small class="text-muted">'+timeSince(value.time)+'</small>';
+            video += '</div>';
+            video += '</div>';
+            video += '</div>';
+            video += '</div>';
+
+          });
+          
+          $('#videos').append(video);
+        });
+      });
+
+      $(document).ready(function(){
+        $('[data-toggle="tooltip"]').tooltip();
+        $('[data-toggle="tooltip"]').on('click', function(){
+          $(this).tooltip('hide');
+        });
+      });
+
+      $('#copy').tooltip({
+                  trigger: 'click',
+                  placement: 'bottom'
+              });
+
+      function setTooltip(btn, message) {
+        $(btn).tooltip('hide')
+          .attr('data-original-title', message)
+          .tooltip('show');
+      }
+
+      function hoverTooltip(btn, message) {
+        $(btn).tooltip('hide')
+          .attr('data-original-title', message)
+          .tooltip('show');
+      }
+
+      function hideTooltip(btn) {
+        setTimeout(function() {
+          $(btn).tooltip('hide');
+        }, 1000);
+      }
+
+      function disposeTooltip(btn) {
+        setTimeout(function() {
+          $(btn).tooltip('dispose');
+        }, 1500);
+      }
+
+      var clipboard = new ClipboardJS('#copy');
+
+      clipboard.on('success', function(e) {
+          e.clearSelection();
+          console.info('Action:', e.action);
+          console.info('Text:', e.text);
+          console.info('Trigger:', e.trigger);
+          setTooltip(e.trigger, 'Copied!');
+          hideTooltip(e.trigger);
+          disposeTooltip(e.trigger);
+      });
+
+      clipboard.on('error', function(e) {
+          console.error('Action:', e.action);
+          console.error('Trigger:', e.trigger);
+          setTooltip(e.trigger, fallbackMessage(e.action));
+          hideTooltip(e.trigger);
+      });
+
+    function getCopyData(subreddit, reddit_title, filename, background_credit){
+
+        if (subreddit == undefined) {
+            subredditCopy = "";
+        } else {
+            subredditCopy = "r/" + subreddit + "\n\n";
+        }
+
+        const file = filename.slice(0, -4);
+        if (reddit_title == file) {
+            titleCopy = reddit_title;
+        } else {
+            titleCopy = file;
+        }
+
+        var copyData = "";
+        copyData += subredditCopy;
+        copyData += titleCopy;
+        copyData += "\n\nBackground credit: " + background_credit;
+        return copyData;
+    }
+
+      function getLink(subreddit, id, reddit_title) {
+        if (subreddit == undefined) {
+            return reddit_title;
+        } else {
+            return "<a target='_blank' href='https://www.reddit.com/r/" + subreddit + "/comments/" + id + "/'>"+ reddit_title +"</a>";
+        }
+        }
+
+      function checkTitle(reddit_title, filename) {
+          const file = filename.slice(0, -4);
+          if (reddit_title == file) {
+              return reddit_title;
+          } else {
+              return file;
+          }
+          }
+
+      var searchFilter = () => {
+          const input = document.querySelector(".form-control");
+          const cards = document.getElementsByClassName("col");
+          console.log(cards[1])
+          let filter = input.value
+          for (let i = 0; i < cards.length; i++) {
+              let title = cards[i].querySelector(".card-text");
+              if (title.innerText.toLowerCase().indexOf(filter.toLowerCase()) > -1) {
+                  cards[i].classList.remove("d-none")
+              } else {
+                  cards[i].classList.add("d-none")
+              }
+          }
+      }
+    </script>
+  </body>
+</html>
\ No newline at end of file