Merge pull request #879 from wordpress-mobile/issue/implement_video_shortcode_self_hosted

Implement video shortcode self hosted

Author: SergioEstevao

Assets/ZSSRichTextEditor.js

@@ -1363,18 +1363,54 @@ ZSSEditor.removeVideo = function(videoNodeIdentifier) {
 };
 
 ZSSEditor.replaceVideoPressVideosForShortcode = function ( html) {
-    // call methods to restore any transformed content from its visual presentation to its source code.
+
     var regex = /<video[^>]*data-wpvideopress="([\s\S]+?)"[^>]*>*<\/video>/g;
+    var str = html.replace( regex, ZSSEditor.removeVideoPressVisualFormattingCallback );
+
+    return str;
+}
+
+ZSSEditor.removeVideoPressVisualFormattingCallback = function( match, content ) {
+    return "[wpvideo " + content + "]";
+}
+
+ZSSEditor.replaceVideosForShortcode = function ( html) {
+
+    var regex = /<video(?:(?!data-wpvideopress).)*><\/video>/g;
     var str = html.replace( regex, ZSSEditor.removeVideoVisualFormattingCallback );
 
     return str;
 }
 
 ZSSEditor.removeVideoVisualFormattingCallback = function( match, content ) {
-    return "[wpvideo " + content + "]";
+    var videoElement = $.parseHTML(match)[0];
+
+    // Remove editor playback attributes
+    videoElement.removeAttribute("onclick");
+    videoElement.removeAttribute("controls");
+    videoElement.removeAttribute("webkit-playsinline");
+    if (videoElement.getAttribute("preload") == "metadata") {
+            // The "metadata" setting is the WP default and is usually automatically stripped from the shortcode.
+            // If it's present, it was probably set by this editor and we should remove it. Even if it wasn't, removing it
+            // won't affect anything as it's the default setting for the preload attribute.
+            videoElement.removeAttribute("preload");
+        }
+
+    // If filetype attributes exist, the src attribute wasn't there originally and we should remove it
+    for (var i = 0; i < ZSSEditor.videoShortcodeFormats.length; i++) {
+            var format = ZSSEditor.videoShortcodeFormats[i];
+            if (videoElement.hasAttribute(format)) {
+                    videoElement.removeAttribute("src");
+                    break;
+                }
+        }
+
+    var shortcode = videoElement.outerHTML.replace(/</g, "[");
+    shortcode = shortcode.replace(/>/g, "]");
+    return shortcode;
 }
 
-ZSSEditor.applyVideoFormattingCallback = function( match ) {    
+ZSSEditor.applyVideoPressFormattingCallback = function( match ) {
     if (match.attrs.numeric.length == 0) {
         return match.content;
     }
@@ -1387,6 +1423,46 @@ ZSSEditor.applyVideoFormattingCallback = function( match ) {
     return out;
 }
 
+// Video format tags supported by the [video] shortcode: https://codex.wordpress.org/Video_Shortcode
+// mp4, m4v and webm prioritized since they're supported by the stock player as of Android API 23
+ZSSEditor.videoShortcodeFormats = ["mp4", "m4v", "webm", "ogv", "wmv", "flv"];
+
+ZSSEditor.applyVideoFormattingCallback = function( match ) {
+    // Find the tag containing the video source
+    var srcTag = "";
+
+    if (match.attrs.named['src']) {
+        srcTag = "src";
+    } else {
+        for (var i = 0; i < ZSSEditor.videoShortcodeFormats.length; i++) {
+            var format = ZSSEditor.videoShortcodeFormats[i];
+            if (match.attrs.named[format]) {
+                srcTag = format;
+                break;
+            }
+        }
+    }
+
+    if (srcTag.length == 0) {
+            return match.content;
+    }
+
+    var out = '<video webkit-playsinline src="' + match.attrs.named[srcTag] + '"';
+
+    // Preserve all existing tags
+    for (var item in match.attrs.named) {
+        out += ' ' + item + '="' + match.attrs.named[item] + '"';
+    }
+
+    if (!match.attrs.named['preload']) {
+            out += ' preload="metadata"';
+    }
+
+    out += ' onclick="" controls="controls"></video>';
+
+    return out;
+}
+
 /**
  *  @brief      Sets the VidoPress video URL and poster URL on a video tag.
  *  @details    When switching between source and visual the wpvideo shortcode are replace by a video tag. Unfortunaly there 
@@ -1891,7 +1967,8 @@ ZSSEditor.removeCaptionFormattingCallback = function( match, content ) {
  */
 ZSSEditor.applyVisualFormatting = function( html ) {
     var str = wp.shortcode.replace( 'caption', html, ZSSEditor.applyCaptionFormatting );
-    str = wp.shortcode.replace( 'wpvideo', str, ZSSEditor.applyVideoFormattingCallback );
+    str = wp.shortcode.replace( 'wpvideo', str, ZSSEditor.applyVideoPressFormattingCallback );
+    str = wp.shortcode.replace( 'video', str, ZSSEditor.applyVideoFormattingCallback );
     return str;
 }
 
@@ -1907,6 +1984,7 @@ ZSSEditor.removeVisualFormatting = function( html ) {
     str = ZSSEditor.removeImageSelectionFormattingFromHTML( str );
     str = ZSSEditor.removeCaptionFormatting( str );
     str = ZSSEditor.replaceVideoPressVideosForShortcode( str );
+    str = ZSSEditor.replaceVideosForShortcode( str );
     return str;
 }
 

Classes/WPEditorFormatbarView.m

@@ -45,6 +45,7 @@ - (id)initWithFrame:(CGRect)frame
 }
 
 - (void)awakeFromNib {
+    [super awakeFromNib];
     [self baseInit];
     return;
 }

Classes/WPEditorToolbarButton.m

@@ -9,7 +9,7 @@
 static CGFloat HighlightedAlpha = 0.1;
 static CGFloat NormalAlpha = 1.0;
 
-@interface WPEditorToolbarButton ()
+@interface WPEditorToolbarButton () <CAAnimationDelegate>
 
 @property (nonatomic, weak, readonly) id target;
 @property (nonatomic, assign, readonly) SEL selector;

Example/EditorDemo/WPViewController.m

@@ -35,6 +35,11 @@ - (void)viewDidLoad
 - (void)customizeAppearance
 {
     [super customizeAppearance];
+    // WORKAROUND: Preload the Noto regular font to ensure it is not overridden
+    // by any of the Noto varients.  Size is arbitrary.
+    // See: https://github.com/wordpress-mobile/WordPress-Shared-iOS/issues/79
+    // Remove this when #79 is resolved.
+    [WPFontManager notoRegularFontOfSize:16.0];
     [WPFontManager loadNotoFontFamily];
 
     self.placeholderColor = [WPStyleGuide grey];
@@ -457,7 +462,7 @@ - (void)timerFireMethod:(NSTimer *)timer
             [self.editorView replaceLocalVideoWithID:videoID
                                       forRemoteVideo:videoURL
                                         remotePoster:posterURL
-                                          videoPress:videoID];
+                                          videoPress:@""];
             [self.videoPressCache setObject:@ {@"source":videoURL, @"poster":posterURL} forKey:videoID];
             [timer invalidate];
         }

Example/Podfile.lock

@@ -12,7 +12,7 @@ PODS:
     - CocoaLumberjack (~> 2.2.0)
     - NSObject-SafeExpectations (~> 0.0.2)
     - WordPressCom-Analytics-iOS (~> 0.1.0)
-  - WordPress-iOS-Shared (0.8.0):
+  - WordPress-iOS-Shared (0.8.2):
     - CocoaLumberjack (~> 2.2.0)
   - WordPressCom-Analytics-iOS (0.1.15)
 
@@ -24,13 +24,13 @@ DEPENDENCIES:
 
 EXTERNAL SOURCES:
   WordPress-iOS-Editor:
-    :path: "../"
+    :path: ../
 
 SPEC CHECKSUMS:
   CocoaLumberjack: 17fe8581f84914d5d7e6360f7c70022b173c3ae0
   NSObject-SafeExpectations: 7d7f48df90df4e11da7cfe86b64f45eff7a7f521
   WordPress-iOS-Editor: 69c5d1e83aaa6e5ab6c80e067f1858de8dab4017
-  WordPress-iOS-Shared: 4d073fb8efa96f3c902d1e1ac2557bb720f416d7
+  WordPress-iOS-Shared: 999f5bfcf5744f94ebe9cb7459a138f5990fbf3a
   WordPressCom-Analytics-iOS: e1a7111255e98561c4b5a33ef4baa75a68e0d5d3
 
 PODFILE CHECKSUM: c5af8aa4a9723c2a470c04ad3589d2b2934feb38