Added Common Methods and Properties

Blazored.Video.sln

@@ -21,7 +21,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazored.Video", "src\Blazo
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorServer", "samples\BlazorServer\BlazorServer.csproj", "{ADF25F83-3102-4E94-9635-77752622C0E5}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorWebAssembly", "samples\BlazorWebAssembly\BlazorWebAssembly.csproj", "{237424CD-14E6-4184-8374-074416E6ADAD}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorWebAssembly", "samples\BlazorWebAssembly\BlazorWebAssembly.csproj", "{237424CD-14E6-4184-8374-074416E6ADAD}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

src/Blazored.Video/Blazored.Video.csproj

@@ -25,10 +25,13 @@
 		<PublishRepositoryUrl>true</PublishRepositoryUrl>
 		<EmbedUntrackedSources>true</EmbedUntrackedSources>
 		<PackageReleaseNotes>Initial Release</PackageReleaseNotes>
+		<Version>1.1.0</Version>
+		<GeneratePackageOnBuild>true</GeneratePackageOnBuild>
 	</PropertyGroup>
 
 	<ItemGroup>
 		<None Include="icon.png" Pack="true" PackagePath="\" />
+		<Resource Include="wwwroot\blazoredVideo.js" />
 	</ItemGroup>
 
 	<ItemGroup>

src/Blazored.Video/BlazoredVideo.razor

@@ -1,80 +1,22 @@
 @*
-    Media Events don't work in Blazor - I believe because they don't bubble.
-    Blazor attaches it's event handlers to the document, and does not register
-    these events as they don't bubble up to the document.
-    So, this uses onchange and forces the video element to have a 'value' property,
-    which it doesn't normally have.
-    I then populate the 'value' with a JSON string containing the requested data
-    and the event name.
-
-    Sample JSON data for an event:
-    {
-        "name":"Suspend",
-        "data":
-        {
-            "Autoplay":false,
-            "Controls":true,
-            "CurrentSrc":"https://res.cloudinary.com/blazoredgitter/video/upload/v1557015491/samples/elephants.mp4",
-            "CurrentTime":2.758966
-        }
-    }
+	Media Events don't work in Blazor - I believe because they don't bubble.
+	Blazor attaches it's event handlers to the document, and does not register
+	these events as they don't bubble up to the document.
+	So, this uses onchange and forces the video element to have a 'value' property,
+	which it doesn't normally have.
+	I then populate the 'value' with a JSON string containing the requested data
+	and the event name.
+
+	Sample JSON data for an event:
+	{
+		"name":"Suspend",
+		"data":
+		{
+			"Autoplay":false,
+			"Controls":true,
+			"CurrentSrc":"https://res.cloudinary.com/blazoredgitter/video/upload/v1557015491/samples/elephants.mp4",
+			"CurrentTime":2.758966
+		}
+	}
 *@
-<video id="@UniqueKey" @key="UniqueKey" @ref="videoRef" @attributes=@Attributes @onchange=@OnChange>@ChildContent</video>
-@if (!Configured)
-{
-    Configured = true;
-    <script suppress-error="BL9992">
-        if (!window['Blazored']) {
-            window['Blazored'] = {}
-        }
-
-        window['Blazored']['registerCustomEventHandler'] = function (el, eventName, payload) {
-            if (!(el && eventName)) {
-                return false
-            }
-            if (!el.hasOwnProperty('customEvent')) {
-                el['customEvent'] = function (eventName, payload) {
-
-                    this['value'] = getJSON(this, eventName, payload)
-
-                    var event
-                    if (typeof (Event) === 'function') {
-                        event = new Event('change')
-                    } else {
-                        event = document.createEvent('Event')
-                        event.initEvent('change', true, true)
-                    }
-
-                    this.dispatchEvent(event)
-                }
-            }
-
-            el.addEventListener(eventName, function () { el.customEvent(eventName, payload) });
-
-            // Craft a bespoke json string to serve as a payload for the event
-            function getJSON(el, eventName, payload) {
-                if (payload && payload.length > 0) {
-                    // this syntax copies just the properties we request from the source element
-                    // IE 11 compatible
-                    let data = {};
-                    for (var obj in payload) {
-                        var item = payload[obj];
-                        if (el[item]) {
-                            data[item] = el[item]
-                        }
-                    }
-
-                    // this stringify overload eliminates undefined/null/empty values
-                    return JSON.stringify(
-                        { name: eventName, state: data }
-                        , function (k, v) { return (v === undefined || v == null || v.length === 0) ? undefined : v }
-                    )
-                } else {
-                    return JSON.stringify(
-                        { name: eventName }
-                    )
-                }
-            }
-        }
-    </script>
-}
+<video id="@UniqueKey" @key="UniqueKey" @ref="videoRef" @attributes=@Attributes @onchange=@OnChange>@ChildContent</video>

src/Blazored.Video/BlazoredVideo.razor.Methods.cs

@@ -0,0 +1,28 @@
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace Blazored.Video
+{
+	public partial class BlazoredVideo
+	{
+		public async Task StartPlayback()
+		{
+			await JS.InvokeVoidAsync("BlazoredVideo.invoke", videoRef, "play");
+		}
+
+		public async Task PausePlayback()
+		{
+			await JS.InvokeVoidAsync("BlazoredVideo.invoke", videoRef, "pause");
+		}
+
+		public async Task ReloadControl()
+		{
+			await JS.InvokeVoidAsync("BlazoredVideo.invoke", videoRef, "load");
+		}
+
+		public async Task<bool> CanPlayMediaType(string mediaType)
+		{
+			return await JS.InvokeAsync<bool>("BlazoredVideo.invoke", videoRef, "canPlayType", mediaType);
+		}
+	}
+}