2 |
5 |
8 |
9 |
--------------------------------------------------------------------------------
/src/plugins/music-together/templates/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/plugins/music-together/templates/setting.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
--------------------------------------------------------------------------------
/src/plugins/music-together/templates/status.html:
--------------------------------------------------------------------------------
1 |
2 |
24 |
--------------------------------------------------------------------------------
/src/plugins/music-together/types.ts:
--------------------------------------------------------------------------------
1 | export type Profile = {
2 | id: string;
3 | handleId: string;
4 | name: string;
5 | thumbnail: string;
6 | };
7 | export type VideoData = {
8 | videoId: string;
9 | ownerId: string;
10 | };
11 | export type Permission = 'host-only' | 'playlist' | 'all';
12 |
13 | export const getDefaultProfile = (
14 | connectionID: string,
15 | id: string = Date.now().toString(),
16 | ): Profile => {
17 | const name = `Guest ${id.slice(0, 4)}`;
18 |
19 | return {
20 | id: connectionID,
21 | handleId: `#music-together:${id}`,
22 | name,
23 | thumbnail: `https://ui-avatars.com/api/?name=${name}&background=random`,
24 | };
25 | };
26 |
--------------------------------------------------------------------------------
/src/plugins/music-together/ui/guest.ts:
--------------------------------------------------------------------------------
1 | import { ElementFromHtml } from '@/plugins/utils/renderer';
2 |
3 | import { t } from '@/i18n';
4 |
5 | import { Popup } from '../element';
6 | import { createStatus } from '../ui/status';
7 |
8 | import IconOff from '../icons/off.svg?raw';
9 |
10 | export type GuestPopupProps = {
11 | onItemClick: (id: string) => void;
12 | };
13 | export const createGuestPopup = (props: GuestPopupProps) => {
14 | const status = createStatus();
15 | status.setStatus('guest');
16 |
17 | const result = Popup({
18 | data: [
19 | {
20 | type: 'custom',
21 | element: status.element,
22 | },
23 | {
24 | type: 'divider',
25 | },
26 | {
27 | type: 'item',
28 | id: 'music-together-disconnect',
29 | icon: ElementFromHtml(IconOff),
30 | text: t('plugins.music-together.menu.disconnect'),
31 | onClick: () => props.onItemClick('music-together-disconnect'),
32 | },
33 | ],
34 | anchorAt: 'bottom-right',
35 | popupAt: 'top-right',
36 | });
37 |
38 | return {
39 | ...status,
40 | ...result,
41 | };
42 | };
43 |
--------------------------------------------------------------------------------
/src/plugins/music-together/ui/host.ts:
--------------------------------------------------------------------------------
1 | import { t } from '@/i18n';
2 | import { ElementFromHtml } from '@/plugins/utils/renderer';
3 |
4 | import { Popup } from '../element';
5 | import { createStatus } from '../ui/status';
6 |
7 | import IconKey from '../icons/key.svg?raw';
8 | import IconOff from '../icons/off.svg?raw';
9 | import IconTune from '../icons/tune.svg?raw';
10 |
11 | export type HostPopupProps = {
12 | onItemClick: (id: string) => void;
13 | };
14 | export const createHostPopup = (props: HostPopupProps) => {
15 | const status = createStatus();
16 | status.setStatus('host');
17 |
18 | const result = Popup({
19 | data: [
20 | {
21 | type: 'custom',
22 | element: status.element,
23 | },
24 | {
25 | type: 'divider',
26 | },
27 | {
28 | id: 'music-together-copy-id',
29 | type: 'item',
30 | icon: ElementFromHtml(IconKey),
31 | text: t('plugins.music-together.menu.click-to-copy-id'),
32 | onClick: () => props.onItemClick('music-together-copy-id'),
33 | },
34 | {
35 | id: 'music-together-permission',
36 | type: 'item',
37 | icon: ElementFromHtml(IconTune),
38 | text: t('plugins.music-together.menu.set-permission', {
39 | permission: t('plugins.music-together.menu.permission.host-only'),
40 | }),
41 | onClick: () => props.onItemClick('music-together-permission'),
42 | },
43 | {
44 | type: 'divider',
45 | },
46 | {
47 | type: 'item',
48 | id: 'music-together-close',
49 | icon: ElementFromHtml(IconOff),
50 | text: t('plugins.music-together.menu.close'),
51 | onClick: () => props.onItemClick('music-together-close'),
52 | },
53 | ],
54 | anchorAt: 'bottom-right',
55 | popupAt: 'top-right',
56 | });
57 |
58 | return {
59 | ...status,
60 | ...result,
61 | };
62 | };
63 |
--------------------------------------------------------------------------------
/src/plugins/music-together/ui/setting.ts:
--------------------------------------------------------------------------------
1 | import { Popup } from '@/plugins/music-together/element';
2 | import { ElementFromHtml } from '@/plugins/utils/renderer';
3 |
4 | import { createStatus } from './status';
5 |
6 | import { t } from '@/i18n';
7 |
8 | import IconMusicCast from '../icons/music-cast.svg?raw';
9 | import IconConnect from '../icons/connect.svg?raw';
10 |
11 | export type SettingPopupProps = {
12 | onItemClick: (id: string) => void;
13 | };
14 | export const createSettingPopup = (props: SettingPopupProps) => {
15 | const status = createStatus();
16 | status.setStatus('disconnected');
17 |
18 | const result = Popup({
19 | data: [
20 | {
21 | type: 'custom',
22 | element: status.element,
23 | },
24 | {
25 | type: 'divider',
26 | },
27 | {
28 | id: 'music-together-host',
29 | type: 'item',
30 | icon: ElementFromHtml(IconMusicCast),
31 | text: t('plugins.music-together.menu.host'),
32 | onClick: () => props.onItemClick('music-together-host'),
33 | },
34 | {
35 | type: 'item',
36 | icon: ElementFromHtml(IconConnect),
37 | text: t('plugins.music-together.menu.join'),
38 | onClick: () => props.onItemClick('music-together-join'),
39 | },
40 | ],
41 | anchorAt: 'bottom-right',
42 | popupAt: 'top-right',
43 | });
44 |
45 | return {
46 | ...status,
47 | ...result,
48 | };
49 | };
50 |
--------------------------------------------------------------------------------
/src/plugins/navigation/index.ts:
--------------------------------------------------------------------------------
1 | import style from './style.css?inline';
2 | import { createPlugin } from '@/utils';
3 | import { ElementFromHtml } from '@/plugins/utils/renderer';
4 |
5 | import { t } from '@/i18n';
6 |
7 | import forwardHTML from './templates/forward.html?raw';
8 | import backHTML from './templates/back.html?raw';
9 |
10 | export default createPlugin({
11 | name: () => t('plugins.navigation.name'),
12 | description: () => t('plugins.navigation.description'),
13 | restartNeeded: false,
14 | config: {
15 | enabled: true,
16 | },
17 | stylesheets: [style],
18 | renderer: {
19 | start() {
20 | const forwardButton = ElementFromHtml(forwardHTML);
21 | const backButton = ElementFromHtml(backHTML);
22 | const menu = document.querySelector('#right-content');
23 | menu?.prepend(backButton, forwardButton);
24 | },
25 | stop() {
26 | document.querySelector('[tab-id=FEmusic_back]')?.remove();
27 | document.querySelector('[tab-id=FEmusic_next]')?.remove();
28 | },
29 | },
30 | });
31 |
--------------------------------------------------------------------------------
/src/plugins/navigation/style.css:
--------------------------------------------------------------------------------
1 | .navigation-item {
2 | font-family:
3 | Roboto,
4 | Noto Naskh Arabic UI,
5 | Arial,
6 | sans-serif;
7 | font-size: 20px;
8 | line-height: var(--ytmusic-title-1_-_line-height);
9 | font-weight: 500;
10 | --yt-endpoint-color: #fff;
11 | --yt-endpoint-hover-color: #fff;
12 | --yt-endpoint-visited-color: #fff;
13 | display: inline-flex;
14 | align-items: center;
15 | color: rgba(255, 255, 255, 0.5);
16 | cursor: pointer;
17 | margin: 0 var(--ytd-margin-2x, 8px);
18 | }
19 |
20 | .navigation-item:hover {
21 | color: #fff;
22 | }
23 |
24 | .navigation-icon {
25 | display: inline-flex;
26 | align-items: center;
27 | justify-content: center;
28 | position: relative;
29 | vertical-align: middle;
30 | fill: var(--iron-icon-fill-color, currentcolor);
31 | stroke: none;
32 | width: var(--iron-icon-width, 24px);
33 | height: var(--iron-icon-height, 24px);
34 | animation: var(--iron-icon_-_animation);
35 | padding: var(--ytd-margin-base, 4px) var(--ytd-margin-2x, 8px);
36 | }
37 |
--------------------------------------------------------------------------------
/src/plugins/navigation/templates/back.html:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/src/plugins/navigation/templates/forward.html:
--------------------------------------------------------------------------------
1 |
36 |
--------------------------------------------------------------------------------
/src/plugins/no-google-login/index.ts:
--------------------------------------------------------------------------------
1 | import style from './style.css?inline';
2 | import { createPlugin } from '@/utils';
3 | import { t } from '@/i18n';
4 |
5 | export default createPlugin({
6 | name: () => t('plugins.no-google-login.name'),
7 | description: () => t('plugins.no-google-login.description'),
8 | restartNeeded: true,
9 | config: {
10 | enabled: false,
11 | },
12 | stylesheets: [style],
13 | renderer() {
14 | const elementsToRemove = [
15 | '.sign-in-link.ytmusic-nav-bar',
16 | '.ytmusic-pivot-bar-renderer[tab-id="FEmusic_liked"]',
17 | ];
18 |
19 | for (const selector of elementsToRemove) {
20 | const node = document.querySelector(selector);
21 | if (node) {
22 | node.remove();
23 | }
24 | }
25 | },
26 | });
--------------------------------------------------------------------------------
/src/plugins/no-google-login/style.css:
--------------------------------------------------------------------------------
1 | .ytmusic-pivot-bar-renderer[tab-id='FEmusic_liked'],
2 | ytmusic-guide-signin-promo-renderer,
3 | a[href='/music_premium'],
4 | .sign-in-link {
5 | display: none !important;
6 | }
7 |
--------------------------------------------------------------------------------
/src/plugins/notifications/index.ts:
--------------------------------------------------------------------------------
1 | import { createPlugin } from '@/utils';
2 |
3 | import { onConfigChange, onMainLoad } from './main';
4 | import { onMenu } from './menu';
5 | import { t } from '@/i18n';
6 |
7 | export interface NotificationsPluginConfig {
8 | enabled: boolean;
9 | unpauseNotification: boolean;
10 | /**
11 | * Has effect only on Linux
12 | */
13 | urgency: 'low' | 'normal' | 'critical';
14 | /**
15 | * the following has effect only on Windows
16 | */
17 | interactive: boolean;
18 | /**
19 | * See plugins/notifications/utils for more info
20 | */
21 | toastStyle: number;
22 | refreshOnPlayPause: boolean;
23 | trayControls: boolean;
24 | hideButtonText: boolean;
25 | }
26 |
27 | export const defaultConfig: NotificationsPluginConfig = {
28 | enabled: false,
29 | unpauseNotification: false,
30 | urgency: 'normal',
31 | interactive: true,
32 | toastStyle: 1,
33 | refreshOnPlayPause: false,
34 | trayControls: true,
35 | hideButtonText: false,
36 | };
37 |
38 | export default createPlugin({
39 | name: () => t('plugins.notifications.name'),
40 | description: () => t('plugins.notifications.description'),
41 | restartNeeded: true,
42 | config: defaultConfig,
43 | menu: onMenu,
44 | backend: {
45 | start: onMainLoad,
46 | onConfigChange,
47 | },
48 | });
49 |
--------------------------------------------------------------------------------
/src/plugins/notifications/main.ts:
--------------------------------------------------------------------------------
1 | import { Notification } from 'electron';
2 |
3 | import is from 'electron-is';
4 |
5 | import { notificationImage } from './utils';
6 | import interactive from './interactive';
7 |
8 | import registerCallback, {
9 | type SongInfo,
10 | SongInfoEvent,
11 | } from '@/providers/song-info';
12 |
13 | import type { NotificationsPluginConfig } from './index';
14 | import type { BackendContext } from '@/types/contexts';
15 |
16 | let config: NotificationsPluginConfig;
17 |
18 | const notify = (info: SongInfo) => {
19 | // Send the notification
20 | const currentNotification = new Notification({
21 | title: info.title || 'Playing',
22 | body: info.artist,
23 | icon: notificationImage(info, config),
24 | silent: true,
25 | urgency: config.urgency,
26 | });
27 | currentNotification.show();
28 |
29 | return currentNotification;
30 | };
31 |
32 | const setup = () => {
33 | let oldNotification: Notification;
34 | let currentUrl: string | undefined;
35 |
36 | registerCallback((songInfo: SongInfo, event) => {
37 | if (
38 | event !== SongInfoEvent.TimeChanged &&
39 | !songInfo.isPaused &&
40 | (songInfo.url !== currentUrl || config.unpauseNotification)
41 | ) {
42 | // Close the old notification
43 | oldNotification?.close();
44 | currentUrl = songInfo.url;
45 | // This fixes a weird bug that would cause the notification to be updated instead of showing
46 | setTimeout(() => {
47 | oldNotification = notify(songInfo);
48 | }, 10);
49 | }
50 | });
51 | };
52 |
53 | export const onMainLoad = async (
54 | context: BackendContext
3 | ![Profile Image]()
4 |
14 |
15 |
5 |
13 |
16 |
18 |
19 |
20 |
23 |
15 | retrySearch(lyricsStore.provider, getSongInfo())}
49 | data={{
50 | icon: { iconType: 'REFRESH' },
51 | isDisabled: false,
52 | style: 'STYLE_DEFAULT',
53 | text: {
54 | simpleText: t('plugins.synced-lyrics.refetch-btn.normal')
55 | },
56 | }}
57 | style={{
58 | 'margin-top': '1em',
59 | 'width': '100%'
60 | }}
61 | />
62 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/src/plugins/synced-lyrics/renderer/components/LoadingKaomoji.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal, onMount } from 'solid-js';
2 |
3 | const states = [
4 | '(>_<)',
5 | '{ (>_<) }',
6 | '{{ (>_<) }}',
7 | '{{{ (>_<) }}}',
8 | '{{ (>_<) }}',
9 | '{ (>_<) }',
10 | ];
11 | export const LoadingKaomoji = () => {
12 | const [counter, setCounter] = createSignal(0);
13 |
14 | onMount(() => {
15 | const interval = setInterval(() => setCounter((old) => old + 1), 500);
16 | return () => clearInterval(interval);
17 | });
18 |
19 | return (
20 |
28 | {t('plugins.synced-lyrics.errors.fetch')}
29 |
30 |
44 | {props.error.stack}
45 |
46 |
47 |
33 |
34 |
35 |
37 |
38 |
51 |
52 |
53 |
54 |
56 |
57 |
58 |
59 |
60 | {(item) =>
62 |
63 |
64 |
65 |
67 |
68 |
69 | );
70 | };
71 |
--------------------------------------------------------------------------------
/src/plugins/synced-lyrics/renderer/index.ts:
--------------------------------------------------------------------------------
1 | import { createRenderer } from '@/utils';
2 | import { waitForElement } from '@/utils/wait-for-element';
3 |
4 | import { selectors, tabStates } from './utils';
5 | import { setConfig } from './renderer';
6 | import { setCurrentTime } from './components/LyricsContainer';
7 |
8 | import { fetchLyrics } from '../providers';
9 |
10 | import type { RendererContext } from '@/types/contexts';
11 | import type { YoutubePlayer } from '@/types/youtube-player';
12 | import type { SongInfo } from '@/providers/song-info';
13 | import type { SyncedLyricsPluginConfig } from '../types';
14 |
15 | export let _ytAPI: YoutubePlayer | null = null;
16 |
17 | export const renderer = createRenderer<
18 | {
19 | observerCallback: MutationCallback;
20 | observer?: MutationObserver;
21 | videoDataChange: () => Promise