feat(Shared): Migrate Image

ReactWindows/Playground.Net46/Playground.Net46.csproj

@@ -116,7 +116,7 @@
     <PostBuildEvent>
     </PostBuildEvent>
   </PropertyGroup>
-  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
+  <!-- To modify your build process, add your task inside one of the targets below and uncomment it.
        Other similar extension points exist, see Microsoft.Common.targets.
   <Target Name="BeforeBuild">
   </Target>

ReactWindows/ReactNative.Net46/DevSupport/ProgressDialog.xaml

@@ -7,7 +7,7 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Title="{Binding Path=Heading, Mode=OneTime}"
-    Style="{DynamicResource ContentDialogStyle}" 
+    Style="{DynamicResource ContentDialogStyle}"
     WindowStartupLocation="CenterOwner"
     mc:Ignorable="d" d:DesignHeight="125" d:DesignWidth="240">
 
@@ -21,7 +21,7 @@
             *****************************************************************
             Colors
             *****************************************************************
-            -->            
+            -->
             <SolidColorBrush x:Key="BackgroundBrush" Color="#FFF2F2F2"/>
             <SolidColorBrush x:Key="ForegroundBrush" Color="Black"/>
             <SolidColorBrush x:Key="BorderBrush" Color="Blue"/>
@@ -38,7 +38,7 @@
                 <RowDefinition Height="5" />
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="15" />
-                <RowDefinition Height="Auto" />                
+                <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
 
             <TextBlock x:Name="HeadingTextBlock" Grid.Row="0" HorizontalAlignment="Left"

ReactWindows/ReactNative.Net46/DevSupport/RedBoxDialog.xaml

@@ -38,13 +38,13 @@
                             <RowDefinition/>
                         </Grid.RowDefinitions>
 
-                        <TextBlock Grid.Row="0" 
+                        <TextBlock Grid.Row="0"
                                    FontFamily="Monospace"
                                    FontSize="12"
                                    Foreground="{StaticResource ForegroundBrush}"
                                    Text="{Binding Path=Method, Mode=OneTime}"/>
 
-                        <TextBlock Grid.Row="1" 
+                        <TextBlock Grid.Row="1"
                                    FontSize="10"
                                    Foreground="LightGray"
                                    TextWrapping="Wrap"
@@ -54,8 +54,8 @@
             </DataTemplate>
 
         </ResourceDictionary>
-    </Window.Resources>    
- 
+    </Window.Resources>
+
     <Border x:Name="BackgroundElement" Background="{StaticResource BackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1" Padding="10,10,10,10">
         <Grid x:Name="LayoutRoot" VerticalAlignment="Stretch">
             <Grid.RowDefinitions>
@@ -66,7 +66,7 @@
                 <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
 
-            <TextBlock Grid.Row="0" 
+            <TextBlock Grid.Row="0"
                         FontFamily="Monospace"
                         FontSize="14"
                         FontWeight="SemiBold"
@@ -75,9 +75,9 @@
                         TextWrapping="Wrap" />
 
             <ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"  ScrollViewer.CanContentScroll="True">
-                <ListView Background="Transparent" 
+                <ListView Background="Transparent"
                           BorderThickness="0,0,0,0"
-                          ItemsSource="{Binding Path=StackTrace, Mode=OneWay}" 
+                          ItemsSource="{Binding Path=StackTrace, Mode=OneWay}"
                           ItemTemplate="{StaticResource StackFrameTemplate}">
                     <ListView.ItemContainerStyle>
                         <Style TargetType="ListViewItem">

ReactWindows/ReactNative.Net46/Modules/Image/BitmapImageHelpers.cs

@@ -0,0 +1,115 @@
+using System;
+using System.IO;
+using System.Net;
+using System.Reactive;
+using System.Reactive.Concurrency;
+using System.Reactive.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using static System.FormattableString;
+
+namespace ReactNative.Modules.Image
+{
+    static class BitmapImageHelpers
+    {
+        public static bool IsBase64Uri(string uri)
+        {
+            if (uri == null)
+            {
+                throw new ArgumentNullException(nameof(uri));
+            }
+
+            return uri.StartsWith("data:");
+        }
+
+        public static Stream GetStreamAsync(string uri)
+        {
+            if (uri == null)
+            {
+                throw new ArgumentNullException(nameof(uri));
+            }
+
+            if (IsBase64Uri(uri))
+            {
+                var decodedData = Convert.FromBase64String(uri.Substring(uri.IndexOf(",") + 1));
+                return new MemoryStream(decodedData);
+            }
+            else
+            {
+                var uriValue = default(Uri);
+                if (!Uri.TryCreate(uri, UriKind.Absolute, out uriValue))
+                {
+                    throw new ArgumentOutOfRangeException(nameof(uri), Invariant($"Invalid URI '{uri}' provided."));
+                }
+
+                var streamReference = new StreamReader(WebRequest.Create(uri).GetResponse().GetResponseStream()); //RandomAccessStreamReference.CreateFromUri(uriValue);
+                return streamReference.BaseStream;
+            }
+        }
+
+        public static IObservable<ImageStatusEventData> GetStreamLoadObservable(this BitmapImage image)
+        {
+            return image.GetOpenedObservable()
+                .Merge(image.GetFailedObservable(), Scheduler.Default)
+                .StartWith(new ImageStatusEventData(ImageLoadStatus.OnLoadStart));
+        }
+
+        public static IObservable<ImageStatusEventData> GetUriLoadObservable(this BitmapImage image)
+        {
+            return Observable.Merge(
+                Scheduler.Default,
+                image.GetDownloadingObservable(),
+                image.GetOpenedObservable(),
+                image.GetFailedObservable());
+        }
+
+        private static IObservable<ImageStatusEventData> GetOpenedObservable(this BitmapImage image)
+        {
+            return Observable.FromEventPattern<EventHandler, RoutedEventArgs>(
+                h => image.DownloadCompleted += h,
+                h => image.DownloadCompleted -= h)
+                .Select(args =>
+                {
+                    var bitmapImage = args.Sender as BitmapImage;
+                    if (bitmapImage != null)
+                    {
+                        return new ImageStatusEventData(
+                            ImageLoadStatus.OnLoad,
+                            new ImageMetadata(
+                                image.UriSource?.AbsoluteUri,
+                                image.PixelWidth,
+                                image.PixelHeight));
+                    }
+                    else
+                    {
+                        return new ImageStatusEventData(ImageLoadStatus.OnLoad);
+                    }
+                })
+                .Take(1)
+                .Concat(Observable.Return(new ImageStatusEventData(ImageLoadStatus.OnLoadEnd)));
+        }
+
+        private static IObservable<ImageStatusEventData> GetFailedObservable(this BitmapImage image)
+        {
+            return Observable.FromEventPattern<EventHandler<System.Windows.Media.ExceptionEventArgs>, ExceptionRoutedEventArgs>(
+                h => image.DownloadFailed += h,
+                h => image.DownloadFailed -= h)
+                .Select<EventPattern<ExceptionRoutedEventArgs>, ImageStatusEventData>(pattern =>
+                {
+                    throw new InvalidOperationException(pattern.EventArgs.ErrorException.Message);
+                });
+        }
+
+        private static IObservable<ImageStatusEventData> GetDownloadingObservable(this BitmapImage image)
+        {
+            return Observable.FromEventPattern<EventHandler<DownloadProgressEventArgs>, DownloadProgressChangedEventArgs>(
+                h => image.DownloadProgress += h,
+                h => image.DownloadProgress -= h)
+                .Take(1)
+                .Select(_ => new ImageStatusEventData(ImageLoadStatus.OnLoadStart));
+        }
+    }
+}

ReactWindows/ReactNative.Net46/Modules/Image/ImageLoaderModule.cs

@@ -0,0 +1,73 @@
+using Newtonsoft.Json.Linq;
+using ReactNative.Bridge;
+using System;
+using System.Reactive.Linq;
+using System.Windows.Media.Imaging;
+
+namespace ReactNative.Modules.Image
+{
+    class ImageLoaderModule : NativeModuleBase
+    {
+        private const string ErrorInvalidUri = "E_INVALID_URI";
+        private const string ErrorPrefetchFailure = "E_PREFETCH_FAILURE";
+        private const string ErrorGetSizeFailure = "E_GET_SIZE_FAILURE";
+
+        public override string Name
+        {
+            get
+            {
+                return "ImageLoader";
+            }
+        }
+
+        [ReactMethod]
+        public void prefetchImage(string uriString, IPromise promise)
+        {
+            promise.Reject(ErrorPrefetchFailure, "Prefetch is not yet implemented.");
+        }
+
+        [ReactMethod]
+        public void getSize(string uriString, IPromise promise)
+        {
+            if (string.IsNullOrEmpty(uriString))
+            {
+                promise.Reject(ErrorInvalidUri, "Cannot get the size of an image for an empty URI.");
+                return;
+            }
+
+            DispatcherHelpers.RunOnDispatcher(async () =>
+            {
+                try
+                {
+                    var bitmapImage = new BitmapImage();
+                    bitmapImage.BeginInit();
+                    var loadQuery = bitmapImage.GetStreamLoadObservable()
+                        .Where(status => status.LoadStatus == ImageLoadStatus.OnLoadEnd)
+                        .FirstAsync()
+                        .Replay(1);
+
+                    using (loadQuery.Connect())
+                    {
+                        using (var stream = BitmapImageHelpers.GetStreamAsync(uriString))
+                        {
+                            bitmapImage.StreamSource = stream;
+                        }
+
+                        await loadQuery;
+                        bitmapImage.EndInit();
+
+                        promise.Resolve(new JObject
+                        {
+                            { "width", bitmapImage.PixelWidth },
+                            { "height", bitmapImage.PixelHeight },
+                        });
+                    }
+                }
+                catch (Exception ex)
+                {
+                    promise.Reject(ErrorGetSizeFailure, ex.Message);
+                }
+            });
+        }
+    }
+}

ReactWindows/ReactNative.Net46/ReactNative.Net46.csproj

@@ -134,6 +134,8 @@
     </Compile>
     <Compile Include="DevSupport\WebSocketJavaScriptExecutor.cs" />
     <Compile Include="Modules\Dialog\DialogModule.cs" />
+    <Compile Include="Modules\Image\BitmapImageHelpers.cs" />
+    <Compile Include="Modules\Image\ImageLoaderModule.cs" />
     <Compile Include="Modules\Storage\AsyncStorageModule.cs" />
     <Compile Include="Modules\Clipboard\ClipboardModule.cs" />
     <Compile Include="Modules\Clipboard\ClipboardInstance.cs" />

ReactWindows/ReactNative.Net46/ReactPage.cs

@@ -156,7 +156,7 @@ protected virtual ReactRootView CreateRootView()
         }
 
         /// <summary>
-        /// Captures the all key downs and Ups. 
+        /// Captures the all key downs and Ups.
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>

ReactWindows/ReactNative.Net46/Shell/MainReactPackage.cs

@@ -1,14 +1,17 @@
-using ReactNative.Bridge;
+using ReactNative.Animated;
+using ReactNative.Bridge;
 using ReactNative.Modules.AppState;
 using ReactNative.Modules.Clipboard;
 using ReactNative.Modules.Core;
 using ReactNative.Modules.Dialog;
+using ReactNative.Modules.Image;
 using ReactNative.Modules.I18N;
 using ReactNative.Modules.NetInfo;
 using ReactNative.Modules.Network;
 using ReactNative.Modules.Storage;
 using ReactNative.Modules.WebSocket;
 using ReactNative.UIManager;
+using ReactNative.Views.Image;
 using ReactNative.Views.Text;
 using ReactNative.Views.View;
 using System;
@@ -36,7 +39,7 @@ public IReadOnlyList<INativeModule> CreateNativeModules(ReactContext reactContex
                 //new CameraRollManager(reactContext),
                 new ClipboardModule(),
                 new DialogModule(reactContext),
-                //new ImageLoaderModule(),
+                new ImageLoaderModule(),
                 new I18NModule(),
                 //new LauncherModule(reactContext),
                 //new LocationModule(reactContext),
@@ -71,7 +74,7 @@ public IReadOnlyList<IViewManager> CreateViewManagers(
             return new List<IViewManager>
             {
                 //new ReactFlipViewManager(),
-                //new ReactImageManager(),
+                new ReactImageManager(),
                 //new ReactProgressBarViewManager(),
                 //new ReactProgressRingViewManager(),
                 //new ReactPickerManager(),

ReactWindows/ReactNative.Net46/UIManager/UIManagerModule.cs

@@ -102,7 +102,7 @@ public UIImplementation UIImplementation
         /// <param name="rootView">The root view instance.</param>
         /// <returns>The root view tag.</returns>
         /// <remarks>
-        /// JavaScript can use the returned tag with to add or remove children 
+        /// JavaScript can use the returned tag with to add or remove children
         /// to this view through <see cref="manageChildren(int, int[], int[], int[], int[], int[])"/>.
         /// </remarks>
         public int AddMeasuredRootView(SizeMonitoringCanvas rootView)
@@ -213,7 +213,7 @@ public void manageChildren(
         }
 
         /// <summary>
-        /// Interface for fast tracking the initial adding of views.Children 
+        /// Interface for fast tracking the initial adding of views.Children
         /// view tags are assumed to be in order.
         /// </summary>
         /// <param name="viewTag">The view tag of the parent view.</param>
@@ -231,7 +231,7 @@ public void setChildren(
         /// <summary>
         /// Replaces the view specified by the <paramref name="oldTag"/> with
         /// the view specified by <paramref name="newTag"/> within
-        /// <paramref name="oldTag"/>'s parent. This resolves to a simple 
+        /// <paramref name="oldTag"/>'s parent. This resolves to a simple
         /// <see cref="manageChildren(int, int[], int[], int[], int[], int[])"/>
         /// call, but React does not have enough information in JavaScript to
         /// formulate it itself.

ReactWindows/ReactNative.Shared.Tests/Modules/WebSocket/WebSocketModuleTests.cs

@@ -1,4 +1,4 @@
-using Newtonsoft.Json.Linq;
+using Newtonsoft.Json.Linq;
 using NUnit.Framework;
 using ReactNative.Bridge;
 using ReactNative.Modules.Core;

ReactWindows/ReactNative.Shared/DevSupport/DevInternalSettings.cs

@@ -129,7 +129,6 @@ public bool IsReloadOnJavaScriptChangeEnabled
             }
         }
 
-
         //TODO: Git Issue #878
         private T GetSetting<T>(string key, T defaultValue)
         {

ReactWindows/ReactNative.Shared/DevSupport/DevSupportManager.cs

@@ -602,7 +602,7 @@ private async Task ReloadJavaScriptFromServerAsync(Action dismissProgress, Cance
                     if (temporaryFile != null)
                     {
                         await temporaryFile.DeleteAsync(token).ConfigureAwait(false);
-                    }   
+                    }
                 }
             }
 #endif