player.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ChuChube</title>
  6. <meta name="description" content="">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <meta property="og:title" content="">
  9. <meta property="og:type" content="">
  10. <meta property="og:url" content="">
  11. <meta property="og:image" content="">
  12. <link rel="icon" type="image/png" href="favicon.png">
  13. <link rel="stylesheet" href="css/normalize.css">
  14. <link rel="stylesheet" href="css/fontawesome.css">
  15. <link rel="stylesheet" href="css/solid.css">
  16. <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
  17. <link rel="stylesheet" href="css/main.css">
  18. <meta name="theme-color" content="#fafafa">
  19. </head>
  20. <body>
  21. <a href="/">
  22. <img id="logo" src="img/logo-100.png" alt="logo" height="50px"/>
  23. </a>
  24. <div class="container">
  25. <div class="row">
  26. <div class="col-xl-6 col-sm-12">
  27. <div class="row">
  28. <form hidden id="addVideoForm" class="form-inline my-4">
  29. <div class="form-group">
  30. <label for="addVideo">Add Video</label>
  31. <input id="addVideo" class="form-control ml-2"/>
  32. </div>
  33. </form>
  34. <form id="searchVideoForm" class="form-inline my-4">
  35. <div class="form-group">
  36. <label for="searchVideo" class="sr-only">Search</label>
  37. <input id="searchVideo" class="form-control ml-2" placeholder="Search"/>
  38. </div>
  39. </form>
  40. </div>
  41. <div class="row">
  42. <div id="searchResultList" class="list-group col">
  43. <div id="searchResultTemplate" class="searchResult list-group-item list-group-item-action" hidden>
  44. <div class="row">
  45. <div class="searchResultThumbnail col-3"></div>
  46. <div class="col-9 searchResultTextContainer">
  47. <span class="h4 searchResultTitle">She</span><br/>
  48. <span class="searchResultChannel pr-3">Dodie - Topic</span>
  49. <span class="searchResultDescription">The most ethereal song ever produced. 100/10 best boi song ever</span>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="col-xl-6 my-4 col-sm-12">
  57. <div class="row">
  58. <div class="col-12">
  59. <button class="btn btn-link btn-sm text-secondary" id="showPlayerPlaceholder" hidden>Show</button>
  60. <div id="playerPlaceholder" class="d-flex justify-content-center my-4">
  61. <div>
  62. <button class="btn btn-outline-secondary" id="startPlayerButton">Start Player</button>
  63. <br/>
  64. <button class="btn btn-link btn-sm small text-secondary" id="hidePlayerPlaceholder"
  65. style="width:100%">Hide
  66. </button>
  67. </div>
  68. </div>
  69. <div id="playerContainer" class="py-4" hidden>
  70. <div class="row">
  71. <div class="btn-toolbar col-11">
  72. <div class="btn btn-group">
  73. <button id="leader-button" class="btn btn-outline-secondary disabled">
  74. No connection
  75. </button>
  76. </div>
  77. <div class="btn btn-group">
  78. <button id="play-button" class="btn btn-outline-secondary"><i class="fa fa-play"></i></button>
  79. <button id="pause-button" class="btn btn-outline-secondary"><i class="fa fa-pause"></i></button>
  80. <button id="next-button" class="btn btn-outline-secondary"><i class="fa fa-forward"></i></button>
  81. </div>
  82. </div>
  83. <span class="col-1">
  84. <a href="#" id="closePlayer">
  85. <i class="fa fa-times"></i>
  86. </a>
  87. </span>
  88. </div>
  89. <div id="player" class="pt-2"></div>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="row">
  94. <div class="col-12">
  95. <div id="videoList" class="list-group">
  96. <div id="videoListCardTemplate" class="videoListCard list-group-item" hidden>
  97. <div class="row">
  98. <div class="col-1">
  99. <div class="videoListCardMoveUp"><i class="fa fa-caret-up"></i></div>
  100. <div class="videoListCardMoveDown"><i class="fa fa-caret-down"></i></div>
  101. </div>
  102. <div class="videoListCardThumbnail col-3"></div>
  103. <div class="col-7 videoListCardTextContainer">
  104. <span class="h4 videoListCardTitle"></span><br/>
  105. <span class="videoListCardChannel pr-3"></span>
  106. <span class="videoListCardDescription"></span>
  107. </div>
  108. <div class="col-1">
  109. <button class="videoListCardDelete btn btn-outline-danger"><i
  110. class="fa fa-trash-alt"></i></button>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <footer class="footer mb-4"><a href="https://github.com/NielsOverkamp/ChuChube">Made by Niels Overkamp</a>&nbsp·&nbsp<a
  121. href="http://joetoep.student.utwente.nl">Based on JoeToep</a></footer>
  122. <script src="js/main.js" type="module"></script>
  123. </body>
  124. </html>