You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

114 lines
5.9KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>WebRTC Text Chat</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <script src="./js/firebase.js"> </script>
  8. <script src="./js/data-connection.js"> </script>
  9. <link href="./normalize.css" rel="stylesheet">
  10. <link href="./style.css" rel="stylesheet">
  11. </head>
  12. <body>
  13. <svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  14. <defs>
  15. <symbol id="icon-play" viewBox="0 0 1024 1024">
  16. <title>play</title>
  17. <path class="path1" d="M854.938 485.734l-438.323-271.565c-31.949-20.941-58.061-5.478-58.061 34.304v527.155c0 39.782 26.163 55.194 58.061 34.253l438.374-271.565c0 0 15.565-10.957 15.565-26.317-0.051-15.309-15.616-26.266-15.616-26.266z"></path>
  18. </symbol>
  19. <symbol id="icon-pause" viewBox="0 0 1024 1024">
  20. <title>pause</title>
  21. <path class="path1" d="M691.2 153.6c-50.893 0-92.16 15.667-92.16 66.56v583.68c0 50.893 41.267 66.56 92.16 66.56s92.16-15.667 92.16-66.56v-583.68c0-50.893-41.267-66.56-92.16-66.56zM332.8 153.6c-50.893 0-92.16 15.667-92.16 66.56v583.68c0 50.893 41.267 66.56 92.16 66.56s92.16-15.667 92.16-66.56v-583.68c0-50.893-41.267-66.56-92.16-66.56z"></path>
  22. </symbol>
  23. <symbol id="icon-record" viewBox="0 0 1024 1024">
  24. <title>record</title>
  25. <path class="path1" d="M512 153.6c-197.939 0-358.4 160.461-358.4 358.4s160.461 358.4 358.4 358.4c197.888 0 358.4-160.461 358.4-358.4s-160.512-358.4-358.4-358.4z"></path>
  26. </symbol>
  27. <symbol id="icon-first" viewBox="0 0 1024 1024">
  28. <title>first</title>
  29. <path class="path1" d="M383.232 512c0 13.21 13.414 22.63 13.414 22.63l372.48 233.933c27.597 18.074 50.074 4.762 50.074-29.44v-454.246c0-34.253-22.477-47.565-50.074-29.491l-372.48 233.984c0 0.051-13.414 9.421-13.414 22.63zM204.8 274.278v475.443c0 45.466 31.334 59.392 76.8 59.392s76.8-13.926 76.8-59.341v-475.494c0-45.517-31.334-59.443-76.8-59.443s-76.8 13.978-76.8 59.443z"></path>
  30. </symbol>
  31. <symbol id="icon-last" viewBox="0 0 1024 1024">
  32. <title>last</title>
  33. <path class="path1" d="M627.354 489.37l-372.48-233.984c-27.546-18.022-50.074-4.762-50.074 29.542v454.195c0 34.304 22.528 47.514 50.074 29.491l372.48-233.933c0 0 13.466-9.472 13.466-22.63s-13.466-22.682-13.466-22.682zM742.4 214.835c-45.466 0-76.8 13.978-76.8 59.443v475.443c0 45.517 31.334 59.494 76.8 59.494s76.8-13.978 76.8-59.494v-475.443c0-45.466-31.334-59.443-76.8-59.443z"></path>
  34. </symbol>
  35. </defs>
  36. </svg>
  37. <div id="app">
  38. <div>
  39. <div id="main">
  40. <video src="webm.land/media/drs7.webm"></video>
  41. <div id="elapsedTime">1:45</div>
  42. <div id="duration">6:01</div>
  43. <div id="title">Johnny Day - Desert Sand</div>
  44. </div>
  45. <div id="controls" class="flex-container">
  46. <progress value=0.1></progress>
  47. <svg class="icon" id="previous"><use xlink:href="#icon-first"></use></svg>
  48. <svg class="icon" id="play"><use xlink:href="#icon-play"></use></svg>
  49. <!-- <svg class="icon" id="pause"><use xlink:href="#icon-pause"></use></svg>-->
  50. <svg class="icon" id="next"><use xlink:href="#icon-last"></use></svg></div>
  51. </div>
  52. <div id="playlist">
  53. <input type="text" autofocus placeholder="Add video link ...">
  54. <input type="text" autofocus placeholder="Add video title ...">
  55. <div>
  56. <ul>
  57. </div>
  58. <li>Save My Night (Mark Sixma Remix)</li>
  59. <li>Kaiju</li>
  60. <li>Die Neue Weit</li>
  61. <li>Static Room</li>
  62. <li>Torque</li>
  63. <li>Antimatter (Freak & Octagon Rmx)</li>
  64. <li>Call Me (Morten Granau Remix)</li>
  65. <li>Mysterious Orient</li>
  66. <li>Criaturas</li>
  67. <li>Different Reality</li>
  68. <li>Not Butter</li>
  69. <li>Save My Night (Mark Sixma Remix)</li>
  70. <li>Kaiju</li>
  71. <li>Die Neue Weit</li>
  72. <li>Static Room</li>
  73. <li>Torque</li>
  74. <li>Antimatter (Freak & Octagon Rmx)</li>
  75. <li>Call Me (Morten Granau Remix)</li>
  76. <li>Mysterious Orient</li>
  77. <li>Criaturas</li>
  78. <li>Different Reality</li>
  79. <li>Not Butter</li>
  80. <li>Save My Night (Mark Sixma Remix)</li>
  81. <li>Kaiju</li>
  82. <li>Die Neue Weit</li>
  83. <li>Static Room</li>
  84. <li>Torque</li>
  85. <li>Antimatter (Freak & Octagon Rmx)</li>
  86. <li>Call Me (Morten Granau Remix)</li>
  87. <li>Mysterious Orient</li>
  88. <li>Criaturas</li>
  89. <li>Different Reality</li>
  90. <li>Not Butter</li>
  91. </ul>
  92. </div>
  93. </div>
  94. <!--
  95. <table style="border-left: 1px solid black; border-right: 1px solid black; width: 100%;">
  96. <tr>
  97. <td>
  98. <div id="chat-output">
  99. </div>
  100. <input type="text" id="user-id" style="font-size: 1.2em; margin-right: 0; width: 5em;"
  101. placeholder="all" title="Enter user-id to send direct messages.">
  102. <input type="text" id="chat-input" style="font-size: 1.2em; margin-left: -.5em; width: 80%;"
  103. placeholder="chat message">
  104. </td>
  105. </tr>
  106. </table>
  107. <ul id="playlist">
  108. </ul>
  109. -->
  110. <script src="./js/bundle.js"></script>
  111. <!-- // <script src="./js/app.js"></script> -->
  112. </body>
  113. </html>