feat: visual improvements

Author: philhartung

src/assets/style.css

@@ -181,7 +181,6 @@ span.copy::selection {
 
 #search-input {
 	float: right;
-	display: inline-block;
 	width: 25%;
 	margin-right: 10px;
 }

src/components/HeaderBar.vue

@@ -41,6 +41,24 @@
 		>
 			<i class="bi bi-floppy2-fill"></i>
 		</button>
+		<button
+			class="btn btn-sm btn-danger"
+			style="float: right"
+			v-if="page === 'stream' && selectedStream.manual"
+			title="Delete Stream"
+			@click="deleteStream(selectedStream.id)"
+		>
+			<i class="bi bi-trash3-fill"></i>
+		</button>
+		<button
+			class="btn btn-sm btn-primary me-2"
+			style="float: right"
+			v-if="page === 'stream'"
+			title="Copy SDP to Clipboard"
+			@click="copyClip(selectedStream.raw)"
+		>
+			<i class="bi bi-copy"></i>
+		</button>
 	</div>
 </template>
 
@@ -56,6 +74,7 @@ import {
 	persistentData,
 	saveSDP,
 	rawSDP,
+	selectedStream,
 } from "../app.js";
 
 export default {
@@ -72,8 +91,18 @@ export default {
 			goBack,
 			saveSDP,
 			rawSDP,
+			selectedStream,
 		};
 	},
+	methods: {
+		deleteStream(id) {
+			window.electronAPI.sendMessage({ type: "delete", data: id });
+			page.value = "streams";
+		},
+		copyClip(sdp) {
+			navigator.clipboard.writeText(sdp);
+		},
+	},
 };
 </script>
 

src/components/pages/StreamPage.vue

@@ -29,20 +29,45 @@
 						selectedStream.dante ||
 						selectedStream.manual ||
 						selectedStream.announce ||
+						(stream.groups &&
+							stream.groups[0] &&
+							stream.groups[0].type == 'DUP') ||
 						!selectedStream.isSupported
 					"
 				>
 					<b>Tags</b><br />
-					<span class="badge bg-primary me-1" v-if="selectedStream.dante"
+					<span
+						class="badge bg-primary me-1"
+						title="Dante device"
+						v-if="selectedStream.dante"
 						>Dante</span
 					>
-					<span class="badge bg-primary me-1" v-if="selectedStream.manual"
+					<span
+						class="badge bg-primary me-1"
+						title="ST 2022-7 redundant stream"
+						v-if="
+							selectedStream.groups &&
+							selectedStream.groups[0] &&
+							selectedStream.groups[0].type == 'DUP'
+						"
+						>2022-7</span
+					>
+					<span
+						class="badge bg-secondary me-1"
+						title="Manually added stream"
+						v-if="selectedStream.manual"
 						>Manual</span
 					>
-					<span class="badge bg-primary me-1" v-if="selectedStream.announce"
+					<span
+						class="badge bg-secondary me-1"
+						title="Stream is broadcasted on the network via SAP"
+						v-if="selectedStream.announce"
 						>SAP</span
 					>
-					<span class="badge bg-danger me-1" v-if="!selectedStream.isSupported"
+					<span
+						class="badge bg-danger me-1"
+						:title="selectedStream.unsupportedReason"
+						v-if="!selectedStream.isSupported"
 						>Unsupported</span
 					>
 				</li>
@@ -61,7 +86,10 @@
 					v-for="(media, index) in selectedStream.media"
 					:key="index"
 				>
-					<h5>Media {{ index + 1 }}</h5>
+					<h5>
+						Media
+						<span v-if="selectedStream.media.length > 1">#{{ index + 1 }}</span>
+					</h5>
 					<ul class="ul-hidden">
 						<li v-if="media.mid">
 							<b>Stream Identification</b><br />
@@ -88,7 +116,13 @@
 						</li>
 						<li>
 							<b>Codec</b><br />
-							<span class="copy">{{ media.rtp[0].codec }}</span>
+							<span v-if="media.rtp[0].codec == 'L24'" class="copy"
+								>24-bit PCM</span
+							>
+							<span v-else-if="media.rtp[0].codec == 'L16'" class="copy"
+								>16-bit PCM</span
+							>
+							<span v-else class="copy">{{ media.rtp[0].codec }}</span>
 						</li>
 						<li v-if="media.ptime">
 							<b>Packet Time</b><br />

src/components/pages/StreamsPage.vue

@@ -48,7 +48,6 @@
 				<th v-if="streamCount > 0">Channel</th>
 				<th></th>
 				<th></th>
-				<th></th>
 			</tr>
 		</thead>
 		<tbody>
@@ -77,11 +76,32 @@
 						>
 					</td>
 					<td>
-						<span class="badge bg-primary me-1" v-if="stream.dante">Dante</span>
-						<span class="badge bg-primary me-1" v-if="stream.manual"
+						<span
+							class="badge bg-primary me-1"
+							title="Dante device"
+							v-if="stream.dante"
+							>Dante</span
+						>
+						<span
+							class="badge bg-primary me-1"
+							title="ST 2022-7 redundant stream"
+							v-if="
+								stream.groups &&
+								stream.groups[0] &&
+								stream.groups[0].type == 'DUP'
+							"
+							>2022-7</span
+						>
+						<span
+							class="badge bg-secondary me-1"
+							title="Manually added stream"
+							v-if="stream.manual"
 							>Manual</span
 						>
-						<span class="badge bg-primary me-1" v-if="stream.announce"
+						<span
+							class="badge bg-secondary me-1"
+							title="Stream is broadcasted on the network via SAP"
+							v-if="stream.announce"
 							>SAP</span
 						>
 					</td>
@@ -129,21 +149,13 @@
 							@click="playStream(stream)"
 							v-if="stream.isSupported"
 						>
-							{{ stream.id === playing ? "Stop" : "Play" }}
+							<i v-if="stream.id === playing" class="bi bi-stop-fill"></i>
+							<i v-else class="bi bi-play-fill"></i>
 						</button>
 					</td>
 					<td>
 						<button class="btn btn-sm btn-primary" @click="viewStream(stream)">
-							View
-						</button>
-					</td>
-					<td>
-						<button
-							class="btn btn-sm btn-danger"
-							v-if="stream.manual"
-							@click="deleteStream(stream.id)"
-						>
-							Delete
+							<i class="bi bi-info-circle-fill"></i>
 						</button>
 					</td>
 				</tr>
@@ -202,6 +214,7 @@ export default {
 					if (stream.dante) tags += "Dante ";
 					if (stream.manual) tags += "Manual ";
 					if (stream.announce) tags += "SAP ";
+					if (stream.groups && stream.groups[0] && stream.groups[0].type == 'DUP') tags += "2022-7 ";
 					return tags.trim();
 				default:
 					return stream[key];
@@ -239,11 +252,6 @@ export default {
 			streamIndex,
 		};
 	},
-	methods: {
-		deleteStream(id) {
-			window.electronAPI.sendMessage({ type: "delete", data: id });
-		},
-	},
 };
 </script>
 

src/lib/sdp.js

@@ -237,7 +237,7 @@ const addStream = function (rawSDP, announce) {
 };
 
 const deleteStream = function (id) {
-	if (sessions[id].announce) {
+	if (sessions[id] && sessions[id].announce) {
 		announceStream(
 			sessions[id].raw,
 			sessions[id].origin.address,