owncast/webroot/index.html

<head>
  <meta charset="UTF-8" />
  <title>Live stream test</title>

  <link
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"
  />
  <link href="./styles/layout.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

  <!-- Used for animating the scrolling of the chat div.  Can that be done other ways? -->
  <script src="vendor/jquery-2.1.4.min.js"></script>

  <script src="vendor/autolink.js"></script>
</head>

<body>
  <div id="app-container" class="flex">
    <header class="flex">
      <h1>
        Maybe a header
      </h1>
      <span>💬</span>

    </header>
    <div id="main-content-container" class="flex nxo-chat">
      <!-- LEFT CONTAINER SIDE-->
      <div class="flex main-cols left-col">

        <div id="video-container" class="flex shadow-md">
          <video
            id="video"
            preload="auto"
            autoplay
            controls
            src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
          ></video>
        </div>

        <div id="info">
          {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
          Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
<br>
If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
<br>
Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
<br>
If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.


        </div>
      </div>

      <!-- RIGHT CONTAINER SIDE-->
      <div class="flex main-cols right-col">

        <div id="chat-container">
          <div id="messages-container">
            Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.— can be viewed in the Health app on iPhone.

            <div v-for="(message, index) in messages">
              
                <div class="message flex">
                  <img
                    v-bind:src="message.image"
                    class="message-avatar rounded-full"
                  />
    
                  <div class="message-content">
                    <p class="message-author">{{ message.author }}</p>
                    <p class="message-text"v-html="message.linkedText()"></p>
                  </div>
              </div>
            </div>
          </div>
    
          <div id="chat-input-container" class="shadow-md">
            <form id="chat-form" class="flex" @submit="submitChatForm">
              <input type="hidden" name="inputAuthor" id="inputAuthor"  v-model="message.author" />

              <!-- Author -->
              <!-- <label class="control-label" for="inputAuthor">Author</label>
              <input
                id="inputAuthor"
                type="text"
                class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                placeholder="Name"
                v-model="message.author"
              /> -->
     

              <textarea
                id="inputBody"
                placeholder="Message"
                v-model="message.body"
                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight  focus:bg-white"
              >
              </textarea>
              
      
              <button
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
              >
                Send
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>


  </div>

  <script src="js/message.js"></script>
  <script src="js/app.js"></script>
</body>
</html>
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
+								<head>
 								  <meta charset="UTF-8" />
 								  <title>Live stream test</title>
 								  <link
 								    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
 								    rel="stylesheet"
 								  />
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								  <link href="./styles/layout.css" rel="stylesheet" />
-												Add endpoint for returning stream status

											
										
										
											2020-06-02 10:27:54 +03:00
+								  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
+								  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-												Use Vuejs for web UI

											
										
										
											2020-06-02 23:56:59 +03:00
+								  <!-- Used for animating the scrolling of the chat div.  Can that be done other ways? -->
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
+								  <script src="vendor/jquery-2.1.4.min.js"></script>
-												Support local development of index.html

											
										
										
											2020-06-03 04:37:05 +03:00
-												Support links and embeds in the chat

											
										
										
											2020-06-03 01:37:36 +03:00
+								  <script src="vendor/autolink.js"></script>
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
+								</head>
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								<body>
 								  <div id="app-container" class="flex">
 								    <header class="flex">
 								      <h1>
 								        Maybe a header
 								      </h1>
-												initial chat form layout

											
										
										
											2020-06-04 13:15:27 +03:00
+								      <span>💬</span>
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								    </header>
-												mobile considerations

											
										
										
											2020-06-04 12:31:41 +03:00
+								    <div id="main-content-container" class="flex nxo-chat">
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								      <!-- LEFT CONTAINER SIDE-->
 								      <div class="flex main-cols left-col">
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
-												initial chat form layout

											
										
										
											2020-06-04 13:15:27 +03:00
+								        <div id="video-container" class="flex shadow-md">
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								          <video
 								            id="video"
 								            preload="auto"
 								            autoplay
 								            controls
 								            src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
 								          ></video>
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
+								        </div>
-												Use Vuejs for web UI

											
										
										
											2020-06-02 23:56:59 +03:00
-												fix msg container

											
										
										
											2020-06-11 11:24:05 +03:00
+								        <div id="info">
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								          {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
-												fix msg container

											
										
										
											2020-06-11 11:24:05 +03:00
+								          Heart rate notifications.
 								Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
 								<br>
 								If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
 								<br>
 								Heart rate notifications.
 								Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
 								<br>
 								If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
 								        </div>
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								      </div>
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								      <!-- RIGHT CONTAINER SIDE-->
 								      <div class="flex main-cols right-col">
-												initial chat form layout

											
										
										
											2020-06-04 13:15:27 +03:00
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								        <div id="chat-container">
 								          <div id="messages-container">
-												fix msg container

											
										
										
											2020-06-11 11:24:05 +03:00
+								            Heart rate notifications.
 								Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.— can be viewed in the Health app on iPhone.
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								            <div v-for="(message, index) in messages">
-												style message items

											
										
										
											2020-06-10 00:12:50 +03:00
 								                <div class="message flex">
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								                  <img
 								                    v-bind:src="message.image"
-												style message items

											
										
										
											2020-06-10 00:12:50 +03:00
+								                    class="message-avatar rounded-full"
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								                  />
-												style message items

											
										
										
											2020-06-10 00:12:50 +03:00
+								                  <div class="message-content">
 								                    <p class="message-author">{{ message.author }}</p>
 								                    <p class="message-text"v-html="message.linkedText()"></p>
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								                  </div>
 								              </div>
 								            </div>
-												Add endpoint for returning stream status

											
										
										
											2020-06-02 10:27:54 +03:00
+								          </div>
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
-												initial chat form layout

											
										
										
											2020-06-04 13:15:27 +03:00
+								          <div id="chat-input-container" class="shadow-md">
 								            <form id="chat-form" class="flex" @submit="submitChatForm">
-												fix msg container

											
										
										
											2020-06-11 11:24:05 +03:00
+								              <input type="hidden" name="inputAuthor" id="inputAuthor"  v-model="message.author" />
-												initial chat form layout

											
										
										
											2020-06-04 13:15:27 +03:00
 								              <!-- Author -->
 								              <!-- <label class="control-label" for="inputAuthor">Author</label>
 								              <input
 								                id="inputAuthor"
 								                type="text"
 								                class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
 								                placeholder="Name"
 								                v-model="message.author"
 								              /> -->
 								              <textarea
 								                id="inputBody"
 								                placeholder="Message"
 								                v-model="message.body"
 								                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight  focus:bg-white"
 								              >
 								              </textarea>
 								              <button
 								                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
 								              >
 								                Send
 								              </button>
 								            </form>
 								          </div>
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
+								        </div>
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								      </div>
-												Add endpoint for returning stream status

											
										
										
											2020-06-02 10:27:54 +03:00
+								    </div>
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
-												Some basic positioning of HTML

											
										
										
											2020-06-02 09:50:32 +03:00
+								  </div>
-												WIP

											
										
										
											2020-05-24 03:57:49 +03:00
-												initial layout

											
										
										
											2020-06-04 11:31:47 +03:00
+								  <script src="js/message.js"></script>
 								  <script src="js/app.js"></script>
 								</body>
 								</html>