index.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Owncast</title>
  5. <base target="_blank" />
  6. <meta charset="UTF-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  8. <link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png">
  9. <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png">
  10. <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png">
  11. <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png">
  12. <link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
  13. <link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
  14. <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
  15. <link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
  16. <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png">
  17. <link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png">
  20. <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
  21. <link rel="manifest" href="/manifest.json">
  22. <meta name="msapplication-TileColor" content="#ffffff">
  23. <meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png">
  24. <meta name="theme-color" content="#ffffff">
  25. <link href="/js/web_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
  26. <link href="/js/web_modules/videojs/video-js.min.css" rel="stylesheet" />
  27. <link href="/js/web_modules/@videojs/themes/fantasy/index.css" rel="stylesheet" />
  28. <link href="/styles/video.css" rel="stylesheet" />
  29. <link href="/styles/chat.css" rel="stylesheet" />
  30. <link href="/styles/user-content.css" rel="stylesheet" />
  31. <link href="/styles/app.css" rel="stylesheet" />
  32. <!-- The following script tags are not required for the app to run,
  33. however they will make it load a lot faster (fewer round trips) when HTTP/2 is used.
  34. If you wish to re-generate this list, run the following shell command
  35. (assuming a linux or unix-ish system):
  36. find webroot | grep -E '\.js$' | sed -E 's|webroot(.*)|<script type="preload" src="\1"></script>|'
  37. Don't load/preload app-standalone-chat.js or app-video-only.js.
  38. -->
  39. <script type="preload" src="/js/components/platform-logos-list.js"></script>
  40. <script type="preload" src="/js/components/chat/chat-input.js"></script>
  41. <script type="preload" src="/js/components/chat/message.js"></script>
  42. <script type="preload" src="/js/components/chat/content-editable.js"></script>
  43. <script type="preload" src="/js/components/chat/chat.js"></script>
  44. <script type="preload" src="/js/components/chat/chat-message-view.js"></script>
  45. <script type="preload" src="/js/components/chat/username.js"></script>
  46. <script type="preload" src="/js/components/external-action-modal.js"></script>
  47. <script type="preload" src="/js/components/player.js"></script>
  48. <script type="preload" src="/js/components/video-poster.js"></script>
  49. <script type="preload" src="/js/app.js"></script>
  50. <script type="preload" src="/js/web_modules/preact.js"></script>
  51. <script type="preload" src="/js/web_modules/micromodal/dist/micromodal.min.js"></script>
  52. <script type="preload" src="/js/web_modules/common/_commonjsHelpers-8c19dec8.js"></script>
  53. <script type="preload" src="/js/web_modules/markjs/dist/mark.es6.min.js"></script>
  54. <script type="preload" src="/js/web_modules/@joeattardi/emoji-button.js"></script>
  55. <script type="preload" src="/js/web_modules/htm.js"></script>
  56. <script type="preload" src="/js/web_modules/videojs/dist/video.min.js"></script>
  57. <script type="preload" src="/js/chat/register.js"></script>
  58. <script type="preload" src="/js/utils/helpers.js"></script>
  59. <script type="preload" src="/js/utils/user-colors.js"></script>
  60. <script type="preload" src="/js/utils/constants.js"></script>
  61. <script type="preload" src="/js/utils/chat.js"></script>
  62. <script type="preload" src="/js/utils/websocket.js"></script>
  63. </head>
  64. <body id="app-body" class="scrollbar-hidden bg-gray-300 text-gray-800">
  65. <div id="app">
  66. <div id="loading-logo-container">
  67. <img id="loading-logo" src="/logo">
  68. </div>
  69. </div>
  70. <script type="module">
  71. import { h, render } from '/js/web_modules/preact.js';
  72. import htm from '/js/web_modules/htm.js';
  73. const html = htm.bind(h);
  74. import App from '/js/app.js';
  75. render(html`<${App} />`, document.getElementById("app"), document.getElementById("loading-logo-container"));
  76. </script>
  77. <noscript>
  78. <style>
  79. .noscript {
  80. text-align: center;
  81. padding: 30px;
  82. display: flex;
  83. justify-content: center;
  84. align-items: center;
  85. flex-direction: column;
  86. font-size: large;
  87. }
  88. .noscript a {
  89. display: inline;
  90. color: blue;
  91. text-decoration: underline;
  92. }
  93. #app {
  94. display: none;
  95. }
  96. .logo {
  97. height: 200px;
  98. margin: 30px;
  99. }
  100. h2 {
  101. margin-top: 25px;
  102. margin-bottom: 5px;
  103. font-weight: bold;
  104. }
  105. </style>
  106. <div class="noscript">
  107. <img class="logo" src="/logo" />
  108. <br />
  109. <p>
  110. This website is powered by <a href="https://owncast.online" rel="noopener noreferrer" target="_blank">Owncast</a>.
  111. </p>
  112. <p>
  113. Owncast uses JavaScript for playing the HTTP Live Streaming (HLS) video, and its chat client. But your web browser does not seem to support JavaScript, or you have it disabled.
  114. </p>
  115. <p>
  116. For the best experience, you should use a different browser with JavaScript support. If you have disabled JavaScript in your browser, you can re-enable it.
  117. </p>
  118. <h2>
  119. How can I watch this stream without JavaScript?
  120. </h2>
  121. <p>
  122. You can open the URL of this website in your media player (such as <a href="https://mpv.io" rel="noopener noreferrer" target="_blank">mpv</a> or <a href="https://www.videolan.org/vlc/" rel="noopener noreferrer" target="_blank">VLC</a>) to watch the stream.
  123. </p>
  124. <h2>
  125. How can I chat with the others without JavaScript?
  126. </h2>
  127. <p>
  128. Currently, there is no option to use the chat without JavaScript.
  129. </p>
  130. </div>
  131. </noscript>
  132. </body>
  133. </html>