Changes from review

ushahidi · Nov 12, 2016 · c8bcc25 · c8bcc25
1 parent 893aaa4
commit c8bcc25
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 44 deletions.
diff --git a/app/common/locales/en.json b/app/common/locales/en.json
@@ -574,12 +574,13 @@
         },
         "media" : {
             "enter_a" : "Enter a",
-            "youtube" : " Youtbe",
+            "youtube" : " Youtube",
             "current_url" : "Current image",
             "add_caption" : "Add caption",
             "upload" : "Upload"
         },
         "video" : {
+            "input_desc" : "<span>Enter a</span><span id=\"wordmark-youtube\" class=\"wordmark-replace\" style=\"background-image: url(/img/youtube.png);\"><span> Youtube</span></span><span> or </span><span id=\"wordmark-vimeo\" class=\"wordmark-replace\" style=\"background-image: url(/img/vimeo.png);\"><span> Vimeo</span></span><span> video URL</span>",
             "enter_a" : "Enter a",
             "youtube" : " Youtube",
             "or" : " or ",
@@ -993,6 +994,9 @@
             "bulk_role_change_confirm": "Are you sure you want to change the role of {{count}} users to {{role}}?",
             "bulk_role_change_success" : "User roles changed to {{role_name}}"
         },
+        "video" : {
+            "incorrect_url" : "The URL, {{url}}, you entered did not match either a Youtube or Vimeo URL format.",
+        },
         "form" : {
             "add_to_survey" : "Add to survey",
             "save_success" : "Survey {{name}} saved",

diff --git a/app/main/posts/detail/detail.html b/app/main/posts/detail/detail.html
@@ -81,20 +81,9 @@ <h2 class="form-label" translate>post.modify.form.categories</h2>
             {{category.tag}}
           </p>
         </div>
-        <div
-          ng-repeat="(key,value) in post.values"
-          ng-if="isPostValue(key) && form_attributes[key] && showType(form_attributes[key].type)"
-          class="postcard-field"
-          >
-
-          <post-video-value
-            ng-if="form_attributes[key].type === 'video'"
-            label="{{form_attributes[key].label}}"
-            video-url="value"></post-video-value>
-        </div>
         <post-value
           ng-repeat="(key,value) in post.values"
-          ng-if="form_attributes[key].type !== 'media' && form_attributes[key].type !== 'video' && isPostValue(key) && showType(form_attributes[key].type)"
+          ng-if="form_attributes[key].type !== 'media' && isPostValue(key) && showType(form_attributes[key].type)"
           key="key"
           value="value"
           attribute="form_attributes[key]"

diff --git a/app/main/posts/detail/post-value.html b/app/main/posts/detail/post-value.html
@@ -1,13 +1,19 @@
 <div ng-class="{'postcard-field': !standardTask, 'listing-item-primary': standardTask}">
-    <h2 class="form-label">
-        {{attribute.label}}
-    </h2>
+    <div ng-if="attribute.type !== 'video'">
+      <h2 class="form-label">
+          {{attribute.label}}
+      </h2>
 
-    <div ng-repeat="entry in value" ng-if="attribute.type === 'relation'">
-        <a ng-href="/posts/{{entry.id}}">{{entry.title}}</a>
-    </div>
-    <div ng-repeat="entry in value" ng-if="attribute.type !== 'relation'">
-        <p>{{entry}}</p>
+      <div ng-repeat="entry in value" ng-if="attribute.type === 'relation'">
+          <a ng-href="/posts/{{entry.id}}">{{entry.title}}</a>
+      </div>
+      <div ng-repeat="entry in value" ng-if="attribute.type !== 'relation'">
+          <p>{{entry}}</p>
+      </div>
     </div>
 
+    <post-video-view
+      ng-if="attribute.type === 'video'"
+      label="{{attribute.label}}"
+      video-url="value"></post-video-view>
 </div>
diff --git a/app/main/posts/modify/post-value-edit.html b/app/main/posts/modify/post-value-edit.html
@@ -119,13 +119,13 @@
                   ng-required="attribute.required"
               ></post-media>
               <!-- type: upload -->
-              <post-video
+              <post-video-input
                   ng-switch-when="video"
                   name="values_{{attribute.id}}"
                   video-url="post.values[attribute.key][key]"
                   ng-model="post.values[attribute.key][key]"
                   ng-required="attribute.required"
-              ></post-video>
+              ></post-video-input>
           </div>
       </div>
       <div class="alert error" ng-show="form['values_' + attribute.id].$dirty && taskIsMarkedCompleted()" ng-repeat="(error, value) in form['values_' + attribute.id].$error">

diff --git a/app/main/posts/modify/post-video.directive.js b/app/main/posts/modify/post-video.directive.js
@@ -16,13 +16,15 @@ function PostVideo() {
 PostVideoController.$inject = [
     '$scope',
     '$sce',
-    'Util'
+    'Util',
+    'Notify'
 ];
 
 function PostVideoController(
     $scope,
     $sce,
-    Util
+    Util,
+    Notify
 ) {
     $scope.constructIframe = constructIframe;
     // $scope.getVideoThumbnail = getVideoThumbnail;
@@ -60,17 +62,25 @@ function PostVideoController(
         //   - //player.vimeo.com/video/25451551
         if (url) {
             var match = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
-
-            if (match[3].indexOf('youtu') > -1) {
-                $scope.videoUrl = 'https://www.youtube.com/embed/' + match[6];
-            } else if (match[3].indexOf('vimeo') > -1) {
-                $scope.videoUrl = 'https://player.vimeo.com/video/' + match[6];
+            $scope.videoUrl = undefined;
+            if (match) {
+                if (match[3].indexOf('youtu') > -1) {
+                    $scope.videoUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + match[6]);
+                } else if (match[3].indexOf('vimeo') > -1) {
+                    $scope.videoUrl = $sce.trustAsResourceUrl('https://player.vimeo.com/video/' + match[6]);
+                } else {
+                    urlError(url);
+                }
             } else {
-                $scope.videoUrl = undefined;
+                urlError(url);
             }
         }
     }
 
+    function urlError(url) {
+        Notify.error('notify.video.incorrect_url', {url: url});
+    }
+
     // Originates from PL
     function createVideo() {
         return '<iframe src="' + $scope.videoUrl + '" frameborder="0" allowfullscreen>';

diff --git a/app/main/posts/modify/video.html b/app/main/posts/modify/video.html
@@ -2,21 +2,12 @@
 <form>
   <div class="form-field video_embed">
     <label>{{label}}</label>
-    <p><span translate="post.video.enter_a">Enter a</span>
-      <span id="wordmark-youtube" class="wordmark-replace" style="background-image: url(/img/youtube.png);">
-        <span translate="post.video.youtube"> Youtube</span>
-      </span>
-       <span translate="post.video.or"> or </span>
-      <span id="wordmark-vimeo" class="wordmark-replace" style="background-image: url(/img/vimeo.png);">
-        <span translate="post.video.vimeo"> Vimeo</span>
-      </span>
-      <span translate="post.video.video_url"> video URL</span>
-     </p>
+    <p translate="post.video.input_desc"></p>
     <input type="url" ng-model="videoUrl" ng-change="constructIframe(videoUrl)" placeholder="https://youtu.be/123456">
 
     <div id="{{previewId}}" class="form-field-preview" ng-show="videoUrl">
       <div class="video_embed-fluid">
-        <iframe frameborder="0" src="{{videoUrl}}" allowfullscreen></iframe>
+        <iframe frameborder="0" ng-src="{{videoUrl}}" allowfullscreen></iframe>
       </div>
     </div>
   </div>

diff --git a/app/main/posts/posts-module.js b/app/main/posts/posts-module.js
@@ -11,15 +11,15 @@ angular.module('ushahidi.posts', [])
 .directive('postAddForm', require('./detail/post-add-form.directive.js'))
 .directive('postValue', require('./detail/post-value.directive.js'))
 .directive('postMediaValue', require('./detail/post-media-value.directive.js'))
-.directive('postVideoValue', require('./detail/post-video-value.directive.js'))
+.directive('postVideoView', require('./detail/post-video-value.directive.js'))
 .service('PostActionsService', require('./common/post-actions.service.js'))
 
 // Create / Edit Screens
 .service('PostEntity', require('./modify/post-entity.service.js'))
 .service('PostEditService', require('./modify/post-edit.service.js'))
 .service('MediaEditService', require('./modify/media-edit.service.js'))
 .directive('postMedia', require('./modify/post-media.directive.js'))
-.directive('postVideo', require('./modify/post-video.directive.js'))
+.directive('postVideoInput', require('./modify/post-video.directive.js'))
 .directive('postDatetime', require('./modify/post-datetime-value.directive.js'))
 .directive('postLocation', require('./modify/post-location.directive.js'))
 .directive('postRelation', require('./modify/post-relation.directive.js'))