💬 システム依存部の囲み文字に異体字セレクタ(FE0E)を適用するように

ウィンドウタイトル部やtitleチップで🈚︎が🈚️と表示されてしまうのを防ぐ

src/components/contentPlayer/ProgramTitleManager.tsx

@@ -5,6 +5,7 @@ import {
   contentPlayerProgramSelector,
   contentPlayerServiceSelector,
 } from "../../atoms/contentPlayerSelectors"
+import { convertVariationSelectedClosed } from "../../utils/enclosed"
 
 export const CoiledProgramTitleManager: React.VFC<{}> = () => {
   const service = useRecoilValue(contentPlayerServiceSelector)
@@ -13,7 +14,8 @@ export const CoiledProgramTitleManager: React.VFC<{}> = () => {
 
   useEffect(() => {
     const title = [program?.name, service?.name].filter((s) => s).join(" - ")
-    setTitle(title.trim() ? title : null)
+    const variationSelected = convertVariationSelectedClosed(title).trim()
+    setTitle(variationSelected || null)
   }, [program, service])
 
   useEffect(() => {

src/components/programTable/ProgramItem.tsx

@@ -3,6 +3,7 @@ import React, { memo, useState } from "react"
 import { Genre, SubGenre } from "../../constants/genre"
 import { GenreColors } from "../../constants/genreColor"
 import { Program, Service } from "../../infra/mirakurun/api"
+import { convertVariationSelectedClosed } from "../../utils/enclosed"
 
 export const ProgramItem: React.FC<{
   program: Program
@@ -46,9 +47,9 @@ export const ProgramItem: React.FC<{
       } border border-gray-400 cursor-pointer select-none content-visibility-auto contain-paint transition-maxHeight ${
         isHovering && "z-50"
       }`}
-      title={[program.name, program.description]
-        .filter((s) => !!s)
-        .join("\n\n")}
+      title={convertVariationSelectedClosed(
+        [program.name, program.description].filter((s) => !!s).join("\n\n")
+      )}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >

src/constants/enclosed.ts

@@ -0,0 +1,40 @@
+// https://github.com/l3tnun/EPGStation/blob/7949ffe4b4e3b79c896181e0f95526409818330f/src/util/StrUtil.ts#L10
+export const ENCLOSED_CHARACTERS_TABLE = {
+  "\u{1f14a}": "HV",
+  "\u{1f13f}": "P",
+  "\u{1f14c}": "SD",
+  "\u{1f146}": "W",
+  "\u{1f14b}": "MV",
+  "\u{1f210}": "手",
+  "\u{1f211}": "字",
+  "\u{1f212}": "双",
+  "\u{1f213}": "デ",
+  "\u{1f142}": "S",
+  "\u{1f214}": "二",
+  "\u{1f215}": "多",
+  "\u{1f216}": "解",
+  "\u{1f14d}": "SS",
+  "\u{1f131}": "B",
+  "\u{1f13d}": "N",
+  "\u{1f217}": "天",
+  "\u{1f218}": "交",
+  "\u{1f219}": "映",
+  "\u{1f21a}": "無",
+  "\u{1f21b}": "料",
+  "\u{26bf}": "鍵",
+  "\u{1f21c}": "前",
+  "\u{1f21d}": "後",
+  "\u{1f21e}": "再",
+  "\u{1f21f}": "新",
+  "\u{1f220}": "初",
+  "\u{1f221}": "終",
+  "\u{1f222}": "生",
+  "\u{1f223}": "販",
+  "\u{1f224}": "声",
+  "\u{1f225}": "吹",
+  "\u{1f14e}": "PPV",
+  "\u{3299}": "秘",
+  "\u{1f200}": "ほか",
+}
+
+export const ENCLOSED_CHARACTERS = Object.keys(ENCLOSED_CHARACTERS_TABLE)

src/utils/enclosed.ts

@@ -0,0 +1,8 @@
+import { ENCLOSED_CHARACTERS } from "../constants/enclosed"
+
+export const convertVariationSelectedClosed = (s: string) =>
+  Array.from(s)
+    .map((char) =>
+      ENCLOSED_CHARACTERS.includes(char) ? char + "\u{fe0e}" : char
+    )
+    .join("")