Feat: Flash playback using Ruffle

What does this MR do?

Fixes #694 (closed).
This merge request introduces Shockwave Flash playback support using the Ruffle emulator.

Thanks to all the people who helped make this possible:

Debugging:

• From the Ruffle team: kjarosh, Dinnerbone, nosamu
• From the Sharkey team & contributors: Julia, hazelnoot, dakkar, piuvas
• Others: Freeplay

JP translation/localization: Henma

Reviewing (so far): Julia, hazelnoot, dakkar

And of course, the Ruffle project and its contributors!

This MR is standing on the shoulders of giants

Contribution Guidelines

By submitting this merge request, you agree to follow our Contribution Guidelines

• I agree to follow this project's Contribution Guidelines
• I have made sure to test this merge request

packages/frontend/src/components/MkMediaList.vue

@@ -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}`" :module="media"/>
+				<XFlashPlayer v-else-if="isFlash(media)" :key="media.id" :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 '@/const.js';
+import { FILE_TYPE_BROWSERSAFE, FILE_EXT_TRACKER_MODULES, FILE_TYPE_TRACKER_MODULES, FILE_TYPE_FLASH_CONTENT, FILE_EXT_FLASH_CONTENT } from '@/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);
 };