Skip to content

Commit

Permalink
feat(webext): implement add channel context menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@AXeL-dev
AXeL-dev committed Oct 7, 2022
1 parent 40a76b7 commit 44f7b60
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 51 deletions.
29 changes: 29 additions & 0 deletions src/helpers/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,3 +426,32 @@ export function getVideoId(url: string) {
}
return videoId;
}

// -------------------------------------------------------------------

/**
* Returns channel id from youtube channel link
*
* @param url
*/
export function getChannelId(url: string) {
let channelId = null;
if (url.indexOf('/channel/') !== -1 || url.indexOf('/c/') !== -1) {
/**
* Example:
* https://youtube.com/c/channelId
* https://youtube.com/channel/channelId/videos
* https://youtube.com/channel/channelId?param=value
*/
const link = url.split('?')[0];
let parts = link.split('/c/');
if (parts.length === 1) {
parts = link.split('/channel/');
}
if (parts.length === 2) {
const params = parts[1].split('/');
channelId = params[0];
}
}
return channelId;
}
140 changes: 89 additions & 51 deletions src/ui/components/webext/Background/ContextMenus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
selectSeenVideos,
selectWatchLaterVideos,
} from 'store/selectors/videos';
import { getVideoId } from 'helpers/utils';
import { getChannelId, getVideoId } from 'helpers/utils';
import { addVideoById } from 'store/thunks/videos';
import { selectChannels } from 'store/selectors/channels';
import { addChannelById } from 'store/thunks/channels';

declare var browser: any;

Expand Down Expand Up @@ -41,70 +43,84 @@ const menus: ContextMenu[] = [
checked: false,
contexts: ['page'],
},
{
title: 'Add channel',
id: 'add_channel',
enabled: false,
contexts: ['page'],
},
];

export default function ContextMenus(props: ContextMenusProps) {
const watchLaterVideos = useAppSelector(selectWatchLaterVideos());
const bookmarkedVideos = useAppSelector(selectBookmarkedVideos());
const seenVideos = useAppSelector(selectSeenVideos());
const channels = useAppSelector(selectChannels);

const handleContextMenusClick = (info: ContextMenuInfo, tab: Tab) => {
const { videoId: id } = parseUrl(tab.url);
if (!id) {
return;
}
switch (info.menuItemId) {
case 'add_video_to_watch_later_list':
closeExtensionTabs().then(() => {
browser.contextMenus.update(info.menuItemId, { enabled: false });
dispatch(
addVideoById({
id,
flags: {
toWatchLater: true,
},
}),
true,
);
});
break;
case 'add_video_to_bookmarks_list':
closeExtensionTabs().then(() => {
browser.contextMenus.update(info.menuItemId, { enabled: false });
dispatch(
addVideoById({
id,
flags: {
bookmarked: true,
},
}),
true,
);
});
break;
case 'mark_video_as_seen': {
closeExtensionTabs().then(() => {
if (info.checked) {
const { videoId, channelId } = parseUrl(tab.url);
if (videoId) {
switch (info.menuItemId) {
case 'add_video_to_watch_later_list':
closeExtensionTabs().then(() => {
browser.contextMenus.update(info.menuItemId, { enabled: false });
dispatch(
addVideoById({
id,
flags: {
seen: true,
},
id: videoId,
flags: { toWatchLater: true },
}),
true,
);
} else {
});
break;
case 'add_video_to_bookmarks_list':
closeExtensionTabs().then(() => {
browser.contextMenus.update(info.menuItemId, { enabled: false });
dispatch(
removeVideoFlag({
video: { id },
flag: 'seen',
addVideoById({
id: videoId,
flags: { bookmarked: true },
}),
true,
);
}
});
break;
});
break;
case 'mark_video_as_seen': {
closeExtensionTabs().then(() => {
if (info.checked) {
dispatch(
addVideoById({
id: videoId,
flags: { seen: true },
}),
true,
);
} else {
dispatch(
removeVideoFlag({
video: { id: videoId },
flag: 'seen',
}),
true,
);
}
});
break;
}
}
} else if (channelId) {
switch (info.menuItemId) {
case 'add_channel':
closeExtensionTabs().then(() => {
browser.contextMenus.update(info.menuItemId, { enabled: false });
dispatch(
addChannelById({
id: channelId,
}),
true,
);
});
break;
}
}
};
Expand All @@ -121,28 +137,43 @@ export default function ContextMenus(props: ContextMenusProps) {
const data: {
isYoutubeVideo: boolean;
videoId: string | null;
isYoutubeChannel: boolean;
channelId: string | null;
} = {
isYoutubeVideo: false,
videoId: null,
isYoutubeChannel: false,
channelId: null,
};
if (url?.includes('youtube.com/watch?v=') || url?.includes('youtu.be/')) {
data.isYoutubeVideo = true;
data.videoId = getVideoId(url);
} else if (
url?.includes('youtube.com/channel/') ||
url?.includes('youtube.com/c/')
) {
data.isYoutubeChannel = true;
data.channelId = getChannelId(url);
}
return data;
};

const updateContextMenus = (tabId: number) => {
browser.tabs.get(tabId).then((tab: Tab) => {
const { isYoutubeVideo, videoId } = parseUrl(tab.url);
const { isYoutubeVideo, videoId, isYoutubeChannel, channelId } = parseUrl(
tab.url,
);
for (const menu of menus) {
const options: ContextMenuUpdateOptions = {
enabled: isYoutubeVideo,
enabled:
menu.id === 'add_channel'
? isYoutubeChannel && !!channelId
: isYoutubeVideo && !!videoId,
};
if (menu.type === 'checkbox') {
options.checked = false;
}
if (options.enabled && videoId) {
if (options.enabled) {
switch (menu.id) {
case 'add_video_to_watch_later_list': {
const found = watchLaterVideos.find(
Expand All @@ -163,6 +194,13 @@ export default function ContextMenus(props: ContextMenusProps) {
options.checked = !!found;
break;
}
case 'add_channel': {
const found = channels.find(
(channel) => channel.id === channelId,
);
options.enabled = !found;
break;
}
}
}
browser.contextMenus.update(menu.id, options);
Expand Down

0 comments on commit 44f7b60

Please sign in to comment.