mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-12-19 23:10:10 +00:00
merge: Feat: Flash playback using Ruffle (!687)
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/687 Closes #694 Approved-by: Hazelnoot <acomputerdog@gmail.com> Approved-by: dakkar <dakkar@thenautilus.net>
This commit is contained in:
dakkar
commit
2d304d746d
30 changed files with 2066 additions and 756 deletions
38
locales/index.d.ts
vendored
38
locales/index.d.ts
vendored
|
|
@ -11004,6 +11004,44 @@ export interface Locale extends ILocale {
|
|||
* Show warning when opening external URLs
|
||||
*/
|
||||
"warnExternalUrl": string;
|
||||
/**
|
||||
* Flash
|
||||
*/
|
||||
"flash": string;
|
||||
"_flash": {
|
||||
/**
|
||||
* Flash Content Hidden
|
||||
*/
|
||||
"contentHidden": string;
|
||||
/**
|
||||
* Powered by Ruffle.
|
||||
*/
|
||||
"poweredByRuffle": string;
|
||||
/**
|
||||
* Always be wary of arbitrary code execution!
|
||||
*/
|
||||
"arbitraryCodeExecutionWarning": string;
|
||||
/**
|
||||
* Flash Content Failed To Load:
|
||||
*/
|
||||
"failedToLoad": string;
|
||||
/**
|
||||
* Flash Content Is Loading
|
||||
*/
|
||||
"isLoading": string;
|
||||
/**
|
||||
* Loading Ruffle player
|
||||
*/
|
||||
"loadingRufflePlayer": string;
|
||||
/**
|
||||
* Loading Flash file
|
||||
*/
|
||||
"loadingFlashFile": string;
|
||||
/**
|
||||
* raw.esm.sh could not be accessed, meaning this instance's Content Security Policy is likely out of date. Please contact your instance administrators.
|
||||
*/
|
||||
"cspError": string;
|
||||
};
|
||||
"_mfm": {
|
||||
/**
|
||||
* This is not a widespread feature, it may not display properly on most other fedi software, including other Misskey forks
|
||||
|
|
|
|||
1
packages/frontend-embed/@types/global.d.ts
vendored
1
packages/frontend-embed/@types/global.d.ts
vendored
|
|
@ -14,6 +14,7 @@ declare const _PERF_PREFIX_: string;
|
|||
declare const _DATA_TRANSFER_DRIVE_FILE_: string;
|
||||
declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
|
||||
declare const _DATA_TRANSFER_DECK_COLUMN_: string;
|
||||
declare const _RUFFLE_VERSION_: string;
|
||||
|
||||
// for dev-mode
|
||||
declare const _LANGS_FULL_: string[][];
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<a :href="href" target="_blank" :class="$style.root">
|
||||
<div :class="$style.label">
|
||||
<template v-if="media.type.startsWith('audio')"><i class="ti ti-music"></i> {{ i18n.ts.audio }}</template>
|
||||
<template v-else-if="media.type.startsWith('application') && media.type.includes('flash')"><i class="ti ti-bolt"></i> {{ i18n.ts.flash }}</template>
|
||||
<template v-else><i class="ti ti-file"></i> {{ i18n.ts.file }}</template>
|
||||
</div>
|
||||
<div :class="$style.go">
|
||||
|
|
|
|||
1
packages/frontend-shared/@types/global.d.ts
vendored
1
packages/frontend-shared/@types/global.d.ts
vendored
|
|
@ -15,6 +15,7 @@ declare const _PERF_PREFIX_: string;
|
|||
declare const _DATA_TRANSFER_DRIVE_FILE_: string;
|
||||
declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
|
||||
declare const _DATA_TRANSFER_DECK_COLUMN_: string;
|
||||
declare const _RUFFLE_VERSION_: string;
|
||||
|
||||
// for dev-mode
|
||||
declare const _LANGS_FULL_: string[][];
|
||||
|
|
|
|||
|
|
@ -99,6 +99,15 @@ export const FILE_EXT_TRACKER_MODULES = [
|
|||
'mmcmp',
|
||||
];
|
||||
|
||||
export const FILE_TYPE_FLASH_CONTENT = [
|
||||
'application/x-shockwave-flash',
|
||||
'application/vnd.adobe.flash.movie',
|
||||
];
|
||||
|
||||
export const FILE_EXT_FLASH_CONTENT = [
|
||||
'swf',
|
||||
];
|
||||
|
||||
/*
|
||||
https://github.com/sindresorhus/file-type/blob/main/supported.js
|
||||
https://github.com/sindresorhus/file-type/blob/main/core.js
|
||||
|
|
|
|||
1
packages/frontend/@types/global.d.ts
vendored
1
packages/frontend/@types/global.d.ts
vendored
|
|
@ -14,6 +14,7 @@ declare const _PERF_PREFIX_: string;
|
|||
declare const _DATA_TRANSFER_DRIVE_FILE_: string;
|
||||
declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
|
||||
declare const _DATA_TRANSFER_DECK_COLUMN_: string;
|
||||
declare const _RUFFLE_VERSION_: string;
|
||||
|
||||
// for dev-mode
|
||||
declare const _LANGS_FULL_: string[][];
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export default [
|
|||
_DATA_TRANSFER_DRIVE_FILE_: false,
|
||||
_DATA_TRANSFER_DRIVE_FOLDER_: false,
|
||||
_DATA_TRANSFER_DECK_COLUMN_: false,
|
||||
_RUFFLE_VERSION_: false,
|
||||
},
|
||||
parser,
|
||||
parserOptions: {
|
||||
|
|
|
|||
|
|
@ -25,8 +25,9 @@
|
|||
"@rollup/plugin-json": "6.1.0",
|
||||
"@rollup/plugin-replace": "5.0.7",
|
||||
"@rollup/pluginutils": "5.1.2",
|
||||
"@transfem-org/sfm-js": "0.24.5",
|
||||
"@ruffle-rs/ruffle": "0.1.0-nightly.2024.10.15",
|
||||
"@syuilo/aiscript": "0.19.0",
|
||||
"@transfem-org/sfm-js": "0.24.5",
|
||||
"@twemoji/parser": "15.1.1",
|
||||
"@vitejs/plugin-vue": "5.1.4",
|
||||
"@vue/compiler-sfc": "3.5.10",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template v-for="media in mediaList.filter(media => previewable(media))">
|
||||
<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :class="$style.media" :video="media"/>
|
||||
<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/>
|
||||
<XModPlayer v-else-if="isModule(media)" :key="media.id" :module="media"/>
|
||||
<XModPlayer v-else-if="isModule(media)" :key="`module:${media.id}`" :class="$style.media" :module="media"/>
|
||||
<XFlashPlayer v-else-if="isFlash(media)" :key="`flash:${media.id}`" :class="$style.media" :flashFile="media"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,8 +39,9 @@ import XBanner from '@/components/MkMediaBanner.vue';
|
|||
import XImage from '@/components/MkMediaImage.vue';
|
||||
import XVideo from '@/components/MkMediaVideo.vue';
|
||||
import XModPlayer from '@/components/SkModPlayer.vue';
|
||||
import XFlashPlayer from '@/components/SkFlashPlayer.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { FILE_TYPE_BROWSERSAFE, FILE_EXT_TRACKER_MODULES, FILE_TYPE_TRACKER_MODULES } from '@@/js/const.js';
|
||||
import { FILE_TYPE_BROWSERSAFE, FILE_EXT_TRACKER_MODULES, FILE_TYPE_TRACKER_MODULES, FILE_TYPE_FLASH_CONTENT, FILE_EXT_FLASH_CONTENT } from '@@/js/const.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { focusParent } from '@/scripts/focus.js';
|
||||
|
||||
|
|
@ -99,6 +101,12 @@ const isModule = (file: Misskey.entities.DriveFile): boolean => {
|
|||
});
|
||||
};
|
||||
|
||||
const isFlash = (file: Misskey.entities.DriveFile): boolean => {
|
||||
return FILE_TYPE_FLASH_CONTENT.includes(file.type) || FILE_EXT_FLASH_CONTENT.some((ext) => {
|
||||
return (file.name.toLowerCase().endsWith('.' + ext) || file.name.toLowerCase().endsWith('.' + ext + '.unknown'));
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
calcAspectRatio();
|
||||
|
||||
|
|
@ -224,6 +232,7 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
|
|||
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
|
||||
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
|
||||
if (isModule(file)) return true;
|
||||
if (isFlash(file)) return true;
|
||||
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
|
||||
};
|
||||
|
||||
|
|
|
|||
493
packages/frontend/src/components/SkFlashPlayer.vue
Normal file
493
packages/frontend/src/components/SkFlashPlayer.vue
Normal file
|
|
@ -0,0 +1,493 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: CenTdemeern1 and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.flash_player_container">
|
||||
<canvas :class="$style.ratio" height="300" width="300"></canvas>
|
||||
|
||||
<div v-if="hide" :class="$style.flash_player_disabled" @click="toggleVisible()">
|
||||
<div>
|
||||
<b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
|
||||
<span>{{ i18n.ts.clickToShow }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else :class="$style.flash_player_enabled">
|
||||
<div :class="$style.flash_display">
|
||||
<div v-if="playerHide" :class="$style.player_hide" @click="dismissWarning()">
|
||||
<b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts._flash.contentHidden }}</b>
|
||||
<span>{{ i18n.ts._flash.poweredByRuffle }}</span>
|
||||
<span>{{ i18n.ts._flash.arbitraryCodeExecutionWarning }}</span>
|
||||
<span>{{ i18n.ts.clickToShow }}</span>
|
||||
</div>
|
||||
<div v-if="ruffleError" :class="$style.player_hide">
|
||||
<b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts._flash.failedToLoad }}</b>
|
||||
<code>{{ ruffleError }}</code>
|
||||
</div>
|
||||
<div v-else-if="loadingStatus" :class="$style.player_hide">
|
||||
<b>{{ i18n.ts._flash.isLoading }}<MkEllipsis/></b>
|
||||
<MkLoading/>
|
||||
<p>{{ loadingStatus }}</p>
|
||||
</div>
|
||||
<div ref="ruffleContainer" :class="$style.container"></div>
|
||||
</div>
|
||||
<div :class="$style.controls">
|
||||
<button :key="playPauseButtonKey" @click="playPause()">
|
||||
<i v-if="player?.isPlaying" class="ph-pause ph-bold ph-lg"></i>
|
||||
<i v-else class="ph-play ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button :disabled="playerHide" @click="stop()">
|
||||
<i class="ph-stop ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<input v-if="player && !playerHide" v-model="player.volume" type="range" min="0" max="1" step="0.1"/>
|
||||
<input v-else type="range" min="0" max="1" value="1" disabled/>
|
||||
<a :title="i18n.ts.download" :href="flashFile.url" :download="flashFile.name" target="_blank">
|
||||
<i class="ph-download ph-bold ph-lg"></i>
|
||||
</a>
|
||||
<button :class="$style.fullscreen" :disabled="playerHide" @click="fullscreen()">
|
||||
<i class="ph-arrows-out ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="comment" :class="$style.alt" :title="comment">ALT</div>
|
||||
<i :class="$style.hide" class="ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onDeactivated } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkEllipsis from '@/components/global/MkEllipsis.vue';
|
||||
import MkLoading from '@/components/global/MkLoading.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { PublicAPI, PublicAPILike } from '@/types/ruffle/setup'; // This gives us the types for window.RufflePlayer, etc via side effects
|
||||
import { PlayerElement } from '@/types/ruffle/player';
|
||||
|
||||
const props = defineProps<{
|
||||
flashFile: Misskey.entities.DriveFile
|
||||
}>();
|
||||
|
||||
const isSensitive = props.flashFile.isSensitive;
|
||||
const url = props.flashFile.url;
|
||||
const comment = props.flashFile.comment ?? '';
|
||||
let hide = ref((defaultStore.state.nsfw === 'force') || isSensitive && (defaultStore.state.nsfw !== 'ignore'));
|
||||
let playerHide = ref(true);
|
||||
let ruffleContainer = ref<HTMLDivElement>();
|
||||
let playPauseButtonKey = ref<number>(0);
|
||||
let loadingStatus = ref<string | undefined>(undefined);
|
||||
let player = ref<PlayerElement | undefined>(undefined);
|
||||
let ruffleError = ref<string | undefined>(undefined);
|
||||
|
||||
async function dismissWarning() {
|
||||
playerHide.value = false;
|
||||
try {
|
||||
await loadRuffle();
|
||||
createPlayer();
|
||||
await loadContent();
|
||||
} catch (error) {
|
||||
handleError(error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleError(error: unknown) {
|
||||
if (error instanceof Error) ruffleError.value = error.stack;
|
||||
else ruffleError.value = `${error}`; // Fallback for if something is horribly wrong
|
||||
}
|
||||
|
||||
/**
|
||||
* @throws if esm.sh shits itself
|
||||
*/
|
||||
async function loadRuffle() {
|
||||
if (window.RufflePlayer !== undefined) return;
|
||||
loadingStatus.value = i18n.ts._flash.loadingRufflePlayer;
|
||||
await import('@ruffle-rs/ruffle'); // Assumption: this will throw if esm.sh has a hiccup or something. If not, the next undefined check will catch it.
|
||||
window.RufflePlayer = window.RufflePlayer as PublicAPILike | PublicAPI | undefined; // Assert unknown type due to side effects
|
||||
if (window.RufflePlayer === undefined) throw Error('esm.sh has shit itself, but not in an expected way (has esm.sh permanently shut down? how close is the heat death of the universe?)');
|
||||
|
||||
window.RufflePlayer.config = {
|
||||
// Options affecting the whole page
|
||||
'publicPath': `https://raw.esm.sh/@ruffle-rs/ruffle@${_RUFFLE_VERSION_}/`,
|
||||
'polyfills': false,
|
||||
|
||||
// Options affecting files only
|
||||
'allowScriptAccess': false,
|
||||
'autoplay': true,
|
||||
'unmuteOverlay': 'visible',
|
||||
'backgroundColor': null,
|
||||
'wmode': 'window',
|
||||
'letterbox': 'on',
|
||||
'warnOnUnsupportedContent': true,
|
||||
'contextMenu': 'off', // Prevent two overlapping context menus. Most of the stuff in this context menu is available in the controls below the player.
|
||||
'showSwfDownload': false, // Handled by custom download button
|
||||
'upgradeToHttps': window.location.protocol === 'https:',
|
||||
'maxExecutionDuration': 15,
|
||||
'logLevel': 'error',
|
||||
'base': null,
|
||||
'menu': true,
|
||||
'salign': '',
|
||||
'forceAlign': false,
|
||||
'scale': 'showAll',
|
||||
'forceScale': false,
|
||||
'frameRate': null,
|
||||
'quality': 'high',
|
||||
'splashScreen': false,
|
||||
'preferredRenderer': null,
|
||||
'openUrlMode': 'deny',
|
||||
'allowNetworking': 'none',
|
||||
'favorFlash': false,
|
||||
'socketProxy': [],
|
||||
'fontSources': [],
|
||||
'defaultFonts': {},
|
||||
'credentialAllowList': [],
|
||||
'playerRuntime': 'flashPlayer',
|
||||
'allowFullscreen': false, // Handled by custom fullscreen button
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @throws If `ruffle.newest()` fails (impossible)
|
||||
*/
|
||||
function createPlayer() {
|
||||
if (player.value !== undefined) return;
|
||||
const ruffle = (() => {
|
||||
const ruffleAPI = (window.RufflePlayer as PublicAPI).newest();
|
||||
if (ruffleAPI === null) {
|
||||
// This error exists because non-null assertions are forbidden, apparently.
|
||||
throw Error('Ruffle could not get the latest Ruffle source. Since we\'re loading from esm.sh this is genuinely impossible and you must\'ve done something incredibly cursed.');
|
||||
}
|
||||
return ruffleAPI;
|
||||
})();
|
||||
player.value = ruffle.createPlayer();
|
||||
player.value.style.width = '100%';
|
||||
player.value.style.height = '100%';
|
||||
}
|
||||
|
||||
/**
|
||||
* @throws If `player.value` is uninitialized.
|
||||
*/
|
||||
async function loadContent() {
|
||||
if (player.value === undefined) throw Error('Player is uninitialized.');
|
||||
ruffleContainer.value?.appendChild(player.value);
|
||||
loadingStatus.value = i18n.ts._flash.loadingFlashFile;
|
||||
try {
|
||||
await player.value.load(url);
|
||||
loadingStatus.value = undefined;
|
||||
} catch (error) {
|
||||
try {
|
||||
await fetch('https://raw.esm.sh/', {
|
||||
mode: 'cors',
|
||||
});
|
||||
handleError(error); // Unexpected error
|
||||
} catch (_) {
|
||||
// Must be CSP because esm.sh should be online if `loadRuffle()` didn't fail
|
||||
handleError(i18n.ts._flash.cspError);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function playPause() {
|
||||
if (playerHide.value) {
|
||||
dismissWarning();
|
||||
return;
|
||||
}
|
||||
if (player.value === undefined) return; // Not done loading or something
|
||||
if (player.value.isPlaying) {
|
||||
player.value.pause();
|
||||
} else {
|
||||
player.value.play();
|
||||
}
|
||||
playPauseButtonKey.value += 1; // HACK: Used to re-render play/pause button
|
||||
}
|
||||
|
||||
function fullscreen() {
|
||||
if (player.value === undefined) return; // Can't fullscreen an element that doesn't exist.
|
||||
if (player.value.isFullscreen) {
|
||||
player.value.exitFullscreen();
|
||||
} else {
|
||||
player.value.enterFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function stop() {
|
||||
if (player.value === undefined) return; // FIXME: This doesn't stop the loading process. (That said, should this even be implemented?)
|
||||
try {
|
||||
ruffleContainer.value?.removeChild(player.value);
|
||||
} catch {
|
||||
// This is fine
|
||||
}
|
||||
playerHide.value = true;
|
||||
}
|
||||
|
||||
function toggleVisible() {
|
||||
hide.value = !hide.value;
|
||||
playerHide.value = true;
|
||||
}
|
||||
|
||||
onDeactivated(() => {
|
||||
stop();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
.flash_player_container {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
border-radius: var(--radius-sm) !important;
|
||||
background-color: black !important;
|
||||
color: var(--accentLighten) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.flash_player_enabled {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
font-size: 14px;
|
||||
opacity: .5;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
> .alt {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: black;
|
||||
color: var(--accentLighten);
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
opacity: .5;
|
||||
padding: 2px 5px;
|
||||
cursor: help;
|
||||
user-select: none;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
> .flash_display {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-grow: 10;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player_hide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(64, 64, 64, 0.3);
|
||||
backdrop-filter: var(--modalBgFilter);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> .container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .controls {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: var(--bg);
|
||||
z-index: 5;
|
||||
|
||||
> * {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
> button, a {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
filter: grayscale(100%);
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
> .fullscreen {
|
||||
margin-left: auto;
|
||||
|
||||
&:disabled {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
> input[type=range] {
|
||||
height: 21px;
|
||||
-webkit-appearance: none;
|
||||
width: 90px;
|
||||
padding: 0;
|
||||
margin: 4px 8px;
|
||||
overflow-x: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
filter: grayscale(100%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower, &::-ms-fill-upper {
|
||||
background: var(--bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
animate: 0.2s;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--fg);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 14px;
|
||||
border-radius: 0;
|
||||
background: var(--accentLighten);
|
||||
-webkit-appearance: none;
|
||||
box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
|
||||
clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
animate: 0.2s;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--fg);
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
width: 14px;
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
animate: 0.2s;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--fg);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--fg);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
margin-top: 1px;
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 14px;
|
||||
border-radius: 0;
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flash_player_disabled {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
> div {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
> b {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -440,9 +440,9 @@ onDeactivated(() => {
|
|||
<style lang="scss" module>
|
||||
|
||||
.hide {
|
||||
border-radius: var(--radius-sm) !important;
|
||||
border-radius: var(--MI-radius-sm) !important;
|
||||
background-color: black !important;
|
||||
color: var(--accentLighten) !important;
|
||||
color: var(--MI_THEME-accentLighten) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
|
|
@ -456,9 +456,9 @@ onDeactivated(() => {
|
|||
> i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
border-radius: var(--MI-radius-sm);
|
||||
background-color: var(--MI_THEME-fg);
|
||||
color: var(--MI_THEME-accentLighten);
|
||||
font-size: 14px;
|
||||
opacity: .5;
|
||||
padding: 3px 6px;
|
||||
|
|
@ -519,7 +519,7 @@ onDeactivated(() => {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(64, 64, 64, 0.3);
|
||||
backdrop-filter: var(--modalBgFilter);
|
||||
backdrop-filter: var(--MI-modalBgFilter);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
|
|
@ -537,7 +537,7 @@ onDeactivated(() => {
|
|||
> .controls {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
z-index: 5;
|
||||
|
||||
> * {
|
||||
|
|
@ -547,11 +547,11 @@ onDeactivated(() => {
|
|||
> button, a {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg);
|
||||
background-color: var(--MI_THEME-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -579,11 +579,11 @@ onDeactivated(() => {
|
|||
outline: none;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower, &::-ms-fill-upper {
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -593,8 +593,8 @@ onDeactivated(() => {
|
|||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
animate: 0.2s;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--fg);
|
||||
background: var(--MI_THEME-bg);
|
||||
border: 1px solid var(--MI_THEME-fg);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -603,10 +603,10 @@ onDeactivated(() => {
|
|||
height: 100%;
|
||||
width: 14px;
|
||||
border-radius: 0;
|
||||
background: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
|
||||
box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
|
||||
clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -617,14 +617,14 @@ onDeactivated(() => {
|
|||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
animate: 0.2s;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--fg);
|
||||
background: var(--MI_THEME-bg);
|
||||
border: 1px solid var(--MI_THEME-fg);
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
|
|
@ -632,7 +632,7 @@ onDeactivated(() => {
|
|||
height: 100%;
|
||||
border-radius: 0;
|
||||
width: 14px;
|
||||
background: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -648,14 +648,14 @@ onDeactivated(() => {
|
|||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--fg);
|
||||
background: var(--MI_THEME-accent);
|
||||
border: 1px solid var(--MI_THEME-fg);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--fg);
|
||||
background: var(--MI_THEME-bg);
|
||||
border: 1px solid var(--MI_THEME-fg);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
@ -665,7 +665,7 @@ onDeactivated(() => {
|
|||
height: 100%;
|
||||
width: 14px;
|
||||
border-radius: 0;
|
||||
background: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self' https://newassets.hcaptcha.com/ https://challenges.cloudflare.com/ http://localhost:7493/;
|
||||
worker-src 'self' blob:;
|
||||
script-src 'self' 'unsafe-eval' https://*.hcaptcha.com https://challenges.cloudflare.com https://esm.sh https://cdn.jsdelivr.net;
|
||||
script-src 'self' 'unsafe-eval' https://*.hcaptcha.com https://challenges.cloudflare.com https://esm.sh https://cdn.jsdelivr.net https://raw.esm.sh;
|
||||
style-src 'self' 'unsafe-inline';
|
||||
img-src 'self' data: blob: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 activitypub.software secure.gravatar.com avatars.githubusercontent.com;
|
||||
media-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
|
||||
connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com https://api.listenbrainz.org https://api.friendlycaptcha.com;
|
||||
connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com https://api.listenbrainz.org https://api.friendlycaptcha.com https://raw.esm.sh;
|
||||
frame-src *;"
|
||||
/>
|
||||
<meta property="og:site_name" content="[DEV BUILD] Misskey" />
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const KEY_ALIASES = {
|
|||
|
||||
const MODIFIER_KEYS = ['ctrl', 'alt', 'shift'];
|
||||
|
||||
const IGNORE_ELEMENTS = ['input', 'textarea'];
|
||||
const IGNORE_ELEMENTS = ['input', 'textarea', 'ruffle-player'];
|
||||
//#endregion
|
||||
|
||||
//#region store
|
||||
|
|
|
|||
2
packages/frontend/src/types/ruffle/config/default.d.ts
vendored
Normal file
2
packages/frontend/src/types/ruffle/config/default.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import type { BaseLoadOptions } from './load-options.d.ts';
|
||||
export declare const DEFAULT_CONFIG: Required<BaseLoadOptions>;
|
||||
10
packages/frontend/src/types/ruffle/config/index.d.ts
vendored
Normal file
10
packages/frontend/src/types/ruffle/config/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/**
|
||||
* The Config module contains all the types that Ruffle uses for movie configs.
|
||||
*
|
||||
* The main interface of interest here is {@link BaseLoadOptions}, which you can apply to `window.RufflePlayer.config`
|
||||
* to set the default configuration of all players.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
export type * from './default.d.ts';
|
||||
export type * from './load-options.d.ts';
|
||||
620
packages/frontend/src/types/ruffle/config/load-options.d.ts
vendored
Normal file
620
packages/frontend/src/types/ruffle/config/load-options.d.ts
vendored
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
/**
|
||||
* Represents the various types of auto-play behaviours that are supported.
|
||||
*/
|
||||
export declare enum AutoPlay {
|
||||
/**
|
||||
* The player should automatically play the movie as soon as it is loaded.
|
||||
*
|
||||
* If the browser does not support automatic audio, the movie will begin
|
||||
* muted.
|
||||
*/
|
||||
On = "on",
|
||||
/**
|
||||
* The player should not attempt to automatically play the movie.
|
||||
*
|
||||
* This will leave it to the user or API to actually play when appropriate.
|
||||
*/
|
||||
Off = "off",
|
||||
/**
|
||||
* The player should automatically play the movie as soon as it is deemed
|
||||
* "appropriate" to do so.
|
||||
*
|
||||
* The exact behaviour depends on the browser, but commonly requires some
|
||||
* form of user interaction on the page in order to allow auto playing videos
|
||||
* with sound.
|
||||
*/
|
||||
Auto = "auto"
|
||||
}
|
||||
/**
|
||||
* Controls whether the content is letterboxed or pillarboxed when the
|
||||
* player's aspect ratio does not match the movie's aspect ratio.
|
||||
*
|
||||
* When letterboxed, black bars will be rendered around the exterior
|
||||
* margins of the content.
|
||||
*/
|
||||
export declare enum Letterbox {
|
||||
/**
|
||||
* The content will never be letterboxed.
|
||||
*/
|
||||
Off = "off",
|
||||
/**
|
||||
* The content will only be letterboxed if the content is running fullscreen.
|
||||
*/
|
||||
Fullscreen = "fullscreen",
|
||||
/**
|
||||
* The content will always be letterboxed.
|
||||
*/
|
||||
On = "on"
|
||||
}
|
||||
/**
|
||||
* When the player is muted, this controls whether or not Ruffle will show a
|
||||
* "click to unmute" overlay on top of the movie.
|
||||
*/
|
||||
export declare enum UnmuteOverlay {
|
||||
/**
|
||||
* Show an overlay explaining that the movie is muted.
|
||||
*/
|
||||
Visible = "visible",
|
||||
/**
|
||||
* Don't show an overlay and pretend that everything is fine.
|
||||
*/
|
||||
Hidden = "hidden"
|
||||
}
|
||||
/**
|
||||
* Console logging level.
|
||||
*/
|
||||
export declare enum LogLevel {
|
||||
Error = "error",
|
||||
Warn = "warn",
|
||||
Info = "info",
|
||||
Debug = "debug",
|
||||
Trace = "trace"
|
||||
}
|
||||
/**
|
||||
* The window mode of a Ruffle player.
|
||||
*/
|
||||
export declare enum WindowMode {
|
||||
/**
|
||||
* The Flash content is rendered in its own window and layering is done with the browser's
|
||||
* default behavior.
|
||||
*
|
||||
* In Ruffle, this mode functions like `WindowMode::Opaque` and will layer the Flash content
|
||||
* together with other HTML elements.
|
||||
*/
|
||||
Window = "window",
|
||||
/**
|
||||
* The Flash content is layered together with other HTML elements, and the stage color is
|
||||
* opaque. Content can render above or below Ruffle based on CSS rendering order.
|
||||
*/
|
||||
Opaque = "opaque",
|
||||
/**
|
||||
* The Flash content is layered together with other HTML elements, and the SWF stage color is
|
||||
* transparent. Content beneath Ruffle will be visible through transparent areas.
|
||||
*/
|
||||
Transparent = "transparent",
|
||||
/**
|
||||
* Request compositing with hardware acceleration when possible.
|
||||
* This mode has no effect in Ruffle and will function like `WindowMode.Opaque`.
|
||||
*/
|
||||
Direct = "direct",
|
||||
/**
|
||||
* Request a direct rendering path, bypassing browser compositing when possible.
|
||||
* This mode has no effect in Ruffle and will function like `WindowMode::Opaque`.
|
||||
*/
|
||||
Gpu = "gpu"
|
||||
}
|
||||
/**
|
||||
* The render backend of a Ruffle player.
|
||||
*
|
||||
* The available backends may change in future releases.
|
||||
*/
|
||||
export declare enum RenderBackend {
|
||||
/**
|
||||
* An [in-development API](https://caniuse.com/webgpu) that will be preferred if available in the future.
|
||||
* Should behave the same as wgpu-webgl, except with lower overhead and thus better performance.
|
||||
*/
|
||||
WebGpu = "webgpu",
|
||||
/**
|
||||
* The most featureful and currently preferred backend.
|
||||
* Rendering is done the same way as in the desktop app, then translated to WebGL on-the-fly.
|
||||
*/
|
||||
WgpuWebgl = "wgpu-webgl",
|
||||
/**
|
||||
* A vanilla WebGL backend. Was the default backend until the start of 2023,
|
||||
* but is now used as a fallback for devices that do not support WebGL 2.
|
||||
* Supports fewer features and has a faster initialization time;
|
||||
* may be useful for content that does not need advanced features like bitmap drawing or blend modes.
|
||||
*/
|
||||
Webgl = "webgl",
|
||||
/**
|
||||
* The slowest and most basic backend, used as a fallback when all else fails.
|
||||
* However, this is currently the only backend that accurately scales hairline strokes.
|
||||
* If you notice excessively thick strokes in specific content,
|
||||
* you may want to use the canvas renderer for that content until the issue is resolved.
|
||||
*/
|
||||
Canvas = "canvas"
|
||||
}
|
||||
/**
|
||||
* Represents the various context menu options that are supported.
|
||||
*/
|
||||
export declare enum ContextMenu {
|
||||
/**
|
||||
* The context menu should appear when right-clicking or long-pressing
|
||||
* the Ruffle instance.
|
||||
*/
|
||||
On = "on",
|
||||
/**
|
||||
* The context menu should only appear when right-clicking
|
||||
* the Ruffle instance.
|
||||
*/
|
||||
RightClickOnly = "rightClickOnly",
|
||||
/**
|
||||
* The context menu should not appear when right-clicking or long-pressing
|
||||
* the Ruffle instance.
|
||||
*/
|
||||
Off = "off"
|
||||
}
|
||||
/**
|
||||
* Represents the player runtime to emulate.
|
||||
*/
|
||||
export declare enum PlayerRuntime {
|
||||
/**
|
||||
* Emulate Adobe AIR.
|
||||
*/
|
||||
AIR = "air",
|
||||
/**
|
||||
* Emulate Adobe Flash Player.
|
||||
*/
|
||||
FlashPlayer = "flashPlayer"
|
||||
}
|
||||
/**
|
||||
* Non-negative duration in seconds.
|
||||
*/
|
||||
export type SecsDuration = number;
|
||||
/**
|
||||
* Deprecated duration type, use SecsDuration instead.
|
||||
* Based on https://doc.rust-lang.org/stable/std/time/struct.Duration.html#method.new .
|
||||
*/
|
||||
export interface ObsoleteDuration {
|
||||
secs: number;
|
||||
nanos: number;
|
||||
}
|
||||
/**
|
||||
* Any new duration-based setting should use 'number' or 'SecsDuration' for its type,
|
||||
* instead of this type.
|
||||
*/
|
||||
export type Duration = SecsDuration | ObsoleteDuration;
|
||||
/**
|
||||
* The handling mode of links opening a new website.
|
||||
*/
|
||||
export declare enum OpenURLMode {
|
||||
/**
|
||||
* Allow all links to open a new website.
|
||||
*/
|
||||
Allow = "allow",
|
||||
/**
|
||||
* A confirmation dialog opens with every link trying to open a new website.
|
||||
*/
|
||||
Confirm = "confirm",
|
||||
/**
|
||||
* Deny all links to open a new website.
|
||||
*/
|
||||
Deny = "deny"
|
||||
}
|
||||
/**
|
||||
* The networking API access mode of the Ruffle player.
|
||||
*/
|
||||
export declare enum NetworkingAccessMode {
|
||||
/**
|
||||
* All networking APIs are permitted in the SWF file.
|
||||
*/
|
||||
All = "all",
|
||||
/**
|
||||
* The SWF file may not call browser navigation or browser interaction APIs.
|
||||
*
|
||||
* The APIs navigateToURL(), fscommand() and ExternalInterface.call() are
|
||||
* prevented in this mode.
|
||||
*/
|
||||
Internal = "internal",
|
||||
/**
|
||||
* The SWF file may not call browser navigation or browser interaction APIs
|
||||
* and it cannot use any SWF-to-SWF communication APIs.
|
||||
*
|
||||
* Additionally to the ones in internal mode, the APIs sendToURL(),
|
||||
* FileReference.download(), FileReference.upload(), Loader.load(),
|
||||
* LocalConnection.connect(), LocalConnection.send(), NetConnection.connect(),
|
||||
* NetStream.play(), Security.loadPolicyFile(), SharedObject.getLocal(),
|
||||
* SharedObject.getRemote(), Socket.connect(), Sound.load(), URLLoader.load(),
|
||||
* URLStream.load() and XMLSocket.connect() are prevented in this mode.
|
||||
*
|
||||
* This mode is not implemented yet.
|
||||
*/
|
||||
None = "none"
|
||||
}
|
||||
/**
|
||||
* Represents a host, port and proxyUrl. Used when a SWF file tries to use a Socket.
|
||||
*/
|
||||
export interface SocketProxy {
|
||||
/**
|
||||
* Host used by the SWF.
|
||||
*/
|
||||
host: string;
|
||||
/**
|
||||
* Port used by the SWF.
|
||||
*/
|
||||
port: number;
|
||||
/**
|
||||
* The proxy URL to use when SWF file tries to connect to the specified host and port.
|
||||
*/
|
||||
proxyUrl: string;
|
||||
}
|
||||
/**
|
||||
* Defines the names of the fonts to use for each "default" Flash device font.
|
||||
*
|
||||
* The name of each font provided will be used, in priority order.
|
||||
*
|
||||
* For example, defining `sans: ["Helvetica", "Arial"]` would use Helvetica if present, before trying Arial.
|
||||
*/
|
||||
export interface DefaultFonts {
|
||||
/**
|
||||
* `_sans`, a Sans-Serif font (similar to Helvetica or Arial)
|
||||
*/
|
||||
sans?: Array<string>;
|
||||
/**
|
||||
* `_serif`, a Serif font (similar to Times Roman)
|
||||
*/
|
||||
serif?: Array<string>;
|
||||
/**
|
||||
* `_typewriter`, a Monospace font (similar to Courier)
|
||||
*/
|
||||
typewriter?: Array<string>;
|
||||
/**
|
||||
* `_ゴシック`, a Japanese Gothic font
|
||||
*/
|
||||
japaneseGothic?: Array<string>;
|
||||
/**
|
||||
* `_等幅`, a Japanese Gothic Mono font
|
||||
*/
|
||||
japaneseGothicMono?: Array<string>;
|
||||
/**
|
||||
* `_明朝`, a Japanese Mincho font
|
||||
*/
|
||||
japaneseMincho?: Array<string>;
|
||||
}
|
||||
/**
|
||||
* Any options used for loading a movie.
|
||||
*/
|
||||
export interface BaseLoadOptions {
|
||||
/**
|
||||
* If set to true, the movie is allowed to interact with the page through
|
||||
* JavaScript, using a flash concept called `ExternalInterface`.
|
||||
*
|
||||
* This should only be enabled for movies you trust.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
allowScriptAccess?: boolean;
|
||||
/**
|
||||
* Also known as "flashvars" - these are values that may be passed to
|
||||
* and loaded by the movie.
|
||||
*
|
||||
* If a URL if specified when loading the movie, some parameters will
|
||||
* be extracted by the query portion of that URL and then overwritten
|
||||
* by any explicitly set here.
|
||||
*
|
||||
* @default {}
|
||||
*/
|
||||
parameters?: URLSearchParams | string | Record<string, string> | null;
|
||||
/**
|
||||
* Controls the auto-play behaviour of Ruffle.
|
||||
*
|
||||
* @default AutoPlay.Auto
|
||||
*/
|
||||
autoplay?: AutoPlay;
|
||||
/**
|
||||
* Controls the background color of the player.
|
||||
* Must be an HTML color (e.g. "#FFFFFF"). CSS colors are not allowed.
|
||||
* `null` uses the background color of the SWF file.
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
backgroundColor?: string | null;
|
||||
/**
|
||||
* Controls letterbox behavior when the Flash container size does not
|
||||
* match the movie size.
|
||||
*
|
||||
* @default Letterbox.Fullscreen
|
||||
*/
|
||||
letterbox?: Letterbox;
|
||||
/**
|
||||
* Controls the visibility of the unmute overlay when the player
|
||||
* is started muted.
|
||||
*
|
||||
* @default UnmuteOverlay.Visible
|
||||
*/
|
||||
unmuteOverlay?: UnmuteOverlay;
|
||||
/**
|
||||
* Whether or not to auto-upgrade all embedded URLs to https.
|
||||
*
|
||||
* Flash content that embeds http urls will be blocked from
|
||||
* accessing those urls by the browser when Ruffle is loaded
|
||||
* in a https context. Set to `true` to automatically change
|
||||
* `http://` to `https://` for all embedded URLs when Ruffle is
|
||||
* loaded in an https context.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
upgradeToHttps?: boolean;
|
||||
/**
|
||||
* Enable (true) or disable (false) Ruffle's built in compatibility rules.
|
||||
*
|
||||
* These are rules that may make some content work by deliberately changing
|
||||
* behaviour, for example by rewriting requests or spoofing SWF urls if they
|
||||
* rely on websites that no longer exist.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
compatibilityRules?: boolean;
|
||||
/**
|
||||
* Favor using the real Adobe Flash Player over Ruffle if the browser supports it.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
favorFlash?: boolean;
|
||||
/**
|
||||
* This is no longer used and does not affect anything.
|
||||
* It is only kept for backwards compatibility.
|
||||
*
|
||||
* Previously:
|
||||
* "Whether or not to display an overlay with a warning when
|
||||
* loading a movie with unsupported content."
|
||||
*
|
||||
* @default true
|
||||
* @deprecated
|
||||
*/
|
||||
warnOnUnsupportedContent?: boolean;
|
||||
/**
|
||||
* Console logging level.
|
||||
*
|
||||
* @default LogLevel.Error
|
||||
*/
|
||||
logLevel?: LogLevel;
|
||||
/**
|
||||
* If set to true, the context menu has an option to download
|
||||
* the SWF.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
showSwfDownload?: boolean;
|
||||
/**
|
||||
* Whether or not to show a context menu when right-clicking
|
||||
* a Ruffle instance.
|
||||
*
|
||||
* @default ContextMenu.On
|
||||
*/
|
||||
contextMenu?: ContextMenu | boolean;
|
||||
/**
|
||||
* Whether or not to show a splash screen before the SWF has loaded with Ruffle (backwards-compatibility).
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
preloader?: boolean;
|
||||
/**
|
||||
* Whether or not to show a splash screen before the SWF has loaded with Ruffle.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
splashScreen?: boolean;
|
||||
/**
|
||||
* Maximum amount of time a script can take before scripting
|
||||
* is disabled.
|
||||
*
|
||||
* @default 15
|
||||
*/
|
||||
maxExecutionDuration?: Duration;
|
||||
/**
|
||||
* Specifies the base directory or URL used to resolve all relative path statements in the SWF file.
|
||||
* null means the current directory.
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
base?: string | null;
|
||||
/**
|
||||
* If set to true, the built-in context menu items are visible
|
||||
*
|
||||
* This is equivalent to Stage.showMenu.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
menu?: boolean;
|
||||
/**
|
||||
* This is equivalent to Stage.align.
|
||||
*
|
||||
* @default ""
|
||||
*/
|
||||
salign?: string;
|
||||
/**
|
||||
* If set to true, movies are prevented from changing the stage alignment.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
forceAlign?: boolean;
|
||||
/**
|
||||
* This is equivalent to Stage.quality.
|
||||
*
|
||||
* @default "high"
|
||||
*/
|
||||
quality?: string;
|
||||
/**
|
||||
* This is equivalent to Stage.scaleMode.
|
||||
*
|
||||
* @default "showAll"
|
||||
*/
|
||||
scale?: string;
|
||||
/**
|
||||
* If set to true, movies are prevented from changing the stage scale mode.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
forceScale?: boolean;
|
||||
/**
|
||||
* If set to true, the Stage's displayState can be changed
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
allowFullscreen?: boolean;
|
||||
/**
|
||||
* Sets and locks the player's frame rate, overriding the movie's frame rate.
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
frameRate?: number | null;
|
||||
/**
|
||||
* The window mode of the Ruffle player.
|
||||
*
|
||||
* This setting controls how the Ruffle container is layered and rendered with other content on the page.
|
||||
*
|
||||
* @default WindowMode.Window
|
||||
*/
|
||||
wmode?: WindowMode;
|
||||
/**
|
||||
* The emulated version of the player.
|
||||
*
|
||||
* This controls the version that is reported to the movie.
|
||||
* null means latest version.
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
playerVersion?: number | null;
|
||||
/**
|
||||
* The preferred render backend of the Ruffle player.
|
||||
*
|
||||
* This option should only be used for testing;
|
||||
* the available backends may change in future releases.
|
||||
* By default, Ruffle chooses the most featureful backend supported by the user's system,
|
||||
* falling back to more basic backends if necessary.
|
||||
* The available values in order of default preference are:
|
||||
* "webgpu", "wgpu-webgl", "webgl", "canvas".
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
preferredRenderer?: RenderBackend | null;
|
||||
/**
|
||||
* The URL at which Ruffle can load its extra files (i.e. `.wasm`).
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
publicPath?: string | null;
|
||||
/**
|
||||
* Whether or not to enable polyfills on the page.
|
||||
*
|
||||
* Polyfills will look for "legacy" flash content like `<object>`
|
||||
* and `<embed>` elements, and replace them with compatible
|
||||
* Ruffle elements.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
polyfills?: boolean;
|
||||
/**
|
||||
* The handling mode of links opening a new website.
|
||||
*
|
||||
* @default OpenURLMode.Allow
|
||||
*/
|
||||
openUrlMode?: OpenURLMode;
|
||||
/**
|
||||
* Which flash networking APIs may be accessed.
|
||||
*
|
||||
* @default NetworkingAccessMode.All
|
||||
*/
|
||||
allowNetworking?: NetworkingAccessMode;
|
||||
/**
|
||||
* A function to call for opening content in a new tab.
|
||||
*
|
||||
* This is only used if the content cannot be loaded due to CORS,
|
||||
* and the Extension version of Ruffle will override this to provide a local player.
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
openInNewTab?: ((swf: URL) => void) | null;
|
||||
/**
|
||||
* An array of SocketProxy objects.
|
||||
*
|
||||
* When a SWF tries to establish a Socket connection, Ruffle will search for
|
||||
* a matching SocketProxy object in this array and use it to establish a WebSocket connection,
|
||||
* through which all communication is tunneled through.
|
||||
*
|
||||
* When none are found, Ruffle will fail the connection gracefully.
|
||||
* When multiple matching SocketProxy objects exist, the first one is used.
|
||||
*
|
||||
* @default []
|
||||
*/
|
||||
socketProxy?: Array<SocketProxy>;
|
||||
/**
|
||||
* An array of font URLs to eagerly load and provide to Ruffle.
|
||||
*
|
||||
* These will be fetched by the browser as part of the loading of Flash content, which may slow down load times.
|
||||
*
|
||||
* Currently only SWFs are supported, and each font embedded within that SWF will be used as device font by Flash content.
|
||||
*
|
||||
* If any URL fails to load (either it's an invalid file, or a network error occurs), Ruffle will log an error but continue without it.
|
||||
*
|
||||
* @default []
|
||||
*/
|
||||
fontSources?: Array<string>;
|
||||
/**
|
||||
* The font names to use for each "default" Flash device font.
|
||||
*
|
||||
* @default {}
|
||||
*/
|
||||
defaultFonts?: DefaultFonts;
|
||||
/**
|
||||
* An array of origins that credentials may be sent to.
|
||||
* Credentials are cookies, authorization headers, or TLS client certificates.
|
||||
*
|
||||
* Entries should include the protocol and host, for example `https://example.org` or `http://subdomain.example.org`.
|
||||
*
|
||||
* Cookies will always be sent to the same origin as the page the content was loaded on.
|
||||
* If you configure this to send cookies to an origin but that origin does not configure CORS to allow it,
|
||||
* then requests will start failing due to CORS.
|
||||
* See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials.
|
||||
*
|
||||
* This directly corresponds to https://developer.mozilla.org/en-US/docs/Web/API/fetch#credentials
|
||||
* Every request will be `same-origin` unless specified here, in which case it will be `include`.
|
||||
*
|
||||
* @default []
|
||||
*/
|
||||
credentialAllowList?: Array<string>;
|
||||
/**
|
||||
* The player runtime to emulate
|
||||
*
|
||||
* This allows you to emulate Adobe AIR or Adobe Flash Player.
|
||||
*/
|
||||
playerRuntime?: PlayerRuntime;
|
||||
}
|
||||
/**
|
||||
* Options to load a movie by URL.
|
||||
*/
|
||||
export interface URLLoadOptions extends BaseLoadOptions {
|
||||
/**
|
||||
* The URL to load a movie from.
|
||||
*
|
||||
* If there is a query portion of this URL, then default {@link parameters}
|
||||
* will be extracted from that.
|
||||
*/
|
||||
url: string;
|
||||
}
|
||||
/**
|
||||
* Options to load a movie by a data stream.
|
||||
*/
|
||||
export interface DataLoadOptions extends BaseLoadOptions {
|
||||
/**
|
||||
* The data to load a movie from.
|
||||
*/
|
||||
data: ArrayLike<number> | ArrayBufferLike;
|
||||
/**
|
||||
* The filename of the SWF movie to provide to ActionScript.
|
||||
*
|
||||
* @default "movie.swf"
|
||||
*/
|
||||
swfFileName?: string;
|
||||
}
|
||||
17
packages/frontend/src/types/ruffle/player/flash.d.ts
vendored
Normal file
17
packages/frontend/src/types/ruffle/player/flash.d.ts
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* These are properties and methods that Flash added to its `<embed>/<object>` tags.
|
||||
* These don't seem to be documented in full anywhere, and Ruffle adds them as we encounter some.
|
||||
* You are discouraged from using these, and they exist only to support legacy websites from decades ago.
|
||||
*
|
||||
* Extra methods or properties may appear at any time, due to `ExternalInterface.addCallback()`.
|
||||
* It may even overwrite existing methods or properties.
|
||||
*/
|
||||
export interface FlashAPI {
|
||||
/**
|
||||
* Returns the movies loaded process, in a percent from 0 to 100.
|
||||
* Ruffle may just return 0 or 100.
|
||||
*
|
||||
* @returns a value from 0 to 100, inclusive.
|
||||
*/
|
||||
PercentLoaded(): number;
|
||||
}
|
||||
9
packages/frontend/src/types/ruffle/player/index.d.ts
vendored
Normal file
9
packages/frontend/src/types/ruffle/player/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* The Player module contains the actual {@link PlayerElement} and the various interfaces that exist to interact with the player.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
export type * from './flash.d.ts';
|
||||
export type * from './player-element.d.ts';
|
||||
export type * from './movie-metadata.d.ts';
|
||||
export type * from './legacy.d.ts';
|
||||
163
packages/frontend/src/types/ruffle/player/legacy.d.ts
vendored
Normal file
163
packages/frontend/src/types/ruffle/player/legacy.d.ts
vendored
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import type { DataLoadOptions, URLLoadOptions } from '../config/index.d.ts';
|
||||
import type { MovieMetadata } from './movie-metadata.d.ts';
|
||||
/**
|
||||
* Describes the loading state of an SWF movie.
|
||||
*/
|
||||
export enum ReadyState {
|
||||
/**
|
||||
* No movie is loaded, or no information is yet available about the movie.
|
||||
*/
|
||||
HaveNothing = 0,
|
||||
/**
|
||||
* The movie is still loading, but it has started playback, and metadata is available.
|
||||
*/
|
||||
Loading = 1,
|
||||
/**
|
||||
* The movie has completely loaded.
|
||||
*/
|
||||
Loaded = 2
|
||||
}
|
||||
/**
|
||||
* Legacy interface to the Ruffle API.
|
||||
*
|
||||
* These methods are deprecated and only exist for backwards compatibility.
|
||||
* Due to the nature of Flash, they may be replaced at any time via ActionScript's `ExternalInterface` class.
|
||||
*/
|
||||
export interface LegacyRuffleAPI {
|
||||
/**
|
||||
* A movie can communicate with the hosting page using fscommand
|
||||
* as long as script access is allowed.
|
||||
*
|
||||
* @param command A string passed to the host application for any use.
|
||||
* @param args A string passed to the host application for any use.
|
||||
* @returns True if the command was handled.
|
||||
*/
|
||||
onFSCommand: ((command: string, args: string) => boolean) | null;
|
||||
/**
|
||||
* Any configuration that should apply to this specific player.
|
||||
* This will be defaulted with any global configuration.
|
||||
*/
|
||||
config: URLLoadOptions | DataLoadOptions | object;
|
||||
/**
|
||||
* The effective config loaded with the last call to `load()`.
|
||||
* If no such call has been made, this will be `null`.
|
||||
*/
|
||||
readonly loadedConfig: URLLoadOptions | DataLoadOptions | null;
|
||||
/**
|
||||
* Indicates the readiness of the playing movie.
|
||||
*
|
||||
* @returns The `ReadyState` of the player.
|
||||
*/
|
||||
get readyState(): ReadyState;
|
||||
/**
|
||||
* The metadata of the playing movie (such as movie width and height).
|
||||
* These are inherent properties stored in the SWF file and are not affected by runtime changes.
|
||||
* For example, `metadata.width` is the width of the SWF file, and not the width of the Ruffle player.
|
||||
*
|
||||
* @returns The metadata of the movie, or `null` if the movie metadata has not yet loaded.
|
||||
*/
|
||||
get metadata(): MovieMetadata | null;
|
||||
/**
|
||||
* Reloads the player, as if you called {@link load} with the same config as the last time it was called.
|
||||
*
|
||||
* If this player has never been loaded, this method will return an error.
|
||||
*/
|
||||
reload(): Promise<void>;
|
||||
/**
|
||||
* Loads a specified movie into this player.
|
||||
*
|
||||
* This will replace any existing movie that may be playing.
|
||||
*
|
||||
* @param options One of the following:
|
||||
* - A URL, passed as a string, which will load a URL with default options.
|
||||
* - A {@link URLLoadOptions} object, to load a URL with options.
|
||||
* - A {@link DataLoadOptions} object, to load data with options.
|
||||
* The options, if provided, must only contain values provided for this specific movie.
|
||||
* They must not contain any default values, since those would overwrite other configuration
|
||||
* settings with a lower priority (e.g. the general RufflePlayer config).
|
||||
*
|
||||
* The options will be defaulted by the {@link config} field, which itself
|
||||
* is defaulted by a global `window.RufflePlayer.config`.
|
||||
*/
|
||||
load(options: string | URLLoadOptions | DataLoadOptions): Promise<void>;
|
||||
/**
|
||||
* Plays or resumes the movie.
|
||||
*/
|
||||
play(): void;
|
||||
/**
|
||||
* Whether this player is currently playing.
|
||||
*
|
||||
* @returns True if this player is playing, false if it's paused or hasn't started yet.
|
||||
*/
|
||||
get isPlaying(): boolean;
|
||||
/**
|
||||
* Returns the master volume of the player.
|
||||
*
|
||||
* The volume is linear and not adapted for logarithmic hearing.
|
||||
*
|
||||
* @returns The volume. 1.0 is 100% volume.
|
||||
*/
|
||||
get volume(): number;
|
||||
/**
|
||||
* Sets the master volume of the player.
|
||||
*
|
||||
* The volume should be linear and not adapted for logarithmic hearing.
|
||||
*
|
||||
* @param value The volume. 1.0 is 100% volume.
|
||||
*/
|
||||
set volume(value: number);
|
||||
/**
|
||||
* Checks if this player is allowed to be fullscreen by the browser.
|
||||
*
|
||||
* @returns True if you may call {@link enterFullscreen}.
|
||||
*/
|
||||
get fullscreenEnabled(): boolean;
|
||||
/**
|
||||
* Checks if this player is currently fullscreen inside the browser.
|
||||
*
|
||||
* @returns True if it is fullscreen.
|
||||
*/
|
||||
get isFullscreen(): boolean;
|
||||
/**
|
||||
* Exported function that requests the browser to change the fullscreen state if
|
||||
* it is allowed.
|
||||
*
|
||||
* @param isFull Whether to set to fullscreen or return to normal.
|
||||
*/
|
||||
setFullscreen(isFull: boolean): void;
|
||||
/**
|
||||
* Requests the browser to make this player fullscreen.
|
||||
*
|
||||
* This is not guaranteed to succeed, please check {@link fullscreenEnabled} first.
|
||||
*/
|
||||
enterFullscreen(): void;
|
||||
/**
|
||||
* Requests the browser to no longer make this player fullscreen.
|
||||
*/
|
||||
exitFullscreen(): void;
|
||||
/**
|
||||
* Pauses this player.
|
||||
*
|
||||
* No more frames, scripts or sounds will be executed.
|
||||
* This movie will be considered inactive and will not wake up until resumed.
|
||||
*/
|
||||
pause(): void;
|
||||
/**
|
||||
* Sets a trace observer on this flash player.
|
||||
*
|
||||
* The observer will be called, as a function, for each message that the playing movie will "trace" (output).
|
||||
*
|
||||
* @param observer The observer that will be called for each trace.
|
||||
*/
|
||||
set traceObserver(observer: ((message: string) => void) | null);
|
||||
/**
|
||||
* Fetches the loaded SWF and downloads it.
|
||||
*/
|
||||
downloadSwf(): Promise<void>;
|
||||
/**
|
||||
* Show a dismissible message in front of the player.
|
||||
*
|
||||
* @param message The message shown to the user.
|
||||
*/
|
||||
displayMessage(message: string): void;
|
||||
}
|
||||
38
packages/frontend/src/types/ruffle/player/movie-metadata.d.ts
vendored
Normal file
38
packages/frontend/src/types/ruffle/player/movie-metadata.d.ts
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* Metadata about a loaded SWF file.
|
||||
*/
|
||||
export interface MovieMetadata {
|
||||
/**
|
||||
* The width of the movie in pixels.
|
||||
*/
|
||||
readonly width: number;
|
||||
/**
|
||||
* The height of the movie in pixels.
|
||||
*/
|
||||
readonly height: number;
|
||||
/**
|
||||
* The frame rate of the movie in frames per second.
|
||||
*/
|
||||
readonly frameRate: number;
|
||||
/**
|
||||
* The number of frames on the root timeline of the movie.
|
||||
*/
|
||||
readonly numFrames: number;
|
||||
/**
|
||||
* The SWF version of the movie.
|
||||
*/
|
||||
readonly swfVersion: number;
|
||||
/**
|
||||
* The background color of the movie as a hex string, such as "#FFFFFF".
|
||||
* May be `null` if the background color is unavailable.
|
||||
*/
|
||||
readonly backgroundColor: string | null;
|
||||
/**
|
||||
* Whether this movie is an ActionScript 3.0 movie.
|
||||
*/
|
||||
readonly isActionScript3: boolean;
|
||||
/**
|
||||
* Uncompressed length in bytes.
|
||||
*/
|
||||
readonly uncompressedLength: number;
|
||||
}
|
||||
12
packages/frontend/src/types/ruffle/player/player-element.d.ts
vendored
Normal file
12
packages/frontend/src/types/ruffle/player/player-element.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import type { LegacyRuffleAPI } from './legacy.d.ts';
|
||||
import type { FlashAPI } from './flash.d.ts';
|
||||
/**
|
||||
* A Ruffle player's HTML element.
|
||||
*
|
||||
* This is either created through `window.RufflePlayer.latest().createPlayer()`, or polyfilled from a `<embed>`/`<object>` tag.
|
||||
*
|
||||
* In addition to usual HTML attributes, this player contains methods and properties that belong to both
|
||||
* the **Flash JS API** and **legacy Ruffle API**s.
|
||||
*/
|
||||
export interface PlayerElement extends HTMLElement, LegacyRuffleAPI, FlashAPI {
|
||||
}
|
||||
19
packages/frontend/src/types/ruffle/setup/index.d.ts
vendored
Normal file
19
packages/frontend/src/types/ruffle/setup/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* The Setup module contains the interfaces and methods needed to install Ruffle onto a page,
|
||||
* and create a {@link PlayerElement} with the latest version of Ruffle available.
|
||||
*
|
||||
* This is primarily relevant to users of `ruffle-core` as a npm module, as the "selfhosted" version of Ruffle preinstalls itself,
|
||||
* and without type checking the interfaces here are of limited use.
|
||||
*
|
||||
* For users of `ruffle-core` as a npm module, you are encouraged to call {@link installRuffle} once during page load to
|
||||
* make the `ruffle-core` library register itself as a version of Ruffle on the page.
|
||||
*
|
||||
* Multiple sources of Ruffle may exist - for example, the Ruffle browser extension also installs itself on page load.
|
||||
* For this reason, you are required to call `window.RufflePlayer.latest()` (for example) to grab the latest {@link SourceAPI},
|
||||
* from which you can create a {@link PlayerElement} via {@link SourceAPI.createPlayer}.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
export type * from './public-api.d.ts';
|
||||
export type * from './source-api.d.ts';
|
||||
export type * from './install.d.ts';
|
||||
28
packages/frontend/src/types/ruffle/setup/install.d.ts
vendored
Normal file
28
packages/frontend/src/types/ruffle/setup/install.d.ts
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/**
|
||||
* Options to use with this specific installation of Ruffle.
|
||||
*
|
||||
* This is mostly to provide a way to configure environmental settings, like using
|
||||
* `onFirstLoad` to potentially configure webpack prior to loading wasm files.
|
||||
*/
|
||||
export interface InstallationOptions {
|
||||
/**
|
||||
* A callback to be run before the very first time Ruffle is loaded.
|
||||
* This may be used to configure a bundler prior to asset loading.
|
||||
*/
|
||||
onFirstLoad?: () => void;
|
||||
}
|
||||
/**
|
||||
* Install this version of Ruffle into the current page.
|
||||
*
|
||||
* Multiple (or zero) versions of Ruffle may be installed at the same time,
|
||||
* and you should use `window.RufflePlayer.newest()` or similar to access the appropriate
|
||||
* installation at time of use.
|
||||
*
|
||||
* @param sourceName The name of this particular
|
||||
* Ruffle source. Common convention is "local" for websites that bundle their own Ruffle,
|
||||
* "extension" for browser extensions, and something else for other use cases.
|
||||
* Names are unique, and last-installed will replace earlier installations with the same name,
|
||||
* regardless of what those installations are or which version they represent.
|
||||
* @param options Any options used to configure this specific installation of Ruffle.
|
||||
*/
|
||||
export declare function installRuffle(sourceName: string, options?: InstallationOptions): void;
|
||||
133
packages/frontend/src/types/ruffle/setup/public-api.d.ts
vendored
Normal file
133
packages/frontend/src/types/ruffle/setup/public-api.d.ts
vendored
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
import type { SourceAPI } from './source-api.d.ts';
|
||||
import type { DataLoadOptions, URLLoadOptions } from '../config/index.d.ts';
|
||||
declare global {
|
||||
interface Window {
|
||||
/**
|
||||
* The public API for generating a ruffle player.
|
||||
* This may be a config holder, which will be converted to a
|
||||
* {@link PublicAPI} via {@link installRuffle}, or an actual
|
||||
* {@link PublicAPI} instance itself.
|
||||
*/
|
||||
RufflePlayer?: PublicAPILike | PublicAPI;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Represents a potential installation of a Ruffle public API.
|
||||
*
|
||||
* Unlike {@link PublicAPI}, this may come from any source, past or future.
|
||||
* It needs to be forwards compatible and convertible into a modern day {@link PublicAPI}.
|
||||
*/
|
||||
export interface PublicAPILike {
|
||||
config?: DataLoadOptions | URLLoadOptions | object;
|
||||
sources?: Record<string, SourceAPI>;
|
||||
invoked?: boolean;
|
||||
newestName?: string | null;
|
||||
superseded?(): void;
|
||||
}
|
||||
/**
|
||||
* Represents the Ruffle public API.
|
||||
*
|
||||
* The public API exists primarily to allow multiple installations of Ruffle on a
|
||||
* page (e.g. an extension install and a local one) to cooperate. In an ideal
|
||||
* situation, all Ruffle sources on the page install themselves into a single
|
||||
* public API, and then the public API picks the newest version by default.
|
||||
*
|
||||
* This API *is* versioned, in case we need to upgrade it. However, it must be
|
||||
* backwards- and forwards-compatible with all known sources.
|
||||
*/
|
||||
export declare class PublicAPI implements PublicAPILike {
|
||||
/**
|
||||
* The configuration object used when Ruffle is instantiated.
|
||||
*/
|
||||
config: DataLoadOptions | URLLoadOptions | object;
|
||||
sources: Record<string, SourceAPI>;
|
||||
invoked: boolean;
|
||||
newestName: string | null;
|
||||
/**
|
||||
* Construct the Ruffle public API.
|
||||
*
|
||||
* Do not use this function to negotiate a public API. Instead, use
|
||||
* `public_api` to register your Ruffle source with an existing public API
|
||||
* if it exists.
|
||||
*
|
||||
* Constructing a Public API will also trigger it to initialize Ruffle once
|
||||
* the page loads, if the API has not already been superseded.
|
||||
*
|
||||
* @param prev What used to be in the public API slot.
|
||||
*
|
||||
* This is used to upgrade from a prior version of the public API, or from
|
||||
* a user-defined configuration object placed in the public API slot.
|
||||
*/
|
||||
constructor(prev?: PublicAPILike | null);
|
||||
/**
|
||||
* The version of the public API.
|
||||
*
|
||||
* This is *not* the version of Ruffle itself.
|
||||
*
|
||||
* This allows a page with an old version of the Public API to be upgraded
|
||||
* to a new version of the API. The public API is intended to be changed
|
||||
* very infrequently, if at all, but this provides an escape mechanism for
|
||||
* newer Ruffle sources to upgrade older installations.
|
||||
*
|
||||
* @returns The version of this public API.
|
||||
*/
|
||||
get version(): string;
|
||||
/**
|
||||
* Determine the name of the newest registered source in the Public API.
|
||||
*
|
||||
* @returns The name of the source, or `null` if no source
|
||||
* has yet to be registered.
|
||||
*/
|
||||
newestSourceName(): string | null;
|
||||
/**
|
||||
* Negotiate and start Ruffle.
|
||||
*
|
||||
* This function reads the config parameter to determine which polyfills
|
||||
* should be enabled. If the configuration parameter is missing, then we
|
||||
* use a built-in set of defaults sufficient to fool sites with static
|
||||
* content and weak plugin detection.
|
||||
*/
|
||||
init(): void;
|
||||
/**
|
||||
* Look up the newest Ruffle source and return it's API.
|
||||
*
|
||||
* @returns An instance of the Source API.
|
||||
*/
|
||||
newest(): SourceAPI | null;
|
||||
/**
|
||||
* Look up a specific Ruffle version (or any version satisfying a given set
|
||||
* of requirements) and return it's API.
|
||||
*
|
||||
* @param requirementString A set of semantic version requirement
|
||||
* strings that the player version must satisfy.
|
||||
* @returns An instance of the Source API, if one or more
|
||||
* sources satisfied the requirement.
|
||||
*/
|
||||
satisfying(requirementString: string): SourceAPI | null;
|
||||
/**
|
||||
* Look up the newest Ruffle version compatible with the `local` source, if
|
||||
* it's installed. Otherwise, use the latest version.
|
||||
*
|
||||
* @returns An instance of the Source API
|
||||
*/
|
||||
localCompatible(): SourceAPI | null;
|
||||
/**
|
||||
* Look up the newest Ruffle version with the exact same version as the
|
||||
* `local` source, if it's installed. Otherwise, use the latest version.
|
||||
*
|
||||
* @returns An instance of the Source API
|
||||
*/
|
||||
local(): SourceAPI | null;
|
||||
/**
|
||||
* Indicates that this version of the public API has been superseded by a
|
||||
* newer version.
|
||||
*
|
||||
* This should only be called by a newer version of the Public API.
|
||||
* Identical versions of the Public API should not supersede older versions
|
||||
* of that same API.
|
||||
*
|
||||
* Unfortunately, we can't disable polyfills after-the-fact, so this
|
||||
* only lets you disable the init event...
|
||||
*/
|
||||
superseded(): void;
|
||||
}
|
||||
34
packages/frontend/src/types/ruffle/setup/source-api.d.ts
vendored
Normal file
34
packages/frontend/src/types/ruffle/setup/source-api.d.ts
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import type { PlayerElement } from '../player/index.d.ts';
|
||||
/**
|
||||
* Represents this particular version of Ruffle.
|
||||
*
|
||||
* Multiple APIs can be instantiated from different sources; e.g. an "extension"
|
||||
* version, versus a "local" version. This expresses to the Public API
|
||||
* negotiator (see {@link PublicAPI}) what this particular version of Ruffle is and
|
||||
* how to control it.
|
||||
*/
|
||||
export interface SourceAPI {
|
||||
/**
|
||||
* The version of this particular API, as a string in a semver compatible format.
|
||||
*/
|
||||
version: string;
|
||||
/**
|
||||
* Start up the polyfills.
|
||||
*
|
||||
* Do not run polyfills for more than one Ruffle source at a time.
|
||||
*/
|
||||
polyfill(): void;
|
||||
/**
|
||||
* Polyfill the plugin detection.
|
||||
*
|
||||
* This needs to run before any plugin detection script does.
|
||||
*/
|
||||
pluginPolyfill(): void;
|
||||
/**
|
||||
* Create a Ruffle player element using this particular version of Ruffle.
|
||||
*
|
||||
* @returns The player element. This is a DOM element that may be inserted
|
||||
* into the current page as you wish.
|
||||
*/
|
||||
createPlayer(): PlayerElement;
|
||||
}
|
||||
|
|
@ -28,6 +28,17 @@ const externalPackages = [
|
|||
: id;
|
||||
},
|
||||
},
|
||||
// sharkey: Used for SkFlashPlayer, has large wasm files so it's loaded via Ruffle's preferred CDN
|
||||
{
|
||||
name: 'ruffle',
|
||||
match: /^@ruffle-rs\/ruffle\/?(?<file>.*)$/,
|
||||
path(id: string, pattern: RegExp): string {
|
||||
const match = pattern.exec(id)?.groups;
|
||||
return match
|
||||
? `https://esm.sh/@ruffle-rs/ruffle@${packageInfo.dependencies['@ruffle-rs/ruffle']}/${match['file']}?raw`
|
||||
: id;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const hash = (str: string, seed = 0): number => {
|
||||
|
|
@ -123,6 +134,7 @@ export function getConfig(): UserConfig {
|
|||
_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
|
||||
__VUE_OPTIONS_API__: true,
|
||||
__VUE_PROD_DEVTOOLS__: false,
|
||||
_RUFFLE_VERSION_: JSON.stringify(packageInfo.dependencies['@ruffle-rs/ruffle'])
|
||||
},
|
||||
|
||||
build: {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
611
pnpm-lock.yaml
611
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -156,6 +156,16 @@ allowClickingNotifications: "Allow clicking on pop-up notifications"
|
|||
pinnedOnly: "Pinned"
|
||||
blockingYou: "Blocking you"
|
||||
warnExternalUrl: "Show warning when opening external URLs"
|
||||
flash: "Flash"
|
||||
_flash:
|
||||
contentHidden: "Flash Content Hidden"
|
||||
poweredByRuffle: "Powered by Ruffle."
|
||||
arbitraryCodeExecutionWarning: "Always be wary of arbitrary code execution!"
|
||||
failedToLoad: "Flash Content Failed To Load:"
|
||||
isLoading: "Flash Content Is Loading"
|
||||
loadingRufflePlayer: "Loading Ruffle player"
|
||||
loadingFlashFile: "Loading Flash file"
|
||||
cspError: "raw.esm.sh could not be accessed, meaning this instance's Content Security Policy is likely out of date. Please contact your instance administrators."
|
||||
_delivery:
|
||||
stop: "Suspend delivery"
|
||||
resume: "Resume delivery"
|
||||
|
|
|
|||
|
|
@ -142,6 +142,15 @@ sensitiveMediaRevealConfirm: "センシティブなメディアです。表示
|
|||
severAllFollowRelations: "以下の関係をすべて断ち切る"
|
||||
severAllFollowRelationsConfirm: "すべての人間関係を壊す？これは不可逆です！これは{instanceName}の{followingCount}フォローと{followersCount}フォロワーの関係を壊す！"
|
||||
severAllFollowRelationsQueued: "キューに入れられた{host}とのすべてのフォロー関係を切断する。"
|
||||
_flash:
|
||||
contentHidden: "Flashコンテンツ非表示"
|
||||
poweredByRuffle: "Powered by Ruffle." # Doesn't need a translation, apparently.
|
||||
arbitraryCodeExecutionWarning: "任意コード実行にご注意！"
|
||||
failedToLoad: "Flashコンテンツ読込に失敗"
|
||||
isLoading: "Flashコンテンツ読込中"
|
||||
loadingRufflePlayer: "Ruffleプレイヤー読込中"
|
||||
loadingFlashFile: "Flashファイル読込中"
|
||||
cspError: "raw.esm.shにアクセスできませんでした。このサーバーのコンテンツセキュリティポリシー(CSP) が廃止されている可能性があり、サーバー管理者に連絡してください。"
|
||||
_delivery:
|
||||
stop: "配信停止"
|
||||
resume: "配信再開"
|
||||
|
|
|
|||
Loading…
Reference in a new issue