refactor: changed ActivtyWatch integration to not send watch event whne video is buffering, and include playback rate

frontend/src/components/modals/EditSong/index.vue

@@ -856,7 +856,10 @@ const resetGenreHelper = () => {
 };
 
 const sendActivityWatchVideoData = () => {
-	if (!video.value.paused) {
+	if (
+		!video.value.paused &&
+		video.value.player.getPlayerState() === window.YT.PlayerState.PLAYING
+	) {
 		if (activityWatchVideoLastStatus.value !== "playing") {
 			activityWatchVideoLastStatus.value = "playing";
 			if (
@@ -887,7 +890,13 @@ const sendActivityWatchVideoData = () => {
 					? 0
 					: activityWatchVideoLastStartDuration.value,
 			source: `editSong#${inputs.value.youtubeId.value}`,
-			hostname: window.location.hostname
+			hostname: window.location.hostname,
+			playerState: Object.keys(window.YT.PlayerState).find(
+				key =>
+					window.YT.PlayerState[key] ===
+					video.value.player.getPlayerState()
+			),
+			playbackRate: video.value.playbackRate
 		};
 
 		aw.sendVideoData(videoData);

frontend/src/components/modals/ViewYoutubeVideo.vue

@@ -173,7 +173,10 @@ const setTrackPosition = event => {
 	);
 };
 const sendActivityWatchVideoData = () => {
-	if (!player.value.paused) {
+	if (
+		!player.value.paused &&
+		player.value.player.getPlayerState() === window.YT.PlayerState.PLAYING
+	) {
 		if (activityWatchVideoLastStatus.value !== "playing") {
 			activityWatchVideoLastStatus.value = "playing";
 			activityWatchVideoLastStartDuration.value = Math.floor(
@@ -192,7 +195,13 @@ const sendActivityWatchVideoData = () => {
 					? 0
 					: activityWatchVideoLastStartDuration.value,
 			source: `viewYoutubeVideo#${video.value.youtubeId}`,
-			hostname: window.location.hostname
+			hostname: window.location.hostname,
+			playerState: Object.keys(window.YT.PlayerState).find(
+				key =>
+					window.YT.PlayerState[key] ===
+					player.value.player.getPlayerState()
+			),
+			playbackRate: player.value.playbackRate
 		};
 
 		aw.sendVideoData(videoData);

frontend/src/pages/Station/index.vue

@@ -807,7 +807,12 @@ const resetKeyboardShortcutsHelper = () => {
 	keyboardShortcutsHelper.value.resetBox();
 };
 const sendActivityWatchVideoData = () => {
-	if (!stationPaused.value && !localPaused.value && !noSong.value) {
+	if (
+		!stationPaused.value &&
+		!localPaused.value &&
+		!noSong.value &&
+		player.value.getPlayerState() === window.YT.PlayerState.PLAYING
+	) {
 		if (activityWatchVideoLastStatus.value !== "playing") {
 			activityWatchVideoLastStatus.value = "playing";
 			activityWatchVideoLastStartDuration.value =
@@ -839,7 +844,12 @@ const sendActivityWatchVideoData = () => {
 							activityWatchVideoLastStartDuration.value / 1000
 					  ),
 			source: `station#${station.value.name}`,
-			hostname: window.location.hostname
+			hostname: window.location.hostname,
+			playerState: Object.keys(window.YT.PlayerState).find(
+				key =>
+					window.YT.PlayerState[key] === player.value.getPlayerState()
+			),
+			playbackRate: playbackRate.value
 		};
 
 		aw.sendVideoData(videoData);