VideoManagementPro

To reference videos in a section template, the template must first have the corresponding form. The minimum requirements for the form are as follows:

Furthermore, an FS_BUTTON is contained in the following example form definition, which opens the VideoManager.

Form definition of a section template. 

<CMS_MODULE>
   <FS_INDEX name="st_video" height="1">
      <LANGINFOS>
         <LANGINFO lang="*" label="Video"/>
      </LANGINFOS>
      <SOURCE name="videomanagementpro-fsm/VideoManagementProPlugin"/> ❶
   </FS_INDEX>

   <CMS_INPUT_COMBOBOX name="st_playerDefinition"
    allowEmpty="no" noBreak="yes" useLanguages="no">
      <CMS_INCLUDE_OPTIONS type="public">
         <LABELS>
            <LABEL lang="*">#item</LABEL>
            <LABEL lang="DE">#item</LABEL>
         </LABELS>
         <NAME>MI24PlayerValueProvider</NAME>
      </CMS_INCLUDE_OPTIONS>
      <LANGINFOS>
         <LANGINFO lang="*" label="Player" description="Player"/>
      </LANGINFOS>
   </CMS_INPUT_COMBOBOX>

   <FS_BUTTON name="st_videoManager" hFill="no" noBreak="no"
    onClick="class:ExternalUrlExecutable" style="button" useLanguages="no">
      <LANGINFOS>
         <LANGINFO lang="*" label="Open VideoManager" description="Open VideoManager"/>
         <LANGINFO lang="DE" label="VideoManager öffnen" description="VideoManager öffnen"/>
      </LANGINFOS>
      <PARAMS>
         <PARAM name="target">#field.st_video</PARAM> ❷
      </PARAMS>
   </FS_BUTTON>
</CMS_MODULE>

If each section is only supposed to be capable of capturing one video, the ability to add several elements for the FS_INDEX component must be disabled. This is possible through the following rule:

Rule definition of a section template. 

<RULES>
  <RULE>
    <WITH>
      <EQUAL>
        <PROPERTY name="SIZE" source="st_video"/>
        <NUMBER>0</NUMBER>
      </EQUAL>
    </WITH>
    <DO>
      <PROPERTY name="ADD" source="st_video"/>
    </DO>
  </RULE>
</RULES>

The rule checks whether the number of elements integrated in the input component st_video is equal to zero. If the check returns true, the Add button of the FS_INDEX component is activated. As soon as a video is integrated, the check returns false and the button is grayed out.

The HTML template set of the section template has a div container on the top level. This controls the presentation of the videos referenced in the FS_INDEX component. In the process, the preview and the generation must each be dealt with separately. After the presentation, a script tag is defined, which reloads required JavaScript functions from MovingIMAGE24.

<div $CMS_VALUE(editorId())$ >
    $CMS_IF(!st_video.empty)$
        $CMS_SET(set_videoIds, st_video.getIdentifiers())$

        $CMS_IF(!#global.preview)$
            $-- Render video --$
        $CMS_ELSE$
            $-- Render video in the preview --$
        $CMS_END_IF$

        <script src="//e.video-cdn.net/v2/embed.js"></script>
    $CMS_END_IF$
</div>

Generation

The executable GetVideoEmbedCode must be executed in order to display a video in the page's generated state. This necessitates the Id of the referenced video and the selected player Id. The call is made by means of the script already presented. The result of the executable is output in another div container.

$CMS_SET(set_params, {"player_definition_id":st_playerDefinition.getKey()})$ ❶
$CMS_RENDER(script:"getvideoembedcode", videoIds: set_videoIds, parameters: set_params)$ ❷

$CMS_IF(!embedCodes.isEmpty)$
    <div id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container"> ❸
        $CMS_VALUE(embedCodes.get(set_videoIds[0]))$ ❹
    </div>
$CMS_END_IF$

The player in line 4 can assume a defined width via a VideoStill. If this is required, the list of all VideoStills must first be determined and limited to the required resolution.

$CMS_IF(!st_video.values.isEmpty)$
	$CMS_SET(set_videoStill, st_video.values[0].getStill("thumbnail"))$
$CMS_END_IF$

The code for determining the VideoStill must be entered in the above example code before the div tag. The width of the selected player is limited by a CMS_IF, which must be added to the div tag as an additional attribute. This results in the following code for the div tag that opens:

<div id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container" $CMS_IF(!set_videoStill.isNull)$style="width: $CMS_VALUE(set_videoStill.dimension.width)$px;"$CMS_END_IF$>

Preview

If the option Use this user in the preview is deactivated in the configuration dialog of the project component, an authentication of the editor is required in the preview. A placeholder image will be displayed instead of a video until the editor has completed this. Furthermore, some videos may be locked for certain user groups. Both cases must be reflected in the FirstSpirit preview.

To do this, another div container is defined as a first step. This has a unique Id and contains either the referenced video or the placeholder image. The following JavaScript functions are then defined:

<div
    $CMS_VALUE(editorId(editorName:"st_video"))$
    id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container">
</div>
<script>
   $-- Functions --$
</script>

checkUser

The first function, checkUser, checks whether the editor has already been authenticated in the preview or not. Depending on this, the function initiates either the referenced video or placeholder image display.

function checkUser(api, videoIds, sectionTemplateId) {
   api.execute(
      "class:com.espirit.moddev.videomanagementpro.IsUserAuthenticatedExecutable", ❶
         {},
         function (result) {
            if (result.authenticated == "true") {
               renderVideo(api, videoIds, sectionTemplateId); ❷
            } else {
               showVideoDummy(api, videoIds, sectionTemplateId); ❸
            }
         }
   );
}

showVideoDummy

The showVideoDummy function adds a placeholder image to the aforementioned div container. The placeholder image is found in the media store under the reference name dummy_video. Furthermore, it defines a function for the onClick event for this image. This event calls the renderVideo function, which triggers the authentication of the editor and the video display.

function showVideoDummy (api, videoIds, sectionTemplateId) {
   for (var videoIndex in videoIds) {
      var videoId = videoIds[videoIndex];
      var dummyVideo = document.createElement("img"); ❶

      dummyVideo.setAttribute('src', '$CMS_REF(media:"dummy_video")$'); ❷
      dummyVideo.onclick = function () { ❸
         renderVideo(api, videoIds, sectionTemplateId); ❹
      };

      var containerId = videoId + "_" + sectionTemplateId + "_container"; ❺
      var container = document.getElementById(containerId); ❻
      if (container) {
         container.appendChild(dummyVideo); ❼
      }
   }
}

renderVideo

The renderVideo function calls the executable GetVideoEmbedCode. This executable prompts the editor to enter their access data if required and then calls the embed code of the referenced video from movingimage.

After the executable is completed, the function determines the aforementioned div container. If the editor has view permission for the video, the function adds the embed code to the container. Otherwise, the editor is shown a corresponding text.

function renderVideo(api, videoIds, sectionTemplateId) {
   var params = {};
   params['player_definition_id'] = "$CMS_VALUE(st_playerDefinition)$"; ❶
   api.execute( ❷
      "class:com.espirit.moddev.videomanagementpro.GetVideoEmbedCode",
      { "videoIds": videoIds, "parameters": params },
      function (result) {
         try {
            for (var videoId in result) {
               var containerId = videoId + "_" + sectionTemplateId + "_container"; ❸
               var container = document.getElementById(containerId); ❹
               var embedCode = result[videoId];

               if(container) {
                  if (embedCode) {
                     container.innerHTML = embedCode; ❺
                     VideoPlayerCollection.addPlayerById(containerId); ❻
                  } else {
                     container.innerHTML = "You do not have acces rights for this video."; ❼
                  }
               }
            }
         } catch (e) {
            console.error("Error in executable callback handler: " + e);
         }
      }
   );
}

waitAndRender

The checkUser, showVideoDummy, and renderVideo functions all have an api parameter which is required to call an executable. Depending on the FirstSpirit Client used, either the object top.WE_API.Common (ContentCreator) or JC_API (SiteArchitect) is transferred for the parameter. As the JC_API is only available after a certain amount of time, the user must first wait for it before executing the described functions. This controls the waitAndRender function, which is only defined in SiteArchitect.

$CMS_IF(!#global.is("WEBEDIT"))$
   function waitAndRender(videoIds, sectionTemplateId) {
      try {
         if (typeof JC_API === "undefined") { ❶
            window.onBrowserInjection = function(name, injected) { ❷
                if (name === 'JC_API') {
                    checkUser(JC_API, videoIds, sectionTemplateId);
                }
            };
         } else {
            checkUser(JC_API, videoIds, sectionTemplateId); ❸
         }
      } catch (e) {
         console.error("waitAndRender:" + e);
      }
   }
$CMS_END_IF$

Finally, a script is required to start the aforementioned functions. This first calls the waitAndRender function in SiteArchitect while also starting directly in ContentCreator with the checkUser function.

try {
   $CMS_IF(#global.is("WEBEDIT"))$
      checkUser( ❶
         top.WE_API.Common,
         $CMS_VALUE(set_videoIds.map(x -> "\"" + x + "\"").toString())$, ❷
         $CMS_VALUE(#this.id)$);
   $CMS_ELSE$
      waitAndRender( ❸
         $CMS_VALUE(set_videoIds.map(x -> "\"" + x + "\"").toString())$, ❹
         $CMS_VALUE(#this.id)$);
   $CMS_END_IF$
} catch (e) {
   console.error(e);
}