feat: Add expand/collapse functionality to video title

frontend/src/components/VideoPlayer/VideoInfo.tsx

@@ -6,6 +6,8 @@ import {
     Delete,
     Download,
     Edit,
+    ExpandLess,
+    ExpandMore,
     Folder,
     Link as LinkIcon,
     LocalOffer,
@@ -26,7 +28,7 @@ import {
     Typography,
     useTheme
 } from '@mui/material';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useLanguage } from '../../contexts/LanguageContext';
 import { Collection, Video } from '../../types';
 
@@ -67,6 +69,22 @@ const VideoInfo: React.FC<VideoInfoProps> = ({
 
     const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
     const [editedTitle, setEditedTitle] = useState<string>('');
+    const [isTitleExpanded, setIsTitleExpanded] = useState(false);
+    const [showExpandButton, setShowExpandButton] = useState(false);
+    const titleRef = useRef<HTMLHeadingElement>(null);
+
+    useEffect(() => {
+        const checkOverflow = () => {
+            const element = titleRef.current;
+            if (element && !isTitleExpanded) {
+                setShowExpandButton(element.scrollHeight > element.clientHeight);
+            }
+        };
+
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        return () => window.removeEventListener('resize', checkOverflow);
+    }, [video.title, isTitleExpanded]);
 
     const handleStartEditingTitle = () => {
         setEditedTitle(video.title);
@@ -138,19 +156,46 @@ const VideoInfo: React.FC<VideoInfoProps> = ({
                     </Button>
                 </Box>
             ) : (
-                <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                    <Typography variant="h5" component="h1" fontWeight="bold" sx={{ mr: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 1 }}>
+                    <Typography
+                        ref={titleRef}
+                        variant="h5"
+                        component="h1"
+                        fontWeight="bold"
+                        sx={{
+                            mr: 1,
+                            display: '-webkit-box',
+                            overflow: 'hidden',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: isTitleExpanded ? 'unset' : 2,
+                            wordBreak: 'break-word',
+                            flex: 1
+                        }}
+                    >
                         {video.title}
                     </Typography>
-                    <Tooltip title={t('editTitle')}>
-                        <Button
-                            size="small"
-                            onClick={handleStartEditingTitle}
-                            sx={{ minWidth: 'auto', p: 0.5, color: 'text.secondary' }}
-                        >
-                            <Edit fontSize="small" />
-                        </Button>
-                    </Tooltip>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                        <Tooltip title={t('editTitle')}>
+                            <Button
+                                size="small"
+                                onClick={handleStartEditingTitle}
+                                sx={{ minWidth: 'auto', p: 0.5, color: 'text.secondary' }}
+                            >
+                                <Edit fontSize="small" />
+                            </Button>
+                        </Tooltip>
+                        {showExpandButton && (
+                            <Tooltip title={isTitleExpanded ? t('collapse') : t('expand')}>
+                                <Button
+                                    size="small"
+                                    onClick={() => setIsTitleExpanded(!isTitleExpanded)}
+                                    sx={{ minWidth: 'auto', p: 0.5, color: 'text.secondary' }}
+                                >
+                                    {isTitleExpanded ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
+                                </Button>
+                            </Tooltip>
+                        )}
+                    </Box>
                 </Box>
             )}
 

frontend/src/utils/locales/ar.ts

@@ -223,6 +223,8 @@ export const ar = {
     on: "تشغيل",
     off: "إيقاف",
     continue: "متابعة",
+    expand: "توسيع",
+    collapse: "طي",
     
     // Video Card
     unknownDate: "تاريخ غير معروف",

frontend/src/utils/locales/de.ts

@@ -104,7 +104,7 @@ export const de = {
     collectionContains: "Diese Sammlung enthält", deleteCollectionOnly: "Nur Sammlung Löschen",
     deleteCollectionAndVideos: "Sammlung und Alle Videos Löschen", loading: "Laden...", error: "Fehler",
     success: "Erfolg", cancel: "Abbrechen", confirm: "Bestätigen", save: "Speichern", on: "Ein",    off: "Aus",
-    continue: "Weiter",
+    continue: "Weiter", expand: "Erweitern", collapse: "Einklappen",
     unknownDate: "Unbekanntes Datum", part: "Teil", collection: "Sammlung", selectVideoFile: "Videodatei Auswählen",
     pleaseSelectVideo: "Bitte wählen Sie eine Videodatei aus", uploadFailed: "Upload fehlgeschlagen",
     failedToUpload: "Fehler beim Hochladen des Videos", uploading: "Hochladen...", upload: "Hochladen",

frontend/src/utils/locales/en.ts

@@ -215,6 +215,8 @@ export const en = {
     on: "On",
     off: "Off",
     continue: "Continue",
+    expand: "Expand",
+    collapse: "Collapse",
     
     // Video Card
     unknownDate: "Unknown date",

frontend/src/utils/locales/es.ts

@@ -110,7 +110,7 @@ export const es = {
     deleteCollectionTitle: "Eliminar Colección", deleteCollectionConfirmation: "¿Está seguro de que desea eliminar la colección",
     collectionContains: "Esta colección contiene", deleteCollectionOnly: "Eliminar Solo Colección",
     deleteCollectionAndVideos: "Eliminar Colección y Todos los Videos", loading: "Cargando...", error: "Error",
-    success: "Éxito", cancel: "Cancelar", confirm: "Confirmar", save: "Guardar", on: "Activado", off: "Desactivado",
+    success: "Éxito", cancel: "Cancelar", confirm: "Confirmar", save: "Guardar", on: "Activado", off: "Desactivado", expand: "Expandir", collapse: "Contraer",
     unknownDate: "Fecha desconocida", part: "Parte", collection: "Colección", selectVideoFile: "Seleccionar Archivo de Video",
     pleaseSelectVideo: "Por favor seleccione un archivo de video", uploadFailed: "Carga fallida",
     failedToUpload: "Error al cargar el video", uploading: "Cargando...", upload: "Subir",

frontend/src/utils/locales/fr.ts

@@ -221,6 +221,9 @@ export const fr = {
     save: "Enregistrer",
     on: "On",
     off: "Off",
+    continue: "Continuer",
+    expand: "Développer",
+    collapse: "Réduire",
     
     // Video Card
     unknownDate: "Date inconnue",

frontend/src/utils/locales/ja.ts

@@ -223,6 +223,8 @@ export const ja = {
     on: "オン",
     off: "オフ",
     continue: "続行",
+    expand: "展開",
+    collapse: "折りたたむ",
     
     // Video Card
     unknownDate: "不明な日付",

frontend/src/utils/locales/ko.ts

@@ -223,6 +223,8 @@ export const ko = {
     on: "켜기",
     off: "끄기",
     continue: "계속",
+    expand: "확장",
+    collapse: "접기",
     
     // Video Card
     unknownDate: "알 수 없는 날짜",

frontend/src/utils/locales/pt.ts

@@ -222,6 +222,8 @@ export const pt = {
     on: "Ligado",
     off: "Desligado",
     continue: "Continuar",
+    expand: "Expandir",
+    collapse: "Recolher",
     
     // Video Card
     unknownDate: "Data desconhecida",

frontend/src/utils/locales/ru.ts

@@ -223,6 +223,8 @@ export const ru = {
     on: "Вкл.",
     off: "Выкл",
     continue: "Продолжить",
+    expand: "Развернуть",
+    collapse: "Свернуть",
     
     // Video Card
     unknownDate: "Неизвестная дата",

frontend/src/utils/locales/zh.ts

@@ -224,6 +224,8 @@ export const zh = {
     on: "开启",
     off: "关",
     continue: "继续",
+    expand: "展开",
+    collapse: "收起",
     
     // Video Card
     unknownDate: "未知日期",