Add buttons to open streams in new tab

NoAgenda · Jun 18, 2024 · a69c393 · a69c393
1 parent 2b4211d
commit a69c393
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/client/components/InlinePlayer.vue b/client/components/InlinePlayer.vue
@@ -16,6 +16,7 @@
 			<span @click="togglePlaying">
 				{{ title }}
 			</span>
+			<a :href="streamUrl" class="newtab" title="Open stream in new tab" target="_blank"></a>
 		</div>
 		<div class="ip-topic">{{ currentlyPlaying }}</div>
 		<div v-if="playing" class="ip-footer">
@@ -41,6 +42,7 @@ export default defineComponent({
 	setup(props) {
 		const playing = ref(Player.playing && props.music === Player.music);
 		const title = props.music ? "No Agenda Stream v4v Music" : "No Agenda Stream";
+		const streamUrl = props.music ? "https://listen.noagendastream.com/v4vmusic?type=.mp3" : "https://listen.noagendastream.com/noagenda?type=.mp3";
 		const currentlyPlaying = ref(props.music ? Player.musicTitle : Player.title);
 		const volume = ref(100);
 
@@ -68,6 +70,7 @@ export default defineComponent({
 			play,
 			playing,
 			pause,
+			streamUrl,
 			title,
 			togglePlaying,
 			volume,

diff --git a/client/css/style.css b/client/css/style.css
@@ -291,6 +291,7 @@ p {
 #player button.play::before,
 #player button.pause::before,
 #player button.volume::before,
+.inline-player a.newtab::before,
 .inline-player button.play::before,
 .inline-player button.pause::before,
 .inline-player button.volume::before,
@@ -363,6 +364,7 @@ p {
 #player button.volume-high::before { content: "\f028"; /* http://fontawesome.io/icon/volume-high/ */ }
 #player button.volume-low::before { content: "\f027"; /* http://fontawesome.io/icon/volume-low/ */ }
 #player button.volume-muted::before { content: "\f6a9"; /* http://fontawesome.io/icon/volume-xmark/ */ }
+.inline-player a.newtab::before { content: "\f35d"; /* http://fontawesome.io/icon/external-link-alt/ */ }
 .inline-player button.play::before { content: "\f04b"; /* http://fontawesome.io/icon/play/ */ }
 .inline-player button.pause::before { content: "\f04d"; /* http://fontawesome.io/icon/stop/ */ }
 .inline-player button.volume-high::before { content: "\f028"; /* http://fontawesome.io/icon/volume-high/ */ }
@@ -3026,6 +3028,7 @@ a.btn:hover,
 	padding: 0 6px;
 }
 
+.inline-player .ip-header a,
 .inline-player .ip-header button,
 .inline-player .ip-footer button {
 	color: #607992;
@@ -3038,10 +3041,12 @@ a.btn:hover,
 	transition: opacity .2s;
 }
 
+.inline-player .ip-header a::before,
 .inline-player .ip-header button::before,
 .inline-player .ip-footer button::before {
 	line-height: 36px;
 	width: 36px;
+	text-align: center;
 }
 
 .inline-player .ip-header span {

diff --git a/client/index.html.tpl b/client/index.html.tpl
@@ -51,12 +51,14 @@
 					<div class="inline-player">
 						<div class="ip-header">
 							<span>No Agenda Stream</span>
+							<a href="https://listen.noagendastream.com/noagenda?type=.mp3" class="newtab" title="Open stream in new tab" target="_blank"></a>
 						</div>
 						<audio src="https://listen.noagendastream.com/noagenda?type=.mp3" preload="none" controls></audio>
 					</div>
 					<div class="inline-player">
 						<div class="ip-header">
 							<span>No Agenda Stream v4v Music</span>
+							<a href="https://listen.noagendastream.com/v4vmusic?type=.mp3" class="newtab" title="Open stream in new tab" target="_blank"></a>
 						</div>
 						<audio src="https://listen.noagendastream.com/v4vmusic?type=.mp3" preload="none" controls></audio>
 					</div>