Added search function using YT data API. Fixed slider and scrollbar on web kit. Minor changes
All checks were successful
Gitea/YTDJ/pipeline/head This commit looks good

This commit is contained in:
2022-10-12 17:53:29 +02:00
parent 1e3e238582
commit ee487c5fd7
4 changed files with 249 additions and 82 deletions

View File

@@ -84,24 +84,53 @@
</div>
</div>
<div class="search-wrapper">
<div class="search-bar-wrapper">
<form id="search-bar">
<input id='search-query' type="search" minlength="4" maxlength="512" placeholder="Search for Youtube videos">
<button id='search-button' type="submit">Search</button>
</form>
</div>
<div id="search-results">
<div class="search-item" data-id="">
<div class="search-item-info">
<div class="search-item-thumbnail">
<img src="" alt="">
</div>
<div class="search-item-title">
<a href="#" rel="noreferrer" target="_blank"><span>Titre vidéo</span></a>
</div>
</div>
<div class="search-item-controls">
<input type="button" class="load-to-A" value="Load to desk A">
<input type="button" class="load-to-B" value="Load to desk B">
</div>
</div>
</div>
</div>
<h1>🔊 Mix like a pro youtube DJ! 🎧</h1>
<div class="footer">
<p><span id='shooting-stars-enable'></span> <span class="spacer"></span>
<a href="https://tflcl.xyz" target="_blank" >💜 Made by tflcl.xyz 💜</a>
<span class="spacer"></span>
<a href="#" id="contact-me">💌 Contact me 💌</a>
<span class="spacer"></span>
<a href="https://git.tflcl.xyz/tfl/YTDJ">🧩 Source code 🧩</a>
<a href="https://git.tflcl.xyz/tfl/YTDJ">🧩 More info / Source code 🧩</a>
</p>
</div>
</div>
<!-- REMOVE THIS LINE (Some light analytics to know how people use this website) -->
<script async defer data-website-id="c073e27d-91e4-47fa-bd38-578b7fe727eb" src="https://stats.tflcl.xyz/sucre.js"></script>
<!-- Background was first made using P5JS -->
<!-- <script src="/js/vendor/p5.js"></script>
<script src="/js/vendor/p5.svg.js"></script>
<script src="/js/sketch.js"></script> -->
<script src="https://apis.google.com/js/api.js"></script>
<script src="/js/main.js"></script>