Updating video player when switching scene page.

assets/components/header/notifications.vue

@@ -213,21 +213,19 @@ export default {
 .notification-body {
 	flex-grow: 1;
 	padding: .4rem 1rem .25rem .5rem;
+	overflow: hidden;
 }
 
 .notification-row {
 	display: flex;
 	align-items: center;
+	overflow: hidden;
 
 	&:not(:last-child) {
 		margin: 0 0 .1rem 0;
 	}
 }
 
-.notification-tidbit {
-	font-weight: bold;
-}
-
 .notification-favicon {
 	width: 1rem;
 	height: 1rem;
@@ -240,8 +238,14 @@ export default {
 	overflow: hidden;
 }
 
+.notification-tags {
+	white-space: nowrap;
+}
+
 .notification-actor,
 .notification-tag {
+	white-space: nowrap;
+
 	&:not(:last-child)::after {
 		content: ',';
 		padding: 0 .1rem 0 0;

assets/components/releases/banner.vue

@@ -17,7 +17,6 @@
 					@pause="playing = false; paused = true;"
 				/>
 
-
 				<Player
 					v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
 					:video="release.teaser"

assets/components/video/player.vue

@@ -6,19 +6,19 @@
 		class="player video-js vjs-big-play-centered"
 		@playing="$emit('play')"
 		@pause="$emit('pause')"
-	>
-		<source
-			:src="getPath(video)"
-			type="video/mp4"
-		>
-	</video>
+	/>
 </template>
 
 <script>
 import videoJs from 'video.js';
 import 'videojs-vr/dist/videojs-vr.min';
 
-function mounted() {
+function updatePlayer() {
+	this.player.src(this.getPath(this.video));
+	this.player.poster(this.poster);
+}
+
+function initPlayer() {
 	this.player = videoJs(this.$refs.player, {
 		controls: true,
 		inactivityTimeout: 1000,
@@ -29,6 +29,8 @@ function mounted() {
 			},
 		},
 	}, () => {
+		this.player.src(this.getPath(this.video));
+
 		if (this.video.isVr) {
 			this.player.vr({ projection: '180' });
 		}
@@ -46,7 +48,17 @@ export default {
 			default: null,
 		},
 	},
-	mounted,
+	data() {
+		return {
+			player: null,
+		};
+	},
+	emits: ['play', 'pause'],
+	watch: {
+		video: updatePlayer,
+		poster: updatePlayer,
+	},
+	mounted: initPlayer,
 };
 </script>
 

src/alerts.js

@@ -49,7 +49,7 @@ async function removeAlert(alertId) {
 	await knex('alerts').where('id', alertId).delete();
 }
 
-async function notify(scenes, sessionUser) {
+async function notify(scenes) {
 	const releases = await knex.raw(`
 		SELECT alerts.id as alert_id, alerts.notify, alerts.email, releases.id as scene_id, users.id as user_id
 		FROM releases
@@ -94,7 +94,6 @@ async function notify(scenes, sessionUser) {
 		GROUP BY releases.id, users.id, alerts.id;
 	`, {
 		sceneIds: scenes.map(scene => scene.id),
-		userId: sessionUser.id,
 	});
 
 	const notifications = releases.rows.filter(alert => alert.notify);
@@ -110,8 +109,6 @@ async function notify(scenes, sessionUser) {
 }
 
 async function updateNotification(notificationId, notification, sessionUser) {
-	console.log(notification, sessionUser.id);
-
 	await knex('notifications')
 		.where('user_id', sessionUser.id)
 		.where('id', notificationId)