ColorPopup.js
4 days ago
ColorPopup.scss
4 days ago
EntitySearchDropdown.js
4 days ago
EntitySearchDropdown.scss
4 days ago
LoadSelect.js
5 years ago
ProBadge.js
5 years ago
SelectMediaDropdown.js
4 days ago
SelectMediaDropdown.scss
4 days ago
Tag.js
4 days ago
Tag.scss
4 days ago
TranscriptionLanguageSelect.js
4 days ago
UrlSelect.js
4 days ago
UrlSelect.scss
4 days ago
VideoIcon.js
4 days ago
VideoIcon.scss
4 days ago
TranscriptionLanguageSelect.js
161 lines
| 1 | import { Select, Text } from "@bsf/force-ui"; |
| 2 | import { FormTokenField } from "@wordpress/components"; |
| 3 | import { __ } from "@wordpress/i18n"; |
| 4 | |
| 5 | export const TRANSCRIPTION_LANGUAGES = [ |
| 6 | { label: "Arabic", value: "ar" }, |
| 7 | { label: "Armenian", value: "hy" }, |
| 8 | { label: "Azerbaijani", value: "az" }, |
| 9 | { label: "Belarusian", value: "be" }, |
| 10 | { label: "Bosnian", value: "bs" }, |
| 11 | { label: "Bulgarian", value: "bg" }, |
| 12 | { label: "Catalan", value: "ca" }, |
| 13 | { label: "Chinese", value: "zh" }, |
| 14 | { label: "Croatian", value: "hr" }, |
| 15 | { label: "Czech", value: "cs" }, |
| 16 | { label: "Danish", value: "da" }, |
| 17 | { label: "Dutch", value: "nl" }, |
| 18 | { label: "English", value: "en" }, |
| 19 | { label: "Estonian", value: "et" }, |
| 20 | { label: "Finnish", value: "fi" }, |
| 21 | { label: "French", value: "fr" }, |
| 22 | { label: "Galician", value: "gl" }, |
| 23 | { label: "German", value: "de" }, |
| 24 | { label: "Greek", value: "el" }, |
| 25 | { label: "Hebrew", value: "he" }, |
| 26 | { label: "Hindi", value: "hi" }, |
| 27 | { label: "Hungarian", value: "hu" }, |
| 28 | { label: "Icelandic", value: "is" }, |
| 29 | { label: "Indonesian", value: "id" }, |
| 30 | { label: "Italian", value: "it" }, |
| 31 | { label: "Japanese", value: "ja" }, |
| 32 | { label: "Kannada", value: "kn" }, |
| 33 | { label: "Kazakh", value: "kk" }, |
| 34 | { label: "Korean", value: "ko" }, |
| 35 | { label: "Latvian", value: "lv" }, |
| 36 | { label: "Lithuanian", value: "lt" }, |
| 37 | { label: "Macedonian", value: "mk" }, |
| 38 | { label: "Malay", value: "ms" }, |
| 39 | { label: "Maori", value: "mi" }, |
| 40 | { label: "Marathi", value: "mr" }, |
| 41 | { label: "Nepali", value: "ne" }, |
| 42 | { label: "Norwegian", value: "no" }, |
| 43 | { label: "Persian", value: "fa" }, |
| 44 | { label: "Polish", value: "pl" }, |
| 45 | { label: "Portuguese", value: "pt" }, |
| 46 | { label: "Romanian", value: "ro" }, |
| 47 | { label: "Russian", value: "ru" }, |
| 48 | { label: "Serbian", value: "sr" }, |
| 49 | { label: "Slovak", value: "sk" }, |
| 50 | { label: "Slovenian", value: "sl" }, |
| 51 | { label: "Spanish", value: "es" }, |
| 52 | { label: "Swahili", value: "sw" }, |
| 53 | { label: "Swedish", value: "sv" }, |
| 54 | { label: "Tagalog", value: "tl" }, |
| 55 | { label: "Tamil", value: "ta" }, |
| 56 | { label: "Thai", value: "th" }, |
| 57 | { label: "Turkish", value: "tr" }, |
| 58 | { label: "Ukrainian", value: "uk" }, |
| 59 | { label: "Urdu", value: "ur" }, |
| 60 | { label: "Vietnamese", value: "vi" }, |
| 61 | { label: "Welsh", value: "cy" }, |
| 62 | ]; |
| 63 | |
| 64 | export const getLanguageLabel = (value) => { |
| 65 | const lang = TRANSCRIPTION_LANGUAGES.find((l) => l.value === value); |
| 66 | return lang ? lang.label : value; |
| 67 | }; |
| 68 | |
| 69 | export const getLanguageValue = (label) => { |
| 70 | const lang = TRANSCRIPTION_LANGUAGES.find((l) => l.label === label); |
| 71 | return lang ? lang.value : null; |
| 72 | }; |
| 73 | |
| 74 | // Editor variant — FormTokenField is styled by core everywhere (popover + iframe), |
| 75 | // unlike the force-ui Select which needs tailwind.css (only loaded on the dashboard). |
| 76 | export const TranscriptionLanguageTokenField = ({ |
| 77 | value = [], |
| 78 | onChange, |
| 79 | showWarning = false, |
| 80 | }) => { |
| 81 | const hasNoLanguages = !value || value.length === 0; |
| 82 | const helpText = |
| 83 | hasNoLanguages && showWarning |
| 84 | ? __( |
| 85 | "At least one language is required. Please select at least one language.", |
| 86 | "presto-player" |
| 87 | ) |
| 88 | : __( |
| 89 | "Select one or more languages. Start typing to search.", |
| 90 | "presto-player" |
| 91 | ); |
| 92 | |
| 93 | return ( |
| 94 | <div className="presto-player__transcription-languages"> |
| 95 | <FormTokenField |
| 96 | label={__("Languages", "presto-player")} |
| 97 | value={value.map(getLanguageLabel)} |
| 98 | suggestions={TRANSCRIPTION_LANGUAGES.map((l) => l.label)} |
| 99 | onChange={(labels) => { |
| 100 | onChange(labels.map(getLanguageValue).filter((v) => v !== null)); |
| 101 | }} |
| 102 | __experimentalExpandOnFocus={true} |
| 103 | __experimentalShowHowTo={false} |
| 104 | /> |
| 105 | <p className="components-base-control__help">{helpText}</p> |
| 106 | </div> |
| 107 | ); |
| 108 | }; |
| 109 | |
| 110 | const TranscriptionLanguageSelect = ({ |
| 111 | value = [], |
| 112 | onChange, |
| 113 | showWarning = false, |
| 114 | }) => { |
| 115 | const hasNoLanguages = !value || value.length === 0; |
| 116 | const helpText = hasNoLanguages && showWarning |
| 117 | ? __( |
| 118 | "At least one language is required. Please select at least one language.", |
| 119 | "presto-player" |
| 120 | ) |
| 121 | : __( |
| 122 | "Select one or more languages. Start typing to search.", |
| 123 | "presto-player" |
| 124 | ); |
| 125 | |
| 126 | return ( |
| 127 | <div className="presto-player__transcription-languages flex flex-col gap-1"> |
| 128 | <Select |
| 129 | multiple |
| 130 | combobox |
| 131 | size="md" |
| 132 | value={value} |
| 133 | onChange={onChange} |
| 134 | searchPlaceholder={__("Search languages…", "presto-player")} |
| 135 | > |
| 136 | <Select.Button |
| 137 | label={__("Languages", "presto-player")} |
| 138 | placeholder={__("Select languages…", "presto-player")} |
| 139 | render={(selected) => |
| 140 | Array.isArray(selected) |
| 141 | ? selected.map(getLanguageLabel).join(", ") |
| 142 | : getLanguageLabel(selected) |
| 143 | } |
| 144 | /> |
| 145 | <Select.Options> |
| 146 | {TRANSCRIPTION_LANGUAGES.map((option) => ( |
| 147 | <Select.Option key={option.value} value={option.value}> |
| 148 | {option.label} |
| 149 | </Select.Option> |
| 150 | ))} |
| 151 | </Select.Options> |
| 152 | </Select> |
| 153 | <Text size="xs" className="text-text-tertiary"> |
| 154 | {helpText} |
| 155 | </Text> |
| 156 | </div> |
| 157 | ); |
| 158 | }; |
| 159 | |
| 160 | export default TranscriptionLanguageSelect; |
| 161 |