Split "manage single video" page into multiple pages

backend/src/api/model/search/realm.rs

@@ -21,7 +21,7 @@ impl search::Realm {
     }
 
     fn path(&self) -> &str {
-        &self.full_path
+        if self.full_path.is_empty() { "/" } else { &self.full_path }
     }
 
     fn ancestor_names(&self) -> &[Option<String>] {

frontend/src/i18n/locales/de.yaml

@@ -20,6 +20,8 @@ general:
   logo-alt: Das Logo von „{{title}}“
   no-root-children: Noch keine Seiten ...
   failed-to-load-thumbnail: Konnte Vorschaubild nicht laden
+  yes: Ja
+  no: Nein
   form:
     select:
       no-options: Keine Optionen
@@ -140,6 +142,8 @@ video:
     title: Video einbetten
   caption: Untertitel
   manage: Verwalten
+  start: Anfang
+  end: Ende
 
 series:
   series: Serie
@@ -234,17 +238,28 @@ manage:
       title: Titel
       created: Erstellt
     no-description: Keine Beschreibung
-    video-details: 'Videodetails: „{{title}}“'
-    technical-details: Technische Details
-    opencast-id: Opencast-ID
-    available-resolutions: Verfügbare Auflösungen
     page-showing-video-ids: '{{start}}–{{end}} von {{total}}'
     no-videos-found: Keine Videos gefunden.
-    share-direct-link: Via Direktlink teilen
-    open-in-editor: Im Videoeditor öffnen
-    referencing-pages: Referenzierende Seiten
-    referencing-pages-explanation: 'Dieses Video wird von den folgenden Seiten referenziert:'
-    no-referencing-pages: Dieses Video wird von keiner Seite referenziert.
+    details:
+      title: Videodetails
+      share-direct-link: Via Direktlink teilen
+      open-in-editor: Im Videoeditor öffnen
+      referencing-pages: Referenzierende Seiten
+      referencing-pages-explanation: 'Dieses Video wird von den folgenden Seiten referenziert:'
+      no-referencing-pages: Dieses Video wird von keiner Seite referenziert.
+    thumbnail:
+      title: Vorschaubild
+    acl:
+      title: Zugangsbeschränkung
+    technical-details:
+      title: Technische Details
+      tracks: Video/Audio-Spuren
+      unknown-mimetype: Unbekannter MIME-Type
+      opencast-id: Opencast-ID
+      further-info: Weitere Informationen
+      synced: Synchronisiert?
+      part-of: 'Teil von:'
+      is-live: Live?
 
   are-you-sure: Sind Sie sich sicher?
 

frontend/src/i18n/locales/en.yaml

@@ -19,6 +19,8 @@ general:
   logo-alt: Logo of “{{title}}”
   no-root-children: No pages yet ...
   failed-to-load-thumbnail: Failed to load thumbnail
+  yes: "Yes"
+  no: "No"
   form:
     select:
       no-options: No options
@@ -137,6 +139,8 @@ video:
     title: Embed video
   caption: Caption
   manage: Manage
+  start: Start
+  end: End
 
 series:
   series: Series
@@ -227,17 +231,28 @@ manage:
       title: Title
       created: Created
     no-description: No description
-    video-details: 'Video Details: “{{title}}”'
-    technical-details: Technical details
-    opencast-id: Opencast ID
-    available-resolutions: Available resolutions
     page-showing-video-ids: '{{start}}–{{end}} of {{total}}'
     no-videos-found: No videos found.
-    share-direct-link: Share via direct link
-    open-in-editor: Open in video editor
-    referencing-pages: Referencing pages
-    referencing-pages-explanation: 'This video is referenced on the following pages:'
-    no-referencing-pages: No pages reference this video.
+    details:
+      title: Video details
+      share-direct-link: Share via direct link
+      open-in-editor: Open in video editor
+      referencing-pages: Referencing pages
+      referencing-pages-explanation: 'This video is referenced on the following pages:'
+      no-referencing-pages: No pages reference this video.
+    thumbnail:
+      title: Thumbnail
+    acl:
+      title: Manage access
+    technical-details:
+      title: Technical details
+      tracks: Video/audio tracks
+      unknown-mimetype: Unknown MIME type
+      opencast-id: Opencast ID
+      further-info: Further information
+      synced: Synchronized?
+      part-of: 'Part of:'
+      is-live: Live?
 
   are-you-sure: Are you sure?
 

frontend/src/layout/Burger.tsx

@@ -1,12 +1,9 @@
-import { ReactNode } from "react";
-
-
 type BurgerMenuProps = {
     hide: () => void;
-    children: ReactNode;
+    items: [] | readonly [JSX.Element] | readonly [JSX.Element, JSX.Element];
 };
 
-export const BurgerMenu: React.FC<BurgerMenuProps> = ({ hide, children }) => (
+export const BurgerMenu: React.FC<BurgerMenuProps> = ({ hide, items }) => (
     <div
         onClick={e => {
             if (e.target === e.currentTarget) {
@@ -35,11 +32,18 @@ export const BurgerMenu: React.FC<BurgerMenuProps> = ({ hide, children }) => (
             width: "clamp(260px, 75%, 450px)",
             overflowY: "auto",
             borderTop: "1px solid var(--grey80)",
+            gap: 16,
             "& > *:first-child": {
-                borderBottom: "1px solid var(--grey80)",
+                borderBottom: "1px dashed var(--grey80)",
+            },
+            "& > *:last-child": {
+                borderTop: "1px dashed var(--grey80)",
             },
         }}>
-            {children}
+            {items.length > 0 && <div>{items[0]}</div>}
+            {items.length > 1 && <>
+                <div>{items[1]}</div>
+            </>}
         </div>
     </div>
 );

frontend/src/layout/Navigation.tsx

@@ -4,7 +4,13 @@ import { graphql, useFragment } from "react-relay";
 
 import type { NavigationData$key } from "./__generated__/NavigationData.graphql";
 import { useTranslation } from "react-i18next";
-import { FOCUS_STYLE_INSET, LinkList, LinkWithIcon, SIDE_BOX_BORDER_RADIUS } from "../ui";
+import {
+    ellipsisOverflowCss,
+    FOCUS_STYLE_INSET,
+    LinkList,
+    LinkWithIcon,
+    SIDE_BOX_BORDER_RADIUS,
+} from "../ui";
 import { MissingRealmName, sortRealms } from "../routes/util";
 
 
@@ -98,13 +104,7 @@ type ItemProps = {
 
 const Item: React.FC<ItemProps> = ({ label, link }) => (
     <LinkWithIcon to={link} iconPos="right">
-        <div css={{
-            display: "-webkit-box",
-            WebkitBoxOrient: "vertical",
-            WebkitLineClamp: 3,
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-        }}>{label}</div>
+        <div css={ellipsisOverflowCss(3)}>{label}</div>
         <FiChevronRight />
     </LinkWithIcon>
 );

frontend/src/layout/Root.tsx

@@ -25,16 +25,14 @@ type Props = {
 
 export const Root: React.FC<Props> = ({ nav, children }) => {
     const menu = useMenu();
-    const navElements = Array.isArray(nav) ? nav : [nav];
+    const navElements = Array.isArray(nav) ? nav : [nav] as const;
     const navExists = navElements.length > 0;
 
     return (
         <Outer disableScrolling={menu.state === "burger"}>
             <Header hideNavIcon={!navExists} />
             {menu.state === "burger" && navExists && (
-                <BurgerMenu hide={() => menu.close()}>
-                    {navElements.map((elem, i) => <div key={i}>{elem}</div>)}
-                </BurgerMenu>
+                <BurgerMenu items={navElements} hide={() => menu.close()} />
             )}
             <div css={{ margin: OUTER_CONTAINER_MARGIN }}>
                 <div css={{

frontend/src/router.tsx

@@ -10,11 +10,12 @@ import { RealmRoute } from "./routes/Realm";
 import { DirectOpencastVideoRoute, DirectVideoRoute, VideoRoute } from "./routes/Video";
 import { DirectSeriesOCRoute, DirectSeriesRoute } from "./routes/Series";
 import { ManageVideosRoute } from "./routes/manage/Video";
-import { ManageSingleVideoRoute } from "./routes/manage/Video/Single";
 import { UploadRoute } from "./routes/Upload";
 import { SearchRoute } from "./routes/Search";
 import { InvalidUrlRoute } from "./routes/InvalidUrl";
 import { BlockEmbedRoute, EmbedVideoRoute } from "./routes/Embed";
+import { ManageVideoDetailsRoute } from "./routes/manage/Video/Details";
+import { ManageVideoTechnicalDetailsRoute } from "./routes/manage/Video/TechnicalDetails";
 
 
 
@@ -41,7 +42,8 @@ const {
         DirectSeriesOCRoute,
         ManageRoute,
         ManageVideosRoute,
-        ManageSingleVideoRoute,
+        ManageVideoDetailsRoute,
+        ManageVideoTechnicalDetailsRoute,
         ManageRealmRoute,
         UploadRoute,
         AddChildRoute,

frontend/src/routes/Search.tsx

@@ -15,6 +15,7 @@ import { Card } from "../ui/Card";
 import { PageTitle } from "../layout/header/ui";
 import { BreadcrumbsContainer, BreadcrumbSeparator } from "../ui/Breadcrumbs";
 import { MissingRealmName } from "./util";
+import { ellipsisOverflowCss } from "../ui";
 
 
 export const isSearchActive = (): boolean => document.location.pathname === "/~search";
@@ -190,7 +191,7 @@ const SearchEvent: React.FC<SearchEventProps> = ({
     // link should be avoided.
     const link = hostRealms.length !== 1
         ? `/!v/${id.slice(2)}`
-        : `${hostRealms[0].path}/v/${id.slice(2)}`;
+        : `${hostRealms[0].path.replace(/^\/$/, "")}/v/${id.slice(2)}`;
 
     return (
         <Item key={id} link={link}>
@@ -212,11 +213,7 @@ const SearchEvent: React.FC<SearchEventProps> = ({
             <div css={{ color: "black" }}>
                 <h3 css={{
                     marginBottom: 6,
-                    display: "-webkit-box",
-                    WebkitBoxOrient: "vertical",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    WebkitLineClamp: 2,
+                    ...ellipsisOverflowCss(2),
                 }}>{title}</h3>
                 <Creators creators={creators} />
                 <SmallDescription text={description} lines={3} />

frontend/src/routes/Video.tsx

@@ -49,6 +49,7 @@ import { NavigationData$key } from "../layout/__generated__/NavigationData.graph
 import { getEventTimeInfo } from "../util/video";
 import { Creators } from "../ui/Video";
 import { Description } from "../ui/metadata";
+import { ellipsisOverflowCss } from "../ui";
 
 
 // ===========================================================================================
@@ -378,13 +379,7 @@ const VideoTitle: React.FC<VideoTitleProps> = ({ title }) => (
         [`@media (max-width: ${BREAKPOINT_MEDIUM}px)`]: { fontSize: 20 },
         [`@media (max-width: ${BREAKPOINT_SMALL}px)`]: { fontSize: 18 },
         lineHeight: 1.2,
-
-        // Truncate title after two lines
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        textOverflow: "ellipsis",
-        WebkitLineClamp: 2,
-        overflow: "hidden",
+        ...ellipsisOverflowCss(2),
     }} />
 );