Implemented improved toasts (thanks melt ul <3)
This commit is contained in:
WardPearce
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "Materialious",
|
||||
"version": "1.13.2",
|
||||
"version": "1.13.3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "Materialious",
|
||||
"version": "1.13.2",
|
||||
"version": "1.13.3",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@capacitor-community/electron": "^5.0.0",
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"dependencies": {
|
||||
"@capacitor-community/electron": "^5.0.0",
|
||||
"bgutils-js": "^3.2.0",
|
||||
"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
|
||||
"chokidar": "~5.0.0",
|
||||
"electron-is-dev": "~2.0.0",
|
||||
"electron-serve": "~3.0.0",
|
||||
@@ -43,4 +44,4 @@
|
||||
"capacitor",
|
||||
"electron"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
const CapacitorNodejs = require('../../../node_modules/capacitor-nodejs/electron/dist/plugin.js');
|
||||
|
||||
module.exports = {
|
||||
CapacitorNodejs,
|
||||
}
|
||||
Generated
+206
-3
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "materialious",
|
||||
"version": "1.13.2",
|
||||
"version": "1.13.3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "materialious",
|
||||
"version": "1.13.2",
|
||||
"version": "1.13.3",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@capacitor-community/electron": "^5.0.1",
|
||||
@@ -38,6 +38,7 @@
|
||||
"iso-639-1": "^3.1.5",
|
||||
"material-dynamic-colors": "^1.1.1",
|
||||
"media-captions": "^1.0.4",
|
||||
"melt": "^0.44.0",
|
||||
"mousetrap": "^1.6.5",
|
||||
"peerjs": "^1.5.5",
|
||||
"shaka-player": "^4.16.11",
|
||||
@@ -2786,6 +2787,31 @@
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
|
||||
"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
|
||||
"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.3",
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||
@@ -3111,6 +3137,18 @@
|
||||
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@jest/schemas": {
|
||||
"version": "29.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
|
||||
"integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@sinclair/typebox": "^0.27.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
@@ -3675,6 +3713,12 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@sinclair/typebox": {
|
||||
"version": "0.27.8",
|
||||
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
|
||||
"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@standard-schema/spec": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
|
||||
@@ -4773,6 +4817,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axe-core": {
|
||||
"version": "4.9.1",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
|
||||
"integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
|
||||
"license": "MPL-2.0",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
|
||||
@@ -6227,6 +6280,15 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
@@ -6270,6 +6332,15 @@
|
||||
"node": ">=0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/diff-sequences": {
|
||||
"version": "29.6.3",
|
||||
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
|
||||
"integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
@@ -7147,6 +7218,15 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/focus-trap": {
|
||||
"version": "7.8.0",
|
||||
"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.8.0.tgz",
|
||||
"integrity": "sha512-/yNdlIkpWbM0ptxno3ONTuf+2g318kh2ez3KSeZN5dZ8YC6AAmgeWz+GasYYiBJPFaYcSAPeu4GfhUaChzIJXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tabbable": "^6.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
@@ -8714,6 +8794,60 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-axe": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-9.0.0.tgz",
|
||||
"integrity": "sha512-Xt7O0+wIpW31lv0SO1wQZUTyJE7DEmnDEZeTt9/S9L5WUywxrv8BrgvTuQEqujtfaQOcJ70p4wg7UUgK1E2F5g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"axe-core": "4.9.1",
|
||||
"chalk": "4.1.2",
|
||||
"jest-matcher-utils": "29.2.2",
|
||||
"lodash.merge": "4.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-diff": {
|
||||
"version": "29.7.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
|
||||
"integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chalk": "^4.0.0",
|
||||
"diff-sequences": "^29.6.3",
|
||||
"jest-get-type": "^29.6.3",
|
||||
"pretty-format": "^29.7.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-get-type": {
|
||||
"version": "29.6.3",
|
||||
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
|
||||
"integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-matcher-utils": {
|
||||
"version": "29.2.2",
|
||||
"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz",
|
||||
"integrity": "sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chalk": "^4.0.0",
|
||||
"jest-diff": "^29.2.1",
|
||||
"jest-get-type": "^29.2.0",
|
||||
"pretty-format": "^29.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@@ -9053,7 +9187,6 @@
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.sortby": {
|
||||
@@ -9151,6 +9284,23 @@
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/melt": {
|
||||
"version": "0.44.0",
|
||||
"resolved": "https://registry.npmjs.org/melt/-/melt-0.44.0.tgz",
|
||||
"integrity": "sha512-N2/d5zY7XNr9R8ZB/dLVmZtRKaQgq2Pb1Y8Wrpfw/zeUG0TT1pTaQFL5wLDRS84NymOrkNH9NmufYI54UGzjCQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"dequal": "^2.0.3",
|
||||
"focus-trap": "^7.6.5",
|
||||
"jest-axe": "^9.0.0",
|
||||
"runed": "^0.23.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@floating-ui/dom": "^1.6.0",
|
||||
"svelte": "^5.30.1"
|
||||
}
|
||||
},
|
||||
"node_modules/meow": {
|
||||
"version": "8.1.2",
|
||||
"resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
|
||||
@@ -10493,6 +10643,32 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-format": {
|
||||
"version": "29.7.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
|
||||
"integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jest/schemas": "^29.6.3",
|
||||
"ansi-styles": "^5.0.0",
|
||||
"react-is": "^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-format/node_modules/ansi-styles": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
|
||||
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
@@ -10635,6 +10811,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
@@ -11370,6 +11552,21 @@
|
||||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/runed": {
|
||||
"version": "0.23.4",
|
||||
"resolved": "https://registry.npmjs.org/runed/-/runed-0.23.4.tgz",
|
||||
"integrity": "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/huntabyte",
|
||||
"https://github.com/sponsors/tglide"
|
||||
],
|
||||
"dependencies": {
|
||||
"esm-env": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^5.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sade": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
||||
@@ -12369,6 +12566,12 @@
|
||||
"integrity": "sha512-Jo+f/yr/HmZQuIiiKKzAHVFXdAUWHW2RBbrcQTil8JVk1sCm/riy7KTJVzjBgQvHasrFQYKF84zvtc9/Y4lFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tabbable": {
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
|
||||
"integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tar": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
|
||||
|
||||
@@ -71,6 +71,7 @@
|
||||
"iso-639-1": "^3.1.5",
|
||||
"material-dynamic-colors": "^1.1.1",
|
||||
"media-captions": "^1.0.4",
|
||||
"melt": "^0.44.0",
|
||||
"mousetrap": "^1.6.5",
|
||||
"peerjs": "^1.5.5",
|
||||
"shaka-player": "^4.16.11",
|
||||
@@ -79,4 +80,4 @@
|
||||
"youtubei.js": "^16.0.1",
|
||||
"zod": "^4.3.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,6 +57,7 @@
|
||||
import { SvelteSet } from 'svelte/reactivity';
|
||||
import { Network, type ConnectionStatus } from '@capacitor/network';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { addToast } from './Toast.svelte';
|
||||
|
||||
interface Props {
|
||||
data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
|
||||
@@ -75,7 +76,6 @@
|
||||
let segments: Segment[] = $state([]);
|
||||
let segmentManualSkip: Segment | undefined = $state();
|
||||
|
||||
let snackBarAlert = $state('');
|
||||
let originalOrigination: ScreenOrientationResult | undefined;
|
||||
// eslint-disable-next-line no-undef
|
||||
let watchProgressInterval: NodeJS.Timeout;
|
||||
@@ -276,8 +276,11 @@
|
||||
}
|
||||
playerElement.currentTime = segment.endTime + 1;
|
||||
if (!get(sponsorBlockDisplayToastStore)) {
|
||||
snackBarAlert = `${get(_)('skipping')} ${segment.category}`;
|
||||
ui('#snackbar-alert');
|
||||
addToast({
|
||||
data: {
|
||||
text: `${$_('skipping')} ${segment.category}`
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -306,9 +309,18 @@
|
||||
if (segmentTrigger === 'automatic') {
|
||||
skipSegment(segment);
|
||||
} else if (segmentTrigger === 'manual') {
|
||||
snackBarAlert = `${get(_)('upcomingSegment')} ${segment.category}`;
|
||||
if (!segmentManualSkip) {
|
||||
addToast({
|
||||
data: {
|
||||
text: `${$_('upcomingSegment')} ${segment.category}`,
|
||||
action: {
|
||||
action: () => skipSegment(segment),
|
||||
text: $_('skip')
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
segmentManualSkip = segment;
|
||||
ui('#snackbar-alert');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -500,8 +512,7 @@
|
||||
}
|
||||
|
||||
if (data.video.fallbackPatch === 'youtubejs') {
|
||||
snackBarAlert = get(_)('player.youtubeJsFallBack');
|
||||
ui('#snackbar-alert');
|
||||
addToast({ data: { text: $_('player.youtubeJsFallBack') } });
|
||||
}
|
||||
|
||||
if ($playerDefaultPlaybackSpeed && playerElement) {
|
||||
@@ -1470,15 +1481,6 @@
|
||||
</article>
|
||||
{/if}
|
||||
|
||||
{#if !isEmbed}
|
||||
<div class="snackbar" id="snackbar-alert">
|
||||
<span class="bold" style="text-transform: capitalize;">{snackBarAlert}</span>
|
||||
{#if segmentManualSkip}
|
||||
<button onclick={() => skipSegment(segmentManualSkip as Segment)}>{$_('skip')}</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#player-container {
|
||||
position: relative;
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import { get } from 'svelte/store';
|
||||
import type { Notification, PlaylistPageVideo, Video, VideoBase } from '../api/model';
|
||||
import { shareURL } from '$lib/misc';
|
||||
import { addToast } from './Toast.svelte';
|
||||
|
||||
interface Props {
|
||||
video: VideoBase | Video | Notification | PlaylistPageVideo;
|
||||
@@ -21,7 +22,11 @@
|
||||
|
||||
await shareURL(url);
|
||||
|
||||
ui('#share-success');
|
||||
addToast({
|
||||
data: {
|
||||
text: $_('player.share.copiedSuccess')
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -74,5 +79,3 @@
|
||||
<div class="min">{$_('player.share.youtubeLink')}</div>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
<div class="snackbar" id="share-success">{$_('player.share.copiedSuccess')}</div>
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
shareURL
|
||||
} from '$lib/misc';
|
||||
import type { PlayerEvents } from '$lib/player';
|
||||
import ui from 'beercss';
|
||||
import type { DataConnection } from 'peerjs';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { _ } from '$lib/i18n';
|
||||
@@ -19,6 +18,7 @@
|
||||
import z from 'zod';
|
||||
import { Buffer } from 'buffer';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { addToast } from './Toast.svelte';
|
||||
|
||||
const SyncInfo = z.object({
|
||||
host: z.string(),
|
||||
@@ -45,7 +45,12 @@
|
||||
goto(currentUrl);
|
||||
} else if (event.type === 'goto' && event.path && event.path !== $page.url.pathname) {
|
||||
if (blockedPages.includes(event.path.replace('/', ''))) {
|
||||
ui('#sync-party-private-page');
|
||||
addToast({
|
||||
data: {
|
||||
text: $_('syncParty.userOnPrivatePage'),
|
||||
icon: 'shield_person'
|
||||
}
|
||||
});
|
||||
} else {
|
||||
currentUrl.pathname = event.path;
|
||||
// eslint-disable-next-line svelte/no-navigation-without-resolve
|
||||
@@ -81,7 +86,12 @@
|
||||
if ($syncPartyPeerStore) {
|
||||
$syncPartyPeerStore.on('connection', (conn) => {
|
||||
conn.on('open', async () => {
|
||||
await ui('#sync-party-connection-join');
|
||||
addToast({
|
||||
data: {
|
||||
text: $_('syncParty.userJoined'),
|
||||
icon: 'person_add'
|
||||
}
|
||||
});
|
||||
|
||||
conn.send({
|
||||
events: [
|
||||
@@ -97,7 +107,12 @@
|
||||
});
|
||||
|
||||
conn.on('close', async () => {
|
||||
await ui('#sync-party-connection-left');
|
||||
addToast({
|
||||
data: {
|
||||
text: $_('syncParty.userLeft'),
|
||||
icon: 'person_remove'
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -219,18 +234,3 @@
|
||||
</form>
|
||||
{/if}
|
||||
</dialog>
|
||||
|
||||
<div class="snackbar" id="sync-party-connection-join">
|
||||
<i>person_add</i>
|
||||
<span>{$_('syncParty.userJoined')}</span>
|
||||
</div>
|
||||
|
||||
<div class="snackbar" id="sync-party-connection-left">
|
||||
<i>person_remove</i>
|
||||
<span>{$_('syncParty.userLeft')}</span>
|
||||
</div>
|
||||
|
||||
<div class="snackbar" id="sync-party-private-page">
|
||||
<i>shield_person</i>
|
||||
<span>{$_('syncParty.userOnPrivatePage')}</span>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
<script lang="ts" module>
|
||||
export interface ToastAction {
|
||||
icon?: string;
|
||||
text?: string;
|
||||
action: (event: MouseEvent) => void;
|
||||
}
|
||||
|
||||
export interface ToastData {
|
||||
text: string;
|
||||
icon?: string;
|
||||
action?: ToastAction;
|
||||
}
|
||||
|
||||
const toaster = new Toaster<ToastData>();
|
||||
|
||||
export const addToast = toaster.addToast;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Toaster } from 'melt/builders';
|
||||
import { fly } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
<div {...toaster.root} style:--toasts={toaster.toasts.length} popover="manual">
|
||||
{#each toaster.toasts as toast (toast.id)}
|
||||
<nav {...toast.content} in:fly={{ y: 60, opacity: 0.9 }} out:fly={{ y: 20 }}>
|
||||
<p {...toast.title}>
|
||||
{#if toast.data.icon}
|
||||
<i>{toast.data.icon}</i>
|
||||
{/if}
|
||||
{toast.data.text}
|
||||
</p>
|
||||
{#if toast.data.action}
|
||||
<button onclick={(event) => toast.data.action?.action(event)} aria-label="dismiss alert">
|
||||
{#if toast.data.action.icon}
|
||||
<i>{toast.data.action.icon}</i>
|
||||
{/if}
|
||||
{#if toast.data.action.text}
|
||||
<span>{toast.data.action.text}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</nav>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-melt-toaster-root] {
|
||||
--gap: 0.75rem;
|
||||
--hover-offset: 1rem;
|
||||
--toast-height: 4rem;
|
||||
--hidden-offset: 0.75rem;
|
||||
|
||||
--hidden-toasts: calc(var(--toasts) - 1);
|
||||
|
||||
overflow: visible;
|
||||
display: grid;
|
||||
grid-template-rows: var(--toast-height) repeat(var(--hidden-toasts), var(--hidden-offset));
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
background: unset;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[data-melt-toaster-toast-content]:nth-last-child(n + 4) {
|
||||
z-index: 1;
|
||||
scale: 0.925;
|
||||
opacity: 0;
|
||||
translate: 0 calc(-3 * var(--hidden-offset));
|
||||
}
|
||||
|
||||
[data-melt-toaster-toast-content]:nth-last-child(-n + 3) {
|
||||
z-index: 2;
|
||||
scale: 0.95;
|
||||
translate: 0 calc(-2 * var(--hidden-offset));
|
||||
}
|
||||
|
||||
[data-melt-toaster-toast-content]:nth-last-child(-n + 2) {
|
||||
z-index: 3;
|
||||
scale: 0.975;
|
||||
translate: 0 calc(-1 * var(--hidden-offset));
|
||||
}
|
||||
|
||||
[data-melt-toaster-toast-content]:nth-last-child(-n + 1) {
|
||||
z-index: 4;
|
||||
scale: 1;
|
||||
translate: 0;
|
||||
}
|
||||
|
||||
[data-melt-toaster-root]:hover [data-melt-toaster-toast-content] {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
--toast-gap: calc(calc(var(--gap) * var(--n)) + var(--hover-offset));
|
||||
--percentage: calc(-100% * calc(var(--n) - 1));
|
||||
translate: 0 calc(var(--percentage) - var(--toast-gap));
|
||||
}
|
||||
|
||||
[data-melt-toaster-toast-content] {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
inline-size: 80%;
|
||||
max-inline-size: 24rem;
|
||||
block-size: auto;
|
||||
z-index: 200;
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
background-color: var(--surface-container-low);
|
||||
color: var(--on-surface);
|
||||
box-shadow: none;
|
||||
border: 0.0625rem solid var(--outline-variant);
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
align-items: center;
|
||||
border-radius: 0.25rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
[data-melt-toaster-toast-content] {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: 4.5rem;
|
||||
inline-size: auto;
|
||||
max-inline-size: none;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -44,6 +44,7 @@
|
||||
import { pwaInfo } from 'virtual:pwa-info';
|
||||
import { truncate } from '$lib/misc';
|
||||
import Author from '$lib/components/Author.svelte';
|
||||
import Toast from '$lib/components/Toast.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
@@ -446,6 +447,7 @@
|
||||
{/if}
|
||||
|
||||
<SyncParty />
|
||||
<Toast />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user