Added support for video (media content). Rendered in a responsive ifr…

…ame.

css/semforms.css → css/s-forms.css

@@ -51,3 +51,7 @@
     margin-right: 0.3em;
     line-height: 0.9;
 }
+
+.media-content-video-container {
+    padding-top: 26.25%;
+}

package.json

@@ -31,6 +31,7 @@
     "url": "https://kbss.felk.cvut.cz/git/s-forms.git"
   },
   "dependencies": {
+    "prop-types": "^15.3.2",
     "react-bootstrap": "^0.30.5",
     "object-assign": "^4.1.0",
     "jsonld": "^0.4.6",

src/components/MediaContent.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import JsonLdUtils from "jsonld-utils";
+import Constants from "../constants/Constants";
+
+export default class MediaContent extends React.Component {
+
+    static propTypes = {
+        question: PropTypes.object.isRequired
+    };
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const mediaContent = JsonLdUtils.getJsonAttValue(this.props.question, Constants.HAS_MEDIA_CONTENT);
+        if (!mediaContent) {
+            return null;
+        }
+        return this._renderDangerously(mediaContent);
+    }
+
+    _renderDangerously(mediaContent) {
+        if (Array.isArray(mediaContent)) {
+            return <div className='col-xs-6'>
+                {mediaContent.map(src => <div key={'media-' + src} className='row embed-responsive media-content-video-container'>{MediaContent.iframe(src)}</div>)}
+            </div>;
+        } else {
+            return <div className='row'>
+                <div className='col-xs-6 embed-responsive media-content-video-container'>{MediaContent.iframe(mediaContent)}</div>
+            </div>;
+        }
+    }
+
+    static iframe(src) {
+        return <iframe src={src} class="embed-responsive-item"></iframe>;
+    }
+}

src/components/Question.js

@@ -12,6 +12,7 @@ import QuestionAnswerProcessor from "../model/QuestionAnswerProcessor";
 import ValidatorFactory from "../model/ValidatorFactory";
 import JsonLdObjectUtils from "../util/JsonLdObjectUtils";
 import PrefixIcon from "./PrefixesIcon";
+import MediaContent from "./MediaContent";
 
 // TODO Remove once the pretty layout is tested
 const PRETTY_ANSWERABLE_LAYOUT = false;
@@ -112,6 +113,7 @@ export default class Question extends React.Component {
 
     _renderQuestionContent() {
         return [
+            <MediaContent key={this.props.question['@id'] + '-media'} question={this.props.question}/>,
             this.renderAnswers(),
             this.renderSubQuestions()
         ];
@@ -189,7 +191,7 @@ export default class Question extends React.Component {
 
     _renderPrefixes() {
         const question = this.props.question;
-        return question[Constants.HAS_DECLARED_PREFIX].length ?
+        return question[Constants.HAS_DECLARED_PREFIX] && question[Constants.HAS_DECLARED_PREFIX].length ?
             <PrefixIcon prefixes={question[Constants.HAS_DECLARED_PREFIX]}
                       iconClass={'help-icon-checkbox'}/> : null;
     }

src/constants/Constants.js

@@ -78,6 +78,7 @@ const FORM = 'http://onto.fel.cvut.cz/ontologies/documentation/form',
     REQUIRES_DESCRIPTION = 'http://onto.fel.cvut.cz/ontologies/form/requires-description',
     HAS_PRECEDING_QUESTION = 'http://onto.fel.cvut.cz/ontologies/form/has-preceding-question',
     HAS_PRECEDING_VALUE = 'http://onto.fel.cvut.cz/ontologies/form/has-preceding-value',
+    HAS_MEDIA_CONTENT = 'http://onto.fel.cvut.cz/ontologies/form/has-media-content',
 
     CONDITION = 'http://onto.fel.cvut.cz/ontologies/form/condition',
 
@@ -266,6 +267,10 @@ export default class Constants {
         return HAS_PRECEDING_VALUE;
     }
 
+    static get HAS_MEDIA_CONTENT() {
+        return HAS_MEDIA_CONTENT;
+    }
+
     static get CONDITION() {
         return CONDITION;
     }

test/rendering/form.json

@@ -25,6 +25,7 @@
       "@type": "form:question-template",
       "has-origin-type": "http://onto.fel.cvut.cz/ontologies/eccairs/model/attribute",
       "has-template-origin": "http://onto.fel.cvut.cz/ontologies/eccairs/aviation-3.4.0.2/a-1",
+      "has-media-content": "https://drive.google.com/file/d/18HBeiOb5zthhIFosidc7mRTZtNAd3Ur7/view?ts=5bc365d8",
       "comment": {
         "@language": "en",
         "@value": "The latitude of the aerodrome reference point. Aerodrome reference point: The designated geographical location of an aerodrome."
@@ -18250,7 +18251,8 @@
       ],
       "has-layout-class": "section",
       "http://purl.org/dc/elements/1.1/description": "Test help on section header\nWith newline",
-      "label": "Chemotherapy"
+      "label": "Chemotherapy",
+      "has-media-content": "https://drive.google.com/file/d/18HBeiOb5zthhIFosidc7mRTZtNAd3Ur7/preview"
     },
     {
       "@id": "http://vfn.cz/ontologies/fss-form/primary-treatment--d-h--size-of-the-tumor--horizontal-q",
@@ -18502,6 +18504,9 @@
       "@id": "http://onto.fel.cvut.cz/ontologies/documentation/has_file_number",
       "@type": "http://www.w3.org/2001/XMLSchema#long"
     },
+    "has-media-content": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-media-content"
+    },
     "has-author": {
       "@id": "http://onto.fel.cvut.cz/ontologies/documentation/has-author",
       "@type": "@id"

test/rendering/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="resources/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="resources/css/bootstrap-datetimepicker.min.css"/>
-    <link rel="stylesheet" href="../../css/s-forms.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap-datetimepicker.min.css"/>
+    <link rel="stylesheet" type="text/css" href="../../css/s-forms.css"/>
     <title>SForms UI test</title>
 </head>
 <body>