Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show the user when there is no compatible video #26

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Show the user when there is no compatible video #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/SessionPort.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Friend } from "./Friend";
/** A type of message, both local and remote */
export enum MessageType {
Video = "video",
NoVideo = "no-video",
Poll = "poll"
}

Expand All @@ -13,6 +14,11 @@ export interface LocalVideoMessage {
paused: boolean;
}

/** Alert that there is no video element on the page */
export interface LocalNoVideoMessage {
type: MessageType.NoVideo;
}

/** Request to get the latest HTMLVideoElement status */
export interface LocalPollMessage {
type: MessageType.Poll;
Expand All @@ -26,6 +32,6 @@ export interface RemoteMessageExtensions {
/** Message sent to the tab frame from the background process */
export type LocalInMessage = LocalPollMessage | LocalVideoMessage;
/** Message sent to the background process from the tab frame */
export type LocalOutMessage = LocalVideoMessage;
export type LocalOutMessage = LocalVideoMessage | LocalNoVideoMessage;
/** Message sent to a peer from the background process */
export type RemoteMessage = LocalOutMessage & RemoteMessageExtensions;
export type RemoteMessage = LocalVideoMessage & RemoteMessageExtensions;
51 changes: 32 additions & 19 deletions src/background/host.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export enum HostEvent {
export class Host extends EventEmitter {
#log = Debug("peer:offline");

/** If this tab has a video element */
#hasVideo: boolean | null = null;
/** Our connection to the browser tab, if a video is detected */
#port: Runtime.Port | null = null;
/** Our network connection for listening for joiners, if the user has chosen to host or join */
Expand All @@ -39,6 +41,8 @@ export class Host extends EventEmitter {
let currentState = PopupPort.State.VideoIncompatible;
if (!this.#port) {
currentState = PopupPort.State.VideoSearching;
} else if (!this.#hasVideo) {
currentState = PopupPort.State.VideoIncompatible;
} else if (!this.#peer) {
currentState = PopupPort.State.ReadyToJoin;
} else if (this.#lastPeerError) {
Expand All @@ -56,7 +60,7 @@ export class Host extends EventEmitter {
videoURL: this.videoURL,
lastError: this.#lastPeerError
? {
type: ((this.#lastPeerError as unknown) as { type: string }).type,
type: (this.#lastPeerError as unknown as { type: string }).type,
message: this.#lastPeerError.message
}
: null,
Expand Down Expand Up @@ -163,30 +167,39 @@ export class Host extends EventEmitter {
}

public connect(port: Runtime.Port): void {
this.#log("Video discovered by session");
this.#port = port;

port.onMessage.addListener((message: SessionPort.LocalOutMessage) => {
if (!this.personalData) {
return;
if (message.type == SessionPort.MessageType.Video) {
if (this.#hasVideo !== true) {
this.#hasVideo = true;
this.emit(HostEvent.VideoDetected);
this;
}
if (!this.personalData) {
return;
}
const data: SessionPort.RemoteMessage = {
...message,
friends: [
this.personalData,
...Array.from(this.#friends.values()).map(friend => ({
id: friend.id,
title: friend.title,
muted: friend.muted
}))
]
};
this.#friends.forEach(friend => friend.conn.send(data));
} else {
if (this.#hasVideo !== false) {
this.#hasVideo = false;
this.emit(HostEvent.VideoDetected);
}
}

const data: SessionPort.RemoteMessage = {
...message,
friends: [
this.personalData,
...Array.from(this.#friends.values()).map(friend => ({
id: friend.id,
title: friend.title,
muted: friend.muted
}))
]
};
this.#log("Sending data", data);
this.#friends.forEach(friend => friend.conn.send(data));
});

this.emit(HostEvent.VideoDetected);
port.postMessage({ type: SessionPort.MessageType.Poll });
}

/** Merge our party with another streamer */
Expand Down
24 changes: 20 additions & 4 deletions src/session/session.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { LocalInMessage, LocalOutMessage, MessageType } from "../SessionPort";
import { browser } from "webextension-polyfill-ts";

function connect(video: HTMLVideoElement): void {
const port = browser.runtime.connect(undefined, { name: "session" });
import { browser, Runtime } from "webextension-polyfill-ts";

function connectToVideo(video: HTMLVideoElement, port: Runtime.Port): void {
function transmitEvent(): void {
const message: LocalOutMessage = {
type: MessageType.Video,
Expand Down Expand Up @@ -57,6 +55,22 @@ function connect(video: HTMLVideoElement): void {
});
}

function connect(video: HTMLVideoElement | null): void {
const port = browser.runtime.connect(undefined, { name: "session" });
if (video) {
connectToVideo(video, port);
} else {
port.onMessage.addListener((message: LocalInMessage) => {
if (message.type == MessageType.Poll) {
const message: LocalOutMessage = {
type: MessageType.NoVideo
};
port.postMessage(message);
}
});
}
}

export function search(): void {
(function next(i): void {
const videoSearch = document.querySelector("video");
Expand All @@ -67,6 +81,8 @@ export function search(): void {

if (i < 20) {
setTimeout(() => next(++i), 500);
} else {
connect(null);
}
})(0);
}
Expand Down