Front: Mediainfo Popup

[Arthi-chaud]

Media Info Popup for Episodes and Movies. (closes #287)

A few questions/problems:

• Which Icon should we use for context menus? (Currently we use Info, but it is the same as Go To Show)
• Whether it is from a context menu or a movie page's header, we always need to click the button twice for the popup to work

[zoriya]

What about this icon https://fonts.google.com/icons?selected=Material+Symbols+Outlined:movie_info:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=info ?

[zoriya]

For the double press needed, I don't understand why but it works with:

	const [isInfoOpen, setInfoOpen] = useState(false);
	return <>
			<Menu>
				<Menu.Item onSelect={() => setInfoOpen(true)} />
			</Menu>
			{isInfoOpen && type !== "show" && (
				<MediaInfoPopup mediaType={type} mediaSlug={slug} close={() => setInfoOpen(false)} />
			)}
	</>

[zoriya]

I think it could be nice to also add duration and file size to this popup. File size is currently not available, but I'll think about adding it to the endpoint. Duration is available in a field named length

[zoriya]

On android, the popup can overflow and the user is not able to scroll it. You probably need to wrap it with a scrollview.