add clipboard tooltips and balloon.css

jprjr · Mar 19, 2018 · 9e34d96 · 9e34d96
1 parent 5ef604c
commit 9e34d96
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 2 deletions.
diff --git a/LICENSE-balloon-css b/LICENSE-balloon-css
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Claudio Holanda
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -515,6 +515,10 @@ This project includes a copy of Pixabay's "JavaScript-autoComplete" library
 is licensed under an MIT-style license. The license is available
 as LICENSE-autocomplete-js.
 
+This project includes a copy of balloon.css (`static/css/balloon.css`),
+which is licensed under an MIT-style license. The balloon.css licence is
+available as LICENSE-balloon-css.
+
 This project includes a copy of zenscroll (`static/js/zenscroll-min.js`), which
 is public-domain code. The license for zenscroll is availble as LICENSE-zenscroll.
 

diff --git a/lib/multistreamer/views/layout.etlua b/lib/multistreamer/views/layout.etlua
@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/pure-min.css">
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.css">
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/auto-complete.css">
+  <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/balloon.min.css">
 </head>
 <body>
   <div class="pure-g header">

diff --git a/lib/multistreamer/views/stream-dashboard.etlua b/lib/multistreamer/views/stream-dashboard.etlua
@@ -1,13 +1,62 @@
 <script src="<%= url_for('site-root') %>static/js/hls.min.js"></script>
 <script src="<%= url_for('site-root') %>static/js/auto-complete.min.js"></script>
 <script src="<%= url_for('site-root') %>static/js/util.js"></script>
+<script src="<%= url_for('site-root') %>static/js/clipboard.min.js"></script>
+
 <h3><%= stream.name %></h3>
 
 <% render('multistreamer.views.stream-menu', { active_submenu = 'dashboard' }) %>
 
 <% if metadata_level == 2 then %>
-<p><strong>RTMP URL</strong> <code><%= public_rtmp_url %>/<%= rtmp_prefix %></code></p>
-<p><strong>Stream Key</strong> <button id="showBtn" type="button" class="pure-button">Show</button> <code id="stream-key"><%= stream.uuid %></code></p>
+<div class="pure-form-aligned">
+
+<div class="pure-control-group">
+<label for="rtmp_url">RTMP URL</label>
+<button id="copyRTMPBtn" type="button" class="pure-button" data-clipboard-text="<%= public_rtmp_url %>">Copy</button>
+<input type="text" id="rtmp_url" name="rtmp_url" value="<%= public_rtmp_url %>" readonly />
+</div>
+
+<div class="pure-control-group">
+<label for="stream_key">Stream Key</label>
+<button id="copyKeyBtn" type="button" class="pure-button" data-clipboard-text="<%= stream.uuid %>">Copy</button>
+<button id="showBtn" type="button" class="pure-button">Show</button>
+<input type="text" id="stream-key" value="<%= stream.uuid %>" readonly />
+</div>
+
+<script>
+var copyRTMPBtn = document.getElementById('copyRTMPBtn');
+var copyKeyBtn = document.getElementById('copyKeyBtn');
+var copyRTMPClip = new ClipboardJS(copyRTMPBtn);
+var copyKeyClip = new ClipboardJS(copyKeyBtn);
+
+copyRTMPClip.on('success',function(e) {
+    copyRTMPBtn.setAttribute('data-balloon','Copied!');
+    copyRTMPBtn.setAttribute('data-balloon-pos','up');
+    copyRTMPBtn.setAttribute('data-ballon-visible',true);
+});
+
+copyRTMPBtn.addEventListener('mouseleave',function() {
+    copyRTMPBtn.removeAttribute('data-balloon');
+    copyRTMPBtn.removeAttribute('data-balloon-pos');
+    copyRTMPBtn.removeAttribute('data-ballon-visible');
+});
+
+
+copyKeyClip.on('success',function(e) {
+    copyKeyBtn.setAttribute('data-balloon','Copied!');
+    copyKeyBtn.setAttribute('data-balloon-pos','up');
+    copyKeyBtn.setAttribute('data-ballon-visible',true);
+});
+
+copyKeyBtn.addEventListener('mouseleave',function() {
+    copyKeyBtn.removeAttribute('data-balloon');
+    copyKeyBtn.removeAttribute('data-balloon-pos');
+    copyKeyBtn.removeAttribute('data-ballon-visible');
+});
+
+</script>
+
+</div>
 <% end %>
 <% if metadata_level == 2 or chat_level > 0 then %>
 <p><a target="_blank" href="<%= url_for('stream-chat', { id = stream.id })%>?show_picture">Chat</a></p>

diff --git a/share/multistreamer/html/static/css/balloon.min.css b/share/multistreamer/html/static/css/balloon.min.css