feat(video): remove theater mode

apps/admin/src/app/app.scss

@@ -11,5 +11,9 @@
   div {
     margin-right: 5px;
     width: 100%;
+
+    &:first-of-type {
+      margin-top: 15px;
+    }
   }
 }

apps/admin/src/app/chapters/ChapterEdit.tsx

@@ -6,23 +6,25 @@ import {
   ArrayInput,
   SimpleFormIterator,
   FormDataConsumer,
+  Toolbar,
+  Filter,
+  SaveButton
 } from 'react-admin';
-import {Collections, Games, Apartment, VideoLibrary, TextFields, Link, Details} from '@material-ui/icons';
+import {Collections, Games, VideoLibrary, TextFields, Link, Details} from '@material-ui/icons';
 
 const renderTypeIcon = (type) => {
   switch (type) {
     case 'video':
       return <VideoLibrary />;
     case 'image':
+    case 'smokingpit':
       return <Collections />;
     case 'memory':
     case 'daily':
     case 'puzzle':
     case 'suitcase':
     case 'tictactoe':
       return <Games />;
-    case 'smokingpit':
-      return <Apartment />;
     case 'summary':
       return <Details />;
     case 'redirect':
@@ -34,29 +36,51 @@ const renderTypeIcon = (type) => {
   }
 }
 
+const EditToolbar = props => (
+  <Toolbar {...props} >
+    <SaveButton />
+  </Toolbar>
+);
+
+const EditFilter = (props) => (
+  <Filter {...props}>
+      <TextInput label="Search" source="q" alwaysOn />
+  </Filter>
+);
+
 export const ChapterEdit = props => (
   <Edit {...props}>
-    <SimpleForm>
+    <SimpleForm toolbar={<EditToolbar />} filters={<EditFilter />}>
       <TextInput disabled source="id" />
       <TextInput label="Überschrift des Kapitels" source="name" />
       <TextInput disabled label="Link des Kapitels" source="link"/>
       <ArrayInput label="Gruppen von Inhaltselementen" source="groups">
-        <SimpleFormIterator>
+        <SimpleFormIterator disableRemove disableAdd>
           <TextInput label="Text für das Info-Icon" source="info" />
+          <FormDataConsumer>
+            {({scopedFormData, getSource}) =>
+              scopedFormData.character ? <TextInput label="Gruppe für folgenden Avatar" source={getSource('character')}/> : null
+            }
+          </FormDataConsumer>
           <ArrayInput label="Inhaltselemente" source="content" className="contentarray">
-            <SimpleFormIterator>
+            <SimpleFormIterator disableRemove disableAdd>
+              <FormDataConsumer>
+                {({scopedFormData}) =>
+                  scopedFormData.type ? renderTypeIcon(scopedFormData.type) : null
+                }
+              </FormDataConsumer>
+              <FormDataConsumer>
+                {({scopedFormData, getSource}) =>
+                  scopedFormData.type === 'text' ? 
+                  <TextInput multiline label="Text/Wert des Inhaltselements" source={getSource('value')} /> : 
+                  <TextInput disabled multiline label="Text/Wert des Inhaltselements" source={getSource('value')} />
+                }
+              </FormDataConsumer>
               <FormDataConsumer>
                 {({scopedFormData, getSource}) =>
-                  scopedFormData?.type
-                  ? <>
-                    <TextInput label="Inhaltstyp" source={getSource('type')}/>
-                    {renderTypeIcon(scopedFormData.type)}
-                  </>
-                  : <TextInput label="Inhaltstyp" source="type"/>
+                  scopedFormData.title ? <TextInput multiline label="Titel" source={getSource('title')}/> : null
                 }
               </FormDataConsumer>
-              <TextInput multiline label="Text/Wert des Inhaltselements" source="value" />
-              <TextInput label="Titel" source="title"/>
             </SimpleFormIterator>
           </ArrayInput>
         </SimpleFormIterator>

apps/demol/src/app/app.json

@@ -2859,7 +2859,6 @@
           "row": false,
           "content": [{
               "type": "text",
-              "layer": "base",
               "value": "Die Gemeindevertretung besteht aus 15 Kindern sowie dem Bürgermeister. Der Bürgermeister gibt vor der Abstimmung zu bedenken, dass Sport mit vollem Bauch ungesund ist. Trotzdem stimmt die Mehrheit der Gemeindevertretung dem Antrag zu, denn den Kindern dauert die Zeit bis zum Frühstück oft zu lang."
             },
             {
@@ -2869,7 +2868,6 @@
             },
             {
               "type": "text",
-              "layer": "fore",
               "value": "Der Bürgermeister muss nun den Antrag an das Lagerparlament weiterreichen, sodass alle Vertreter*innen der Gemeinderäte darüber beraten und abstimmen können. Am Ende lehnt das Lagerparlament mit großer Mehrheit den Vorschlag ab."
             }
           ]
@@ -2884,7 +2882,6 @@
             },
             {
               "type": "text",
-              "layer": "fore",
               "value": "Es begründet seine Entscheidung damit, dass der Küchendienst nach dem Aufstehen etwas Zeit braucht, um das Essen vorzubereiten und damit, dass Sport vor dem Essen gesünder sei als direkt danach."
             }
           ]
@@ -2895,13 +2892,11 @@
           "background": "02_1455_(91)",
           "content": [{
               "type": "text",
-              "layer": "fore",
               "value": "Anna hat eingesehen, dass der Ablauf wirklich kompliziert ist. Um die ganze Lagerstruktur besser erklären zu können,  hat sie sich ein Spiel ausgedacht. Sie spielt es mit Karl, um auszuprobieren, ob es verständlich ist."
             },
             {
               "type": "text",
-              "layer": "fore",
-              "value": "In diesem Aufdeck-Spiel geht es darum, gleiche Paare zu finden. Diese bestehen aus einer Zeichnung und dem dazu passenden Foto. Klicke einfach auf die Kärtchen, um zu sehen, was sich auf der Rückseite befindet. Zusammenpassende Paare bleiben aufgedeckt liegen."
+              "value": "In diesem Aufdeck-Spiel geht es darum, gleiche Paare zu finden. Klicke einfach auf die Kärtchen, um zu sehen, was sich auf der Rückseite befindet. Zusammenpassende Paare bleiben aufgedeckt liegen."
             }
           ]
         },
@@ -2996,7 +2991,7 @@
             },
             {
               "type": "text",
-              "value": "Sie haben viele neue Freunde gefunden. Viele davon werden, wie die beiden, bald eine Lehre in einer der großen Fabriken anfangen."
+              "value": "Sie haben viele neue Freund*innen gefunden. Viele davon werden, wie die beiden, bald eine Lehre in einer der großen Fabriken anfangen."
             }
           ]
         },
@@ -3022,9 +3017,15 @@
               "type": "text",
               "value": "Zumindest aber fühlen sich Karl und Anna nicht mehr so allein, denn sie wissen nun, dass es viele Kinder und Jugendliche gibt, denen es ähnlich geht wie ihnen. Und sie alle hoffen auf eine bessere Zukunft für sich und ihre Familien."
             },
+            {
+              "type": "image",
+              "value": "B41ABEA7-64DA-4D8E-8E1B-F55A38DD6E37",
+              "option": "third"
+            },
             {
               "type": "redirect",
               "value": "ausblick",
+              "option": "full",
               "title": "Doch was ist nach den 1920er Jahren aus den Kindern geworden?"
             }
           ]

libs/ui/src/lib/video/video.scss

@@ -16,10 +16,4 @@ video {
 .fifth {
   flex: 1 20%;
   padding: 5px;
-}
-
-.theater {
-  flex: 1 auto;
-  margin: 0 17%;
-  order: 99;
 }

libs/ui/src/lib/video/video.tsx

@@ -16,11 +16,10 @@ export const Video = (props: VideoProps) => {
 
   const playVideo = (playing) => {
     setPlaying(playing);
-    playing && document.querySelector('.theater').scrollIntoView({ behavior: "smooth" });
   };
 
   return (
-    <div className={`chapter_video ${props.option} ${isPlaying ? 'theater' : ''}` }>
+    <div className={`chapter_video ${props.option}` }>
       <p>{props.title}</p>
       <video controls onPlaying={() => playVideo(true)} onPause={() => playVideo(false)}>
         <source type='video/mp4' src={"./assets/movies/"+props.value+VIDEO_SUFFIX}></source>