Skip to content

Commit

Permalink
Finish YouTube & TBA video downloading
Browse files Browse the repository at this point in the history
  • Loading branch information
@jwbonner
jwbonner committed Sep 2, 2023
1 parent f03d417 commit 8fc2d9b
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 47 deletions.
20 changes: 6 additions & 14 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@
"simple-statistics": "^7.8.3",
"three": "^0.155.0",
"tslib": "^2.6.1",
"typescript": "5.1.6",
"ytdl-core": "*"
"typescript": "5.1.6"
},
"dependencies": {
"check-disk-space": "^3.4.0",
"download": "^8.0.0",
"electron-fetch": "^1.9.1",
"jsonfile": "^6.1.0",
"ssh2": "^1.14.0"
"ssh2": "^1.14.0",
"ytdl-core": "^4.11.5"
},
"prettier": {
"printWidth": 120,
Expand Down
115 changes: 106 additions & 9 deletions src/hub/tabControllers/VideoController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ import VideoVisualizer from "../../shared/visualizers/VideoVisualizer";
import TimelineVizController from "./TimelineVizController";

export default class VideoController extends TimelineVizController {
private BUTTON_BORDER_RADIUS = 6;
private LOCAL_SOURCE: HTMLButtonElement;
private YOUTUBE_SOURCE: HTMLButtonElement;
private TBA_SOURCE: HTMLButtonElement;

private LOCK_BUTTON: HTMLButtonElement;
private UNLOCK_BUTTON: HTMLButtonElement;
private PLAY_BUTTON: HTMLButtonElement;
Expand All @@ -18,6 +23,7 @@ export default class VideoController extends TimelineVizController {
private VIDEO_TIMELINE_PROGRESS: HTMLElement;

private imgFolder: string | null = null;
private lastImgFolder: string | null = null;
private fps: number | null = null;
private totalFrames: number | null = null;
private completedFrames: number | null = null;
Expand Down Expand Up @@ -57,26 +63,37 @@ export default class VideoController extends TimelineVizController {

// Source selection
let sourceCell = content.getElementsByClassName("video-source")[0] as HTMLElement;
sourceCell.children[0].addEventListener("click", () => {
this.LOCAL_SOURCE = sourceCell.children[0] as HTMLButtonElement;
this.YOUTUBE_SOURCE = sourceCell.children[1] as HTMLButtonElement;
this.TBA_SOURCE = sourceCell.children[2] as HTMLButtonElement;
this.LOCAL_SOURCE.addEventListener("click", () => {
this.YOUTUBE_SOURCE.classList.remove("animating");
this.TBA_SOURCE.classList.add("animating");
window.sendMainMessage("select-video", {
uuid: this.UUID,
source: VideoSource.Local,
matchInfo: null
matchInfo: null,
menuCoordinates: null
});
});
sourceCell.children[1].addEventListener("click", () => {
this.createButtonAnimation(this.YOUTUBE_SOURCE);
this.YOUTUBE_SOURCE.addEventListener("click", () => {
this.YOUTUBE_SOURCE.classList.add("animating");
this.TBA_SOURCE.classList.remove("animating");
window.sendMainMessage("select-video", {
uuid: this.UUID,
source: VideoSource.YouTube,
matchInfo: null
matchInfo: null,
menuCoordinates: null
});
});
sourceCell.children[2].addEventListener("click", () => {
this.createButtonAnimation(this.TBA_SOURCE);
this.TBA_SOURCE.addEventListener("click", () => {
if (!window.preferences?.tbaApiKey) {
window.sendMainMessage("error", {
title: "No API key",
content:
"Please enter an API key for The Blue Alliance in the AdvantageScope settings. An API key can be obtained from the Account page on The Blue Alliance website."
"Please enter an API key for The Blue Alliance in the AdvantageScope preferences. An API key can be obtained from the Account page on The Blue Alliance website."
});
return;
}
Expand All @@ -97,10 +114,14 @@ export default class VideoController extends TimelineVizController {
});
return;
}
this.YOUTUBE_SOURCE.classList.remove("animating");
this.TBA_SOURCE.classList.add("animating");
let rect = this.TBA_SOURCE.getBoundingClientRect();
window.sendMainMessage("select-video", {
uuid: this.UUID,
source: VideoSource.TheBlueAlliance,
matchInfo: matchInfo
matchInfo: matchInfo,
menuCoordinates: [rect.right, rect.top + 5]
});
});

Expand Down Expand Up @@ -200,10 +221,80 @@ export default class VideoController extends TimelineVizController {
this.VIDEO_TIMELINE_INPUT.disabled = this.locked;
}

private createButtonAnimation(button: HTMLElement) {
let animation: Animation | null = null;
new ResizeObserver(() => {
let svg = button.lastElementChild as SVGAElement;
let path = svg.firstElementChild as SVGPathElement;
let width = button.getBoundingClientRect().width;
let height = button.getBoundingClientRect().height;
svg.setAttribute("width", width.toString());
svg.setAttribute("height", height.toString());
path.setAttribute(
"d",
"M " +
(width - this.BUTTON_BORDER_RADIUS).toString() +
" 0 A " +
this.BUTTON_BORDER_RADIUS.toString() +
" " +
this.BUTTON_BORDER_RADIUS.toString() +
" 0 0 1 " +
width.toString() +
" " +
this.BUTTON_BORDER_RADIUS.toString() +
" L " +
width.toString() +
" " +
(height - this.BUTTON_BORDER_RADIUS).toString() +
" A " +
this.BUTTON_BORDER_RADIUS.toString() +
" " +
this.BUTTON_BORDER_RADIUS.toString() +
" 0 0 1 " +
(width - this.BUTTON_BORDER_RADIUS).toString() +
" " +
height.toString() +
" L " +
this.BUTTON_BORDER_RADIUS.toString() +
" " +
height.toString() +
" A " +
this.BUTTON_BORDER_RADIUS.toString() +
" " +
this.BUTTON_BORDER_RADIUS.toString() +
" 0 0 1 0 " +
(height - this.BUTTON_BORDER_RADIUS).toString() +
" L 0 " +
this.BUTTON_BORDER_RADIUS.toString() +
" A " +
this.BUTTON_BORDER_RADIUS.toString() +
" " +
this.BUTTON_BORDER_RADIUS.toString() +
" 0 0 1 " +
this.BUTTON_BORDER_RADIUS.toString() +
" 0 Z"
);
path.style.strokeDasharray = (path.getTotalLength() / 4).toString();
let lastAnimationTime = animation?.currentTime;
animation?.cancel();
animation = path.animate([{ strokeDashoffset: path.getTotalLength() }], {
duration: 1000,
iterations: Infinity,
direction: "reverse"
});
if (lastAnimationTime) {
animation.currentTime = lastAnimationTime;
}
}).observe(button);
}

processVideoData(data: any) {
if (data.uuid !== this.UUID) return;

if ("fps" in data) {
if ("error" in data) {
this.YOUTUBE_SOURCE.classList.remove("animating");
this.TBA_SOURCE.classList.remove("animating");
} else if ("fps" in data) {
// Set progress
this.imgFolder = data.imgFolder;
this.fps = data.fps;
Expand All @@ -213,8 +304,14 @@ export default class VideoController extends TimelineVizController {
if (this.totalFrames === null || this.completedFrames === null) return;
this.VIDEO_TIMELINE_PROGRESS.style.width = ((this.completedFrames / this.totalFrames) * 100).toString() + "%";
this.VIDEO_TIMELINE_INPUT.max = this.totalFrames.toString();

if (this.imgFolder !== this.lastImgFolder) {
this.lastImgFolder = this.imgFolder;
this.YOUTUBE_SOURCE.classList.remove("animating");
this.TBA_SOURCE.classList.remove("animating");
}
} else {
// Reset controls
// Start to load new source, reset controls
this.locked = false;
this.playing = false;
this.updateButtons();
Expand Down
Loading

0 comments on commit 8fc2d9b

Please sign in to comment.