|
1 | 1 | <script src="<%= url_for('site-root') %>static/js/hls.min.js"></script>
|
2 | 2 | <script src="<%= url_for('site-root') %>static/js/auto-complete.min.js"></script>
|
3 | 3 | <script src="<%= url_for('site-root') %>static/js/util.js"></script>
|
| 4 | +<script src="<%= url_for('site-root') %>static/js/clipboard.min.js"></script> |
| 5 | + |
4 | 6 | <h3><%= stream.name %></h3>
|
5 | 7 |
|
6 | 8 | <% render('multistreamer.views.stream-menu', { active_submenu = 'dashboard' }) %>
|
7 | 9 |
|
8 | 10 | <% if metadata_level == 2 then %>
|
9 |
| -<p><strong>RTMP URL</strong> <code><%= public_rtmp_url %>/<%= rtmp_prefix %></code></p> |
10 |
| -<p><strong>Stream Key</strong> <button id="showBtn" type="button" class="pure-button">Show</button> <code id="stream-key"><%= stream.uuid %></code></p> |
| 11 | +<div class="pure-form-aligned"> |
| 12 | + |
| 13 | +<div class="pure-control-group"> |
| 14 | +<label for="rtmp_url">RTMP URL</label> |
| 15 | +<button id="copyRTMPBtn" type="button" class="pure-button" data-clipboard-text="<%= public_rtmp_url %>">Copy</button> |
| 16 | +<input type="text" id="rtmp_url" name="rtmp_url" value="<%= public_rtmp_url %>" readonly /> |
| 17 | +</div> |
| 18 | + |
| 19 | +<div class="pure-control-group"> |
| 20 | +<label for="stream_key">Stream Key</label> |
| 21 | +<button id="copyKeyBtn" type="button" class="pure-button" data-clipboard-text="<%= stream.uuid %>">Copy</button> |
| 22 | +<button id="showBtn" type="button" class="pure-button">Show</button> |
| 23 | +<input type="text" id="stream-key" value="<%= stream.uuid %>" readonly /> |
| 24 | +</div> |
| 25 | + |
| 26 | +<script> |
| 27 | +var copyRTMPBtn = document.getElementById('copyRTMPBtn'); |
| 28 | +var copyKeyBtn = document.getElementById('copyKeyBtn'); |
| 29 | +var copyRTMPClip = new ClipboardJS(copyRTMPBtn); |
| 30 | +var copyKeyClip = new ClipboardJS(copyKeyBtn); |
| 31 | + |
| 32 | +copyRTMPClip.on('success',function(e) { |
| 33 | + copyRTMPBtn.setAttribute('data-balloon','Copied!'); |
| 34 | + copyRTMPBtn.setAttribute('data-balloon-pos','up'); |
| 35 | + copyRTMPBtn.setAttribute('data-ballon-visible',true); |
| 36 | +}); |
| 37 | + |
| 38 | +copyRTMPBtn.addEventListener('mouseleave',function() { |
| 39 | + copyRTMPBtn.removeAttribute('data-balloon'); |
| 40 | + copyRTMPBtn.removeAttribute('data-balloon-pos'); |
| 41 | + copyRTMPBtn.removeAttribute('data-ballon-visible'); |
| 42 | +}); |
| 43 | + |
| 44 | + |
| 45 | +copyKeyClip.on('success',function(e) { |
| 46 | + copyKeyBtn.setAttribute('data-balloon','Copied!'); |
| 47 | + copyKeyBtn.setAttribute('data-balloon-pos','up'); |
| 48 | + copyKeyBtn.setAttribute('data-ballon-visible',true); |
| 49 | +}); |
| 50 | + |
| 51 | +copyKeyBtn.addEventListener('mouseleave',function() { |
| 52 | + copyKeyBtn.removeAttribute('data-balloon'); |
| 53 | + copyKeyBtn.removeAttribute('data-balloon-pos'); |
| 54 | + copyKeyBtn.removeAttribute('data-ballon-visible'); |
| 55 | +}); |
| 56 | + |
| 57 | +</script> |
| 58 | + |
| 59 | +</div> |
11 | 60 | <% end %>
|
12 | 61 | <% if metadata_level == 2 or chat_level > 0 then %>
|
13 | 62 | <p><a target="_blank" href="<%= url_for('stream-chat', { id = stream.id })%>?show_picture">Chat</a></p>
|
|
0 commit comments