Skip to content

Commit

Permalink
Merge pull request #48 from VampireChicken12/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@VampireChicken12
VampireChicken12 authored Oct 6, 2023
2 parents 341164e + 5d1155d commit 0746de6
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 87 deletions.
163 changes: 80 additions & 83 deletions src/features/videoHistory/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { YouTubePlayerDiv } from "@/src/types";
import eventManager from "@/utils/EventManager";
import { browserColorLog, isShortsPage, isWatchPage, sendContentMessage, waitForSpecificMessage } from "@/utils/utilities";

export default async function setupVideoHistory() {
export async function setupVideoHistory() {
// Wait for the "options" message from the content script
const optionsData = await waitForSpecificMessage("options", "request_data", "content");
if (!optionsData) return;
Expand All @@ -19,15 +19,6 @@ export default async function setupVideoHistory() {
if (!videoId) return;
const videoElement = document.querySelector("video.video-stream.html5-main-video") as HTMLVideoElement | null;
if (!videoElement) return;
const videoHistoryOneData = await waitForSpecificMessage("videoHistoryOne", "request_data", "content", { id: videoId });
if (!videoHistoryOneData) return;
const {
data: { video_history_entry }
} = videoHistoryOneData;
// TODO: get this to only run when the video first loads
if (video_history_entry && video_history_entry.status === "watching" && video_history_entry.timestamp > 0) {
promptUserToResumeVideo(video_history_entry.timestamp);
}

const videoPlayerTimeUpdateListener = async () => {
const currentTime = await playerContainer.getCurrentTime();
Expand All @@ -42,7 +33,7 @@ export default async function setupVideoHistory() {
};
eventManager.addEventListener(videoElement, "timeupdate", videoPlayerTimeUpdateListener, "videoHistory");
}
async function promptUserToResumeVideo(timestamp: number) {
export async function promptUserToResumeVideo() {
// Get the player container element
const playerContainer = isWatchPage() ? (document.querySelector("div#movie_player") as YouTubePlayerDiv | null) : isShortsPage() ? null : null;

Expand All @@ -51,82 +42,88 @@ async function promptUserToResumeVideo(timestamp: number) {

const { video_id: videoId } = await playerContainer.getVideoData();
if (!videoId) return;
const videoHistoryOneData = await waitForSpecificMessage("videoHistoryOne", "request_data", "content", { id: videoId });
if (!videoHistoryOneData) return;
const {
data: { video_history_entry }
} = videoHistoryOneData;
if (video_history_entry && video_history_entry.status === "watching" && video_history_entry.timestamp > 0) {
// Check if the prompt element already exists
const prompt = document.getElementById("resume-prompt") ?? document.createElement("div");
// Check if the prompt progress bar already exists
const progressBar = document.getElementById("resume-prompt-progress-bar") ?? document.createElement("div");
const progressBarDuration = 15;
// Create a countdown timer
let countdown = progressBarDuration; // Countdown in seconds
const countdownInterval = setInterval(() => {
countdown--;
progressBar.style.width = `${(countdown / progressBarDuration) * 100}%`; // Update the progress bar

// Check if the prompt element already exists
const prompt = document.getElementById("resume-prompt") ?? document.createElement("div");
// Check if the prompt progress bar already exists
const progressBar = document.getElementById("resume-prompt-progress-bar") ?? document.createElement("div");
const progressBarDuration = 15;
// Create a countdown timer
let countdown = progressBarDuration; // Countdown in seconds
const countdownInterval = setInterval(() => {
countdown--;
progressBar.style.width = `${(countdown / progressBarDuration) * 100}%`; // Update the progress bar

if (countdown <= 0) {
// Automatically hide the prompt when the countdown reaches 0
if (countdown <= 0) {
// Automatically hide the prompt when the countdown reaches 0
clearInterval(countdownInterval);
prompt.style.display = "none";
}
}, 1000);
if (!document.getElementById("resume-prompt-progress-bar")) {
progressBar.id = "resume-prompt-progress-bar";
progressBar.style.width = "100%";
progressBar.style.height = "10px"; // Height of the progress bar
progressBar.style.backgroundColor = "#007acc"; // Progress bar color
progressBar.style.position = "absolute";
progressBar.style.zIndex = "1000"; // Adjust as needed
progressBar.style.left = "0"; // Place at the left of the prompt
progressBar.style.bottom = "0"; // Place at the bottom of the prompt
progressBar.style.transition = "all 0.5s ease-in-out";
progressBar.style.borderBottomRightRadius = "5px";
progressBar.style.borderBottomLeftRadius = "5px";
prompt.appendChild(progressBar);
}
const resumeButtonClickListener = () => {
// Hide the prompt and clear the countdown timer
clearInterval(countdownInterval);
prompt.style.display = "none";
browserColorLog(`Resuming video`, "FgGreen");
playerContainer.seekTo(video_history_entry.timestamp, true);
};
const resumeButton = document.createElement("button") ?? document.getElementById("resume-prompt-button");
// Create the prompt element if it doesn't exist
if (!document.getElementById("resume-prompt")) {
prompt.id = "resume-prompt";
prompt.style.position = "fixed";
prompt.style.bottom = "10px"; // Adjust as needed
prompt.style.right = "10px"; // Adjust as needed
prompt.style.backgroundColor = "#181a1b";
prompt.style.padding = "10px";
prompt.style.paddingBottom = "20px";
prompt.style.transition = "all 0.5s ease-in-out";
prompt.style.borderRadius = "5px";
prompt.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.2)";
prompt.style.zIndex = "25000";
document.body.appendChild(prompt);
resumeButton.id = "resume-prompt-button";
resumeButton.textContent = "Resume";
resumeButton.style.backgroundColor = "hsl(213, 80%, 50%)";
resumeButton.style.border = "transparent";
resumeButton.style.color = "white";
resumeButton.style.padding = "10px 20px";
resumeButton.style.borderRadius = "5px";
resumeButton.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.2)";
resumeButton.style.cursor = "pointer";
resumeButton.style.fontSize = "1.5em";
resumeButton.style.fontWeight = "bold";
resumeButton.style.textAlign = "center";
resumeButton.style.verticalAlign = "middle";
resumeButton.style.transition = "all 0.5s ease-in-out";

prompt.appendChild(resumeButton);
}
}, 1000);
if (!document.getElementById("resume-prompt-progress-bar")) {
progressBar.id = "resume-prompt-progress-bar";
progressBar.style.width = "100%";
progressBar.style.height = "10px"; // Height of the progress bar
progressBar.style.backgroundColor = "#007acc"; // Progress bar color
progressBar.style.position = "absolute";
progressBar.style.zIndex = "1000"; // Adjust as needed
progressBar.style.left = "0"; // Place at the left of the prompt
progressBar.style.bottom = "0"; // Place at the bottom of the prompt
progressBar.style.transition = "all 0.5s ease-in-out";
progressBar.style.borderBottomRightRadius = "5px";
progressBar.style.borderBottomLeftRadius = "5px";
prompt.appendChild(progressBar);
}
const resumeButtonClickListener = () => {
// Hide the prompt and clear the countdown timer
clearInterval(countdownInterval);
prompt.style.display = "none";
browserColorLog(`Resuming video`, "FgGreen");
playerContainer.seekTo(timestamp, true);
};
const resumeButton = document.createElement("button") ?? document.getElementById("resume-prompt-button");
// Create the prompt element if it doesn't exist
if (!document.getElementById("resume-prompt")) {
prompt.id = "resume-prompt";
prompt.style.position = "fixed";
prompt.style.bottom = "10px"; // Adjust as needed
prompt.style.right = "10px"; // Adjust as needed
prompt.style.backgroundColor = "#181a1b";
prompt.style.padding = "10px";
prompt.style.paddingBottom = "20px";
prompt.style.transition = "all 0.5s ease-in-out";
prompt.style.borderRadius = "5px";
prompt.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.2)";
prompt.style.zIndex = "25000";
document.body.appendChild(prompt);
resumeButton.id = "resume-prompt-button";
resumeButton.textContent = "Resume";
resumeButton.style.backgroundColor = "hsl(213, 80%, 50%)";
resumeButton.style.border = "transparent";
resumeButton.style.color = "white";
resumeButton.style.padding = "10px 20px";
resumeButton.style.borderRadius = "5px";
resumeButton.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.2)";
resumeButton.style.cursor = "pointer";
resumeButton.style.fontSize = "1.5em";
resumeButton.style.fontWeight = "bold";
resumeButton.style.textAlign = "center";
resumeButton.style.verticalAlign = "middle";
resumeButton.style.transition = "all 0.5s ease-in-out";
if (document.getElementById("resume-prompt-button")) {
eventManager.removeEventListener(resumeButton, "click", "videoHistory");
}
eventManager.addEventListener(resumeButton, "click", resumeButtonClickListener, "videoHistory");

prompt.appendChild(resumeButton);
// Display the prompt
prompt.style.display = "block";
}
if (document.getElementById("resume-prompt-button")) {
eventManager.removeEventListener(resumeButton, "click", "videoHistory");
}
eventManager.addEventListener(resumeButton, "click", resumeButtonClickListener, "videoHistory");

// Display the prompt
prompt.style.display = "block";
}
4 changes: 3 additions & 1 deletion src/pages/content/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import setPlayerSpeed from "@/src/features/playerSpeed";
import setRememberedVolume from "@/src/features/rememberVolume";
import { addScreenshotButton, removeScreenshotButton } from "@/src/features/screenshotButton";
import adjustVolumeOnScrollWheel from "@/src/features/scrollWheelVolumeControl";
import setupVideoHistory from "@/src/features/videoHistory";
import { setupVideoHistory, promptUserToResumeVideo } from "@/src/features/videoHistory";
import volumeBoost from "@/src/features/volumeBoost";
// TODO: Add remaining time feature
// TODO: Add always show progressbar feature

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const alwaysShowProgressBar = async function () {
const player = document.querySelector("#movie_player") as YouTubePlayerDiv | null;
if (!player) return;
Expand Down Expand Up @@ -72,6 +73,7 @@ window.onload = function () {
volumeBoost();
adjustVolumeOnScrollWheel();
setupVideoHistory();
promptUserToResumeVideo();
};
document.addEventListener("yt-player-updated", enableFeatures);
/**
Expand Down
11 changes: 8 additions & 3 deletions src/pages/inject/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { getVideoHistory, setVideoHistory } from "@/src/features/videoHistory/utils";
import { ContentSendOnlyMessageMappings, Messages, StorageChanges, configuration } from "@/src/types";
import { parseReviver, sendExtensionOnlyMessage, sendExtensionMessage } from "@/src/utils/utilities";
import { parseReviver, sendExtensionOnlyMessage, sendExtensionMessage, parseStoredValue } from "@/src/utils/utilities";

/**
* Adds a script element to the document's root element, which loads a JavaScript file from the extension's runtime URL.
Expand Down Expand Up @@ -182,8 +182,13 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
Object.entries(
changes as { [K in keyof configuration]?: { oldValue?: configuration[K] | undefined; newValue?: configuration[K] | undefined } }
).forEach(([key, change]) => {
if (Object.prototype.hasOwnProperty.call(keyActions, key) && change?.newValue !== undefined) {
if (!change) return;
if (
change &&
Object.prototype.hasOwnProperty.call(keyActions, key) &&
change.newValue !== undefined &&
change.oldValue !== undefined &&
parseStoredValue(change.oldValue as string) !== parseStoredValue(change.newValue as string)
) {
keyActions[key]?.();
}
});
Expand Down

0 comments on commit 0746de6

Please sign in to comment.