From 8a44d6e0b4f0079cf7ac90a2b86ebd4ad71ed885 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Sat, 21 Sep 2024 09:37:10 +0800
Subject: [PATCH 1/5] replace autoquery services to use constructor injection

---
 MyApp/_pages/autoquery/crud.md       | 28 ++++----
 MyApp/_pages/autoquery/index.md      | 10 ++-
 MyApp/_pages/autoquery/rdbms.md      | 48 ++++++--------
 MyApp/_pages/releases/v4_0_56.md     |  6 +-
 MyApp/_pages/releases/v5_09.md       | 24 +++----
 MyApp/_pages/releases/v5_12.md       |  8 +--
 MyApp/_pages/releases/v6_11.md       | 96 ++++++++++++++--------------
 MyApp/_pages/servicestack-ai.md      | 90 +++++++++++++-------------
 MyApp/_pages/vue/custom-autoforms.md |  6 +-
 9 files changed, 143 insertions(+), 173 deletions(-)

diff --git a/MyApp/_pages/autoquery/crud.md b/MyApp/_pages/autoquery/crud.md
index 3797ea33f1..a362e11323 100644
--- a/MyApp/_pages/autoquery/crud.md
+++ b/MyApp/_pages/autoquery/crud.md
@@ -138,23 +138,19 @@ Just as you can create [Custom AutoQuery Implementations](/autoquery/rdbms.html#
 you can also override AutoQuery CRUD implementations by creating implementations with AutoQuery CRUD Request DTOs and calling the relevate `IAutoQueryDb` method, e.g:
 
 ```csharp
-public class MyCrudServices : Service
+public class MyCrudServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
-    public object Post(CreateRockstar request) => AutoQuery.Create(request, base.Request);
-    public object Put(UpdateRockstar request) => AutoQuery.Update(request, base.Request);
-    public object Delete(DeleteRockstar request) => AutoQuery.Delete(request, base.Request);
+    public object Post(CreateRockstar request) => autoQuery.Create(request, base.Request);
+    public object Put(UpdateRockstar request) => autoQuery.Update(request, base.Request);
+    public object Delete(DeleteRockstar request) => autoQuery.Delete(request, base.Request);
 }
 
 // Async
-public class MyCrudServices : Service
+public class MyCrudServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
-    public Task<object> Post(CreateRockstar request) => AutoQuery.CreateAsync(request, base.Request);
-    public Task<object> Put(UpdateRockstar request) => AutoQuery.UpdateAsync(request, base.Request);
-    public Task<object> Delete(DeleteRockstar request) => AutoQuery.DeleteAsync(request, base.Request);
+    public Task<object> Post(CreateRockstar request) => autoQuery.CreateAsync(request, base.Request);
+    public Task<object> Put(UpdateRockstar request) => autoQuery.UpdateAsync(request, base.Request);
+    public Task<object> Delete(DeleteRockstar request) => autoQuery.DeleteAsync(request, base.Request);
 }
 ```
 
@@ -490,15 +486,13 @@ have them you'd need to provide custom implementations that can delegate to thei
 
 ```csharp
 [ConnectionInfo(NamedConnection = MyDatabases.Reporting)]
-public class MyReportingServices : Service
+public class MyReportingServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     public Task<object> Any(CreateConnectionInfoRockstar request) => 
-        AutoQuery.CreateAsync(request, Request);
+        autoQuery.CreateAsync(request, Request);
 
     public Task<object> Any(UpdateConnectionInfoRockstar request) => 
-        AutoQuery.UpdateAsync(request, Request);
+        autoQuery.UpdateAsync(request, Request);
 }
 ```
 
diff --git a/MyApp/_pages/autoquery/index.md b/MyApp/_pages/autoquery/index.md
index efc8e547aa..5b403e46e4 100644
--- a/MyApp/_pages/autoquery/index.md
+++ b/MyApp/_pages/autoquery/index.md
@@ -214,15 +214,13 @@ public class CustomRockstar
 }
 
 // Override with custom implementation
-public class MyQueryServices : Service
+public class MyQueryServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     public async Task<object> Any(QueryRockstarAlbums query)
     {
-        using var db = AutoQuery.GetDb(query, base.Request);
-        var q = AutoQuery.CreateQuery(query, base.Request, db);
-        return await AutoQuery.ExecuteAsync(query, q, base.Request, db);
+        using var db = autoQuery.GetDb(query, base.Request);
+        var q = autoQuery.CreateQuery(query, base.Request, db);
+        return await autoQuery.ExecuteAsync(query, q, base.Request, db);
     }
 }
 ```
diff --git a/MyApp/_pages/autoquery/rdbms.md b/MyApp/_pages/autoquery/rdbms.md
index ec8b7a77ca..f84ceaa83e 100644
--- a/MyApp/_pages/autoquery/rdbms.md
+++ b/MyApp/_pages/autoquery/rdbms.md
@@ -98,25 +98,23 @@ The behavior of queries can be completely customized by simply providing your ow
 
 ```csharp
 // Override with custom implementation
-public class MyQueryServices : Service
+public class MyQueryServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     // Sync
     public object Any(FindMovies query)
     {
-        using var db = AutoQuery.GetDb(query, base.Request);
-        var q = AutoQuery.CreateQuery(query, base.Request, db);
-        return AutoQuery.Execute(query, q, base.Request, db);
+        using var db = autoQuery.GetDb(query, base.Request);
+        var q = autoQuery.CreateQuery(query, base.Request, db);
+        return autoQuery.Execute(query, q, base.Request, db);
     }
 
     // Async
     public async Task<object> Any(QueryRockstars query)
     {
-        using var db = AutoQuery.GetDb(query, base.Request);
-        var q = AutoQuery.CreateQuery(query, base.Request, db);
-        return await AutoQuery.ExecuteAsync(query, q, base.Request, db);
-    }    
+        using var db = autoQuery.GetDb(query, base.Request);
+        var q = autoQuery.CreateQuery(query, base.Request, db);
+        return await autoQuery.ExecuteAsync(query, q, base.Request, db);
+    }
 }
 ```
 
@@ -1078,14 +1076,12 @@ public class QueryPosts : QueryDb<Post>
 }
 
 [CacheResponse(Duration = 600)]
-public class PostPublicServices : PostServicesBase
+public class PostPublicServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     public object Any(QueryPosts request)
     {
-        using var db = AutoQuery.GetDb(query, base.Request);
-        var q = AutoQuery.CreateQuery(query, base.Request, db) //Populated SqlExpression
+        using var db = autoQuery.GetDb(query, base.Request);
+        var q = autoQuery.CreateQuery(query, base.Request, db) //Populated SqlExpression
 
         q.Where(x => x.Deleted == null);
         
@@ -1197,11 +1193,9 @@ E.g. This implementation applies the `[ConnectionInfo]` behavior to all its Serv
 
 ```csharp
 [ConnectionInfo(NamedConnection = "Reporting")]
-public class MyReportingServices : Service
+public class MyReportingServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
-    public Task<object> Any(CreateReport request) => AutoQuery.CreateAsync(request, base.Request);
+    public Task<object> Any(CreateReport request) => autoQuery.CreateAsync(request,base.Request);
 }
 ```
 
@@ -1338,15 +1332,13 @@ Where it's also queryable with:
 We've already covered some of extensibility options with Customizable **QueryDbFields** and **Implicit Conventions**, the most customizable would be to override the default implementation with a custom one, e.g:
 
 ```csharp
-public class MyQueryServices : Service
+public class MyQueryServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     //Override with custom implementation
     public object Any(FindMovies dto)
     {
-        var q = AutoQuery.CreateQuery(dto, Request.GetRequestParams(), base.Request);
-        return AutoQuery.Execute(dto, q, base.Request);
+        var q = autoQuery.CreateQuery(dto, Request.GetRequestParams(), base.Request);
+        return autoQuery.Execute(dto, q, base.Request);
     }
 }
 ```
@@ -1430,19 +1422,17 @@ Plugins.Add(new AutoQueryFeature {
 It also wont generate implementations for custom AutoBatch implementations, e.g. you can add a custom implementation that does what the generated implementation would've done and execute using the same DB Connection and Transaction with:
 
 ```csharp
-public class CustomAutoQueryServices : Service
+public class CustomAutoQueryServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     public object Any(CreateItem[] requests)
     {
-        using var db = AutoQuery.GetDb<Item>(Request);
+        using var db = autoQuery.GetDb<Item>(Request);
         using var dbTrans = db.OpenTransaction();
 
         var results = new List<object>();
         foreach (var request in requests)
         {
-            var response = await AutoQuery.CreateAsync(request, Request, db);
+            var response = await autoQuery.CreateAsync(request, Request, db);
             results.Add(response);
         }
 
diff --git a/MyApp/_pages/releases/v4_0_56.md b/MyApp/_pages/releases/v4_0_56.md
index 163da42388..ddf613d8b9 100644
--- a/MyApp/_pages/releases/v4_0_56.md
+++ b/MyApp/_pages/releases/v4_0_56.md
@@ -725,9 +725,8 @@ public class QueryCustomers : QueryDb<Customer>
     public int? OrAgeOlderThan { get; set; }
 }
 
-public class AutoQueryRDBMSServices : Service
+public class AutoQueryRDBMSServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
     ...
 }
 
@@ -739,9 +738,8 @@ public class QueryCustomers : QueryData<Customer>
     public int? OrAgeOlderThan { get; set; }
 }
 
-public class AutoQueryDataServices : Service
+public class AutoQueryDataServices(IAutoQueryData autoQuery) : Service
 {
-    public IAutoQueryData AutoQuery { get; set; }
     ...
 }
 ```
diff --git a/MyApp/_pages/releases/v5_09.md b/MyApp/_pages/releases/v5_09.md
index 36b9a5c211..6ff36e27bd 100644
--- a/MyApp/_pages/releases/v5_09.md
+++ b/MyApp/_pages/releases/v5_09.md
@@ -1390,15 +1390,13 @@ have them you'd need to provide custom implementations that can delegate to thei
 
 ```csharp
 [ConnectionInfo(NamedConnection = MyDatabases.Reporting)]
-public class MyReportingServices : Service
+public class MyReportingServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     public Task<object> Any(CreateConnectionInfoRockstar request) => 
-        AutoQuery.CreateAsync(request, Request);
+        autoQuery.CreateAsync(request, Request);
 
     public Task<object> Any(UpdateConnectionInfoRockstar request) => 
-        AutoQuery.UpdateAsync(request, Request);
+        autoQuery.UpdateAsync(request, Request);
 }
 ```
 
@@ -3441,10 +3439,8 @@ E.g. This implementation applies the `[ConnectionInfo]` behavior to all its Serv
 
 ```csharp
 [ConnectionInfo(NamedConnection = "Reporting")]
-public class MyReportingServices : Service
+public class MyReportingServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     public Task<object> Any(CreateReport request) => AutoQuery.CreateAsync(request, base.Request);
 }
 ```
@@ -3458,9 +3454,9 @@ There's a minor optimization existing custom AutoQuery implementations can do by
 // Sync
 public object Any(QueryRockstars query)
 {
-    using var db = AutoQuery.GetDb(query, base.Request);
-    var q = AutoQuery.CreateQuery(query, base.Request, db);
-    return await AutoQuery.Execute(query, q, base.Request, db);
+    using var db = autoQuery.GetDb(query, base.Request);
+    var q = autoQuery.CreateQuery(query, base.Request, db);
+    return await autoQuery.Execute(query, q, base.Request, db);
 }
 ```
 
@@ -3470,9 +3466,9 @@ Another optimization if using SQL Server or PostgreSQL RDBMS's is to refactor it
 // Async
 public async Task<object> Any(QueryRockstars query)
 {
-    using var db = AutoQuery.GetDb(query, base.Request);
-    var q = AutoQuery.CreateQuery(query, base.Request, db);
-    return await AutoQuery.ExecuteAsync(query, q, base.Request, db);
+    using var db = autoQuery.GetDb(query, base.Request);
+    var q = autoQuery.CreateQuery(query, base.Request, db);
+    return await autoQuery.ExecuteAsync(query, q, base.Request, db);
 }
 ```
 
diff --git a/MyApp/_pages/releases/v5_12.md b/MyApp/_pages/releases/v5_12.md
index 9ba0a7fd54..f44059378c 100644
--- a/MyApp/_pages/releases/v5_12.md
+++ b/MyApp/_pages/releases/v5_12.md
@@ -2327,19 +2327,17 @@ Plugins.Add(new AutoQueryFeature {
 It also wont generate implementations for custom AutoBatch implementations, e.g. you can add a custom implementation that does what the generated implementation would've done and execute using the same DB Connection and Transaction with:
 
 ```csharp
-public class CustomAutoQueryServices : Service
+public class CustomAutoQueryServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-
     public object Any(CreateItem[] requests)
     {
-        using var db = AutoQuery.GetDb<Item>(Request);
+        using var db = autoQuery.GetDb<Item>(Request);
         using var dbTrans = db.OpenTransaction();
 
         var results = new List<object>();
         foreach (var request in requests)
         {
-            var response = await AutoQuery.CreateAsync(request, Request, db);
+            var response = await autoQuery.CreateAsync(request, Request, db);
             results.Add(response);
         }
 
diff --git a/MyApp/_pages/releases/v6_11.md b/MyApp/_pages/releases/v6_11.md
index 358e361a8e..dbcd93978e 100644
--- a/MyApp/_pages/releases/v6_11.md
+++ b/MyApp/_pages/releases/v6_11.md
@@ -569,50 +569,50 @@ is used to transcribe the uploaded Web Audio recording for **all its examples**
 `Recording` RDBMS Table before invoking the Speech-to-Text API that is then updated after its successful or error response:
 
 ```csharp
-public IAutoQueryDb AutoQuery { get; set; }
-public ISpeechToTextFactory SpeechToTextFactory { get; set; }
-
-public async Task<Recording> Any(CreateRecording request)
+public class MyServices(IAutoQueryDb autoQuery, ISpeechToTextFactory speechToTextFactory)
 {
-    var feature = request.Feature.ToLower();
-    var recording = (Recording)await AutoQuery.CreateAsync(request, Request);
-    var speechToText = SpeechToTextFactory.Get(request.Feature);
+    public async Task<Recording> Any(CreateRecording request)
+    {
+        var feature = request.Feature.ToLower();
+        var recording = (Recording)await autoQuery.CreateAsync(request, Request);
+        var speechToText = speechToTextFactory.Get(request.Feature);
 
-    var transcribeStart = DateTime.UtcNow;
-    await Db.UpdateOnlyAsync(() => new Recording { TranscribeStart=transcribeStart },
-        where: x => x.Id == recording.Id);
+        var transcribeStart = DateTime.UtcNow;
+        await Db.UpdateOnlyAsync(() => new Recording { TranscribeStart=transcribeStart },
+            where: x => x.Id == recording.Id);
 
-    ResponseStatus? responseStatus = null;
-    try
-    {
-        var response = await speechToText.TranscribeAsync(request.Path);
-        var transcribeEnd = DateTime.UtcNow;
-        await Db.UpdateOnlyAsync(() => new Recording
+        ResponseStatus? responseStatus = null;
+        try
         {
-            Feature = feature,
-            Provider = speechToText.GetType().Name,
-            Transcript = response.Transcript,
-            TranscriptConfidence = response.Confidence,
-            TranscriptResponse = response.ApiResponse,
-            TranscribeEnd = transcribeEnd,
-            TranscribeDurationMs = (transcribeEnd-transcribeStart).TotalMilliseconds,
-            Error = response.ResponseStatus.ToJson(),
-        }, where: x => x.Id == recording.Id);
-        responseStatus = response.ResponseStatus;
-    }
-    catch (Exception e)
-    {
-        await Db.UpdateOnlyAsync(() => new Recording { Error = e.ToString() },
-            where: x => x.Id == recording.Id);
-        responseStatus = e.ToResponseStatus();
-    }
+            var response = await speechToText.TranscribeAsync(request.Path);
+            var transcribeEnd = DateTime.UtcNow;
+            await Db.UpdateOnlyAsync(() => new Recording
+            {
+                Feature = feature,
+                Provider = speechToText.GetType().Name,
+                Transcript = response.Transcript,
+                TranscriptConfidence = response.Confidence,
+                TranscriptResponse = response.ApiResponse,
+                TranscribeEnd = transcribeEnd,
+                TranscribeDurationMs = (transcribeEnd-transcribeStart).TotalMilliseconds,
+                Error = response.ResponseStatus.ToJson(),
+            }, where: x => x.Id == recording.Id);
+            responseStatus = response.ResponseStatus;
+        }
+        catch (Exception e)
+        {
+            await Db.UpdateOnlyAsync(() => new Recording { Error = e.ToString() },
+                where: x => x.Id == recording.Id);
+            responseStatus = e.ToResponseStatus();
+        }
 
-    recording = await Db.SingleByIdAsync<Recording>(recording.Id);
+        recording = await Db.SingleByIdAsync<Recording>(recording.Id);
 
-    if (responseStatus != null)
-        throw new HttpError(responseStatus, HttpStatusCode.BadRequest);
+        if (responseStatus != null)
+            throw new HttpError(responseStatus, HttpStatusCode.BadRequest);
 
-    return recording;
+        return recording;
+    }
 }
 ```
 
@@ -809,18 +809,18 @@ that just like `CreateRecording` is a custom AutoQuery CRUD Service that uses Au
 initial `Chat` record, that's later updated with the GPT Chat API Response:
 
 ```csharp
-public class GptServices : Service
+public class GptServices(
+    IAutoQueryDb autoQuery,
+    IPromptProviderFactory promptFactory,
+    ITypeChat typeChat,
+    IPromptProvider promptProvider) : Service
 {
     //...
-    public IAutoQueryDb AutoQuery { get; set; }
-    public IPromptProvider PromptProvider { get; set; }
-    public ITypeChat TypeChatProvider { get; set; }
-    
     public async Task<object> Any(CreateChat request)
     {
         var feature = request.Feature.ToLower();
-        var promptProvider = PromptFactory.Get(feature);
-        var chat = (Chat)await AutoQuery.CreateAsync(request, Request);
+        var promptProvider = promptFactory.Get(feature);
+        var chat = (Chat)await autoQuery.CreateAsync(request, Request);
 
         var chatStart = DateTime.UtcNow;
         await Db.UpdateOnlyAsync(() => new Chat { ChatStart = chatStart },
@@ -833,7 +833,7 @@ public class GptServices : Service
             var prompt = await promptProvider.CreatePromptAsync(request.UserMessage);
             var typeChatRequest = CreateTypeChatRequest(feature, schema, prompt, request.UserMessage);
             
-            var response = await TypeChat.TranslateMessageAsync(typeChatRequest);
+            var response = await typeChat.TranslateMessageAsync(typeChatRequest);
             var chatEnd = DateTime.UtcNow;
             await Db.UpdateOnlyAsync(() => new Chat
             {
@@ -1063,10 +1063,8 @@ contains the custom implementation which continues to utilize AutoQuery's **Part
 as well as removing or adding any Options the user makes to the `Category`: 
 
 ```csharp
-public class CoffeeShopServices : Service
+public class CoffeeShopServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-    
     public async Task<object> Any(UpdateCategory request)
     {
         // Perform all RDBMS Updates within the same Transaction
@@ -1077,7 +1075,7 @@ public class CoffeeShopServices : Service
         // Only call AutoQuery Update if there's something to update
         if (request.ToObjectDictionary().HasNonDefaultValues(ignoreKeys:ignore))
         {
-            response = (Category) await AutoQuery.PartialUpdateAsync<Category>(request, Request, Db);
+            response = (Category) await autoQuery.PartialUpdateAsync<Category>(request, Request, Db);
         }
         if (request.RemoveOptionIds?.Count > 0)
         {
diff --git a/MyApp/_pages/servicestack-ai.md b/MyApp/_pages/servicestack-ai.md
index 861e4ec2df..9ceb483b43 100644
--- a/MyApp/_pages/servicestack-ai.md
+++ b/MyApp/_pages/servicestack-ai.md
@@ -565,50 +565,50 @@ is used to transcribe the uploaded Web Audio recording for **all its examples**
 `Recording` RDBMS Table before invoking the Speech-to-Text API that is then updated after its successful or error response:
 
 ```csharp
-public IAutoQueryDb AutoQuery { get; set; }
-public ISpeechToTextFactory SpeechToTextFactory { get; set; }
-
-public async Task<Recording> Any(CreateRecording request)
+public class MyServices(IAutoQueryDb autoQuery, ISpeechToTextFactory speechToTextFactory)
 {
-    var feature = request.Feature.ToLower();
-    var recording = (Recording)await AutoQuery.CreateAsync(request, Request);
-    var speechToText = SpeechToTextFactory.Get(request.Feature);
+    public async Task<Recording> Any(CreateRecording request)
+    {
+        var feature = request.Feature.ToLower();
+        var recording = (Recording)await autoQuery.CreateAsync(request, Request);
+        var speechToText = speechToTextFactory.Get(request.Feature);
 
-    var transcribeStart = DateTime.UtcNow;
-    await Db.UpdateOnlyAsync(() => new Recording { TranscribeStart=transcribeStart },
-        where: x => x.Id == recording.Id);
+        var transcribeStart = DateTime.UtcNow;
+        await Db.UpdateOnlyAsync(() => new Recording { TranscribeStart=transcribeStart },
+            where: x => x.Id == recording.Id);
 
-    ResponseStatus? responseStatus = null;
-    try
-    {
-        var response = await speechToText.TranscribeAsync(request.Path);
-        var transcribeEnd = DateTime.UtcNow;
-        await Db.UpdateOnlyAsync(() => new Recording
+        ResponseStatus? responseStatus = null;
+        try
         {
-            Feature = feature,
-            Provider = speechToText.GetType().Name,
-            Transcript = response.Transcript,
-            TranscriptConfidence = response.Confidence,
-            TranscriptResponse = response.ApiResponse,
-            TranscribeEnd = transcribeEnd,
-            TranscribeDurationMs = (transcribeEnd-transcribeStart).TotalMilliseconds,
-            Error = response.ResponseStatus.ToJson(),
-        }, where: x => x.Id == recording.Id);
-        responseStatus = response.ResponseStatus;
-    }
-    catch (Exception e)
-    {
-        await Db.UpdateOnlyAsync(() => new Recording { Error = e.ToString() },
-            where: x => x.Id == recording.Id);
-        responseStatus = e.ToResponseStatus();
-    }
+            var response = await speechToText.TranscribeAsync(request.Path);
+            var transcribeEnd = DateTime.UtcNow;
+            await Db.UpdateOnlyAsync(() => new Recording
+            {
+                Feature = feature,
+                Provider = speechToText.GetType().Name,
+                Transcript = response.Transcript,
+                TranscriptConfidence = response.Confidence,
+                TranscriptResponse = response.ApiResponse,
+                TranscribeEnd = transcribeEnd,
+                TranscribeDurationMs = (transcribeEnd-transcribeStart).TotalMilliseconds,
+                Error = response.ResponseStatus.ToJson(),
+            }, where: x => x.Id == recording.Id);
+            responseStatus = response.ResponseStatus;
+        }
+        catch (Exception e)
+        {
+            await Db.UpdateOnlyAsync(() => new Recording { Error = e.ToString() },
+                where: x => x.Id == recording.Id);
+            responseStatus = e.ToResponseStatus();
+        }
 
-    recording = await Db.SingleByIdAsync<Recording>(recording.Id);
+        recording = await Db.SingleByIdAsync<Recording>(recording.Id);
 
-    if (responseStatus != null)
-        throw new HttpError(responseStatus, HttpStatusCode.BadRequest);
+        if (responseStatus != null)
+            throw new HttpError(responseStatus, HttpStatusCode.BadRequest);
 
-    return recording;
+        return recording;
+    }
 }
 ```
 
@@ -805,18 +805,18 @@ that just like `CreateRecording` is a custom AutoQuery CRUD Service that uses Au
 initial `Chat` record, that's later updated with the GPT Chat API Response:
 
 ```csharp
-public class GptServices : Service
+public class GptServices(
+    IAutoQueryDb autoQuery,
+    IPromptProviderFactory promptFactory,
+    ITypeChat typeChat,
+    IPromptProvider promptProvider) : Service
 {
     //...
-    public IAutoQueryDb AutoQuery { get; set; }
-    public IPromptProvider PromptProvider { get; set; }
-    public ITypeChat TypeChatProvider { get; set; }
-    
     public async Task<object> Any(CreateChat request)
     {
         var feature = request.Feature.ToLower();
-        var promptProvider = PromptFactory.Get(feature);
-        var chat = (Chat)await AutoQuery.CreateAsync(request, Request);
+        var promptProvider = promptFactory.Get(feature);
+        var chat = (Chat)await autoQuery.CreateAsync(request, Request);
 
         var chatStart = DateTime.UtcNow;
         await Db.UpdateOnlyAsync(() => new Chat { ChatStart = chatStart },
@@ -829,7 +829,7 @@ public class GptServices : Service
             var prompt = await promptProvider.CreatePromptAsync(request.UserMessage);
             var typeChatRequest = CreateTypeChatRequest(feature, schema, prompt, request.UserMessage);
             
-            var response = await TypeChat.TranslateMessageAsync(typeChatRequest);
+            var response = await typeChat.TranslateMessageAsync(typeChatRequest);
             var chatEnd = DateTime.UtcNow;
             await Db.UpdateOnlyAsync(() => new Chat
             {
diff --git a/MyApp/_pages/vue/custom-autoforms.md b/MyApp/_pages/vue/custom-autoforms.md
index 50e8f7cef5..bfe51dba9f 100644
--- a/MyApp/_pages/vue/custom-autoforms.md
+++ b/MyApp/_pages/vue/custom-autoforms.md
@@ -60,10 +60,8 @@ contains the custom implementation which continues to utilize AutoQuery's **Part
 as well as removing or adding any Options the user makes to the `Category`: 
 
 ```csharp
-public class CoffeeShopServices : Service
+public class CoffeeShopServices(IAutoQueryDb autoQuery) : Service
 {
-    public IAutoQueryDb AutoQuery { get; set; }
-    
     public async Task<object> Any(UpdateCategory request)
     {
         // Perform all RDBMS Updates within the same Transaction
@@ -74,7 +72,7 @@ public class CoffeeShopServices : Service
         // Only call AutoQuery Update if there's something to update
         if (request.ToObjectDictionary().HasNonDefaultValues(ignoreKeys:ignore))
         {
-            response = (Category) await AutoQuery.PartialUpdateAsync<Category>(request, Request, Db);
+            response = (Category) await autoQuery.PartialUpdateAsync<Category>(request, Request, Db);
         }
         if (request.RemoveOptionIds?.Count > 0)
         {

From c387bc229da23486636b305e7873dafd020a83b4 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Mon, 23 Sep 2024 17:50:37 +0800
Subject: [PATCH 2/5] Add podcast episode AudioPlayer on all v8.x release notes

---
 MyApp/_pages/releases/v8_00.md               |   7 +-
 MyApp/_pages/releases/v8_01.md               |   9 +-
 MyApp/_pages/releases/v8_02.md               |   5 +
 MyApp/_pages/releases/v8_03.md               |   5 +
 MyApp/_pages/releases/v8_04.md               |   5 +
 MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs | 452 +++++++++++++++++++
 MyApp/wwwroot/pages/releases/v8_00.mjs       |   2 +
 MyApp/wwwroot/pages/releases/v8_01.mjs       |   2 +
 MyApp/wwwroot/pages/releases/v8_02.mjs       |   2 +
 MyApp/wwwroot/pages/releases/v8_03.mjs       |  22 +
 MyApp/wwwroot/pages/releases/v8_04.mjs       |  12 +
 11 files changed, 518 insertions(+), 5 deletions(-)
 create mode 100644 MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs
 create mode 100644 MyApp/wwwroot/pages/releases/v8_03.mjs
 create mode 100644 MyApp/wwwroot/pages/releases/v8_04.mjs

diff --git a/MyApp/_pages/releases/v8_00.md b/MyApp/_pages/releases/v8_00.md
index 1773364ba3..9f9a1f680a 100644
--- a/MyApp/_pages/releases/v8_00.md
+++ b/MyApp/_pages/releases/v8_00.md
@@ -2,7 +2,12 @@
 title: ServiceStack v8
 ---
 
-<img class="mt-8" style="" src="/img/pages/release-notes/v8/net8.webp">
+<div class="-mt-16 flex justify-center not-prose">
+    <audio-player id="v8-0-release" title="ServiceStack v8.0 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-1-release.mp3" variant="compact"
+        class="w-[450px]"></audio-player>
+</div>
+
+![](/img/pages/release-notes/v8/net8.webp)
 
 ## .NET 8
 
diff --git a/MyApp/_pages/releases/v8_01.md b/MyApp/_pages/releases/v8_01.md
index 37c053f6fc..6d8fc11626 100644
--- a/MyApp/_pages/releases/v8_01.md
+++ b/MyApp/_pages/releases/v8_01.md
@@ -2,11 +2,12 @@
 title: ServiceStack v8.1
 ---
 
-<div class="not-prose flex flex-col items-center -mt-20 -mb-8"><div class="flex">
-<svg class="w-40 h-40 text-purple-900" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M4.83 15h2.91a4.9 4.9 0 0 1-1.55-2H5a3 3 0 1 1 0-6h3a3 3 0 0 1 2.82 4h2.1a5 5 0 0 0 .08-.83v-.34A4.83 4.83 0 0 0 8.17 5H4.83A4.83 4.83 0 0 0 0 9.83v.34A4.83 4.83 0 0 0 4.83 15"/><path fill="currentColor" d="M15.17 5h-2.91a4.9 4.9 0 0 1 1.55 2H15a3 3 0 1 1 0 6h-3a3 3 0 0 1-2.82-4h-2.1a5 5 0 0 0-.08.83v.34A4.83 4.83 0 0 0 11.83 15h3.34A4.83 4.83 0 0 0 20 10.17v-.34A4.83 4.83 0 0 0 15.17 5"/></svg>
-</div></div>
+<div class="-mt-16 flex justify-center not-prose">
+    <audio-player id="v8-1-release" title="ServiceStack v8.1 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-1-release.mp3" variant="compact"
+        class="w-[480px]"></audio-player>
+</div>
 
-<img src="/img/pages/release-notes/v8.1/aspnet-8.webp">
+![](/img/pages/release-notes/v8.1/aspnet-8.webp)
 
 ## Full integration with ASP .NET Core 8
 
diff --git a/MyApp/_pages/releases/v8_02.md b/MyApp/_pages/releases/v8_02.md
index b1003846d6..5d5757a61f 100644
--- a/MyApp/_pages/releases/v8_02.md
+++ b/MyApp/_pages/releases/v8_02.md
@@ -2,6 +2,11 @@
 title: ServiceStack v8.2
 ---
 
+<div class="-mt-16 flex justify-center not-prose">
+    <audio-player id="v8-2-release" title="ServiceStack v8.2 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-2-release.mp3" variant="compact"
+        class="w-[500px]"></audio-player>
+</div>
+
 ![](/img/pages/release-notes/v8.2/spa-logos.webp)
 
 With ServiceStack [now fully integrated with .NET 8](/endpoint-routing), our focus has shifted 
diff --git a/MyApp/_pages/releases/v8_03.md b/MyApp/_pages/releases/v8_03.md
index 2f6edb12ba..9b7e808b89 100644
--- a/MyApp/_pages/releases/v8_03.md
+++ b/MyApp/_pages/releases/v8_03.md
@@ -2,6 +2,11 @@
 title: ServiceStack v8.3
 ---
 
+<div class="-mt-16 flex justify-center not-prose">
+    <audio-player id="v8-3-release" title="ServiceStack v8.3 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-3-release.mp3" variant="compact"
+        class="w-[500px]"></audio-player>
+</div>
+
 ![](/img/pages/release-notes/v8.3/bg-security.webp)
 
 We've got a couple of exciting features in this release opening ServiceStack up to new use-cases with the potential
diff --git a/MyApp/_pages/releases/v8_04.md b/MyApp/_pages/releases/v8_04.md
index 3a61e594c7..99be690837 100644
--- a/MyApp/_pages/releases/v8_04.md
+++ b/MyApp/_pages/releases/v8_04.md
@@ -2,6 +2,11 @@
 title: ServiceStack v8.4
 ---
 
+<div class="-mt-16 flex justify-center not-prose">
+    <audio-player id="v8-4-release" title="ServiceStack v8.4 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-4-release.mp3" variant="compact"
+        class="w-[500px]"></audio-player>
+</div>
+
 ![](/img/pages/release-notes/v8.4/bg-sqlite.webp)
 
 We're excited to announce **Background Jobs** our effortless solution for queueing and managing 
diff --git a/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs b/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs
new file mode 100644
index 0000000000..f5e88ec1e5
--- /dev/null
+++ b/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs
@@ -0,0 +1,452 @@
+import { ref, computed, nextTick, shallowRef, onMounted, onUnmounted } from "vue"
+
+const ForwardIcon = {
+    template: `
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
+      <path d="M16 5L19 8M19 8L16 11M19 8H10.5C7.46243 8 5 10.4624 5 13.5C5 15.4826 5.85204 17.2202 7 18.188"
+        stroke-width="1.5" stroke-line-cap="round" stroke-line-join="round" />
+      <path d="M13 15V19" stroke-width="1.5" stroke-line-cap="round" stroke-line-join="round" />
+      <path d="M16 18V16C16 15.4477 16.4477 15 17 15H18C18.5523 15 19 15.4477 19 16V18C19 18.5523 18.5523 19 18 19H17C16.4477 19 16 18.5523 16 18Z"
+        stroke-width="1.5" stroke-line-cap="round" stroke-line-join="round" />
+    </svg>`
+}
+const ForwardButton = {
+    components: { ForwardIcon },
+    template: `
+    <button type="button"
+      class="group relative rounded-full focus:outline-none"
+      @click="player.seekBy(amount ?? 10)" :aria-label="'Fast-forward ' + (amount ?? 10) + ' seconds'">
+      <div class="absolute -inset-4 -left-2 md:hidden" />
+      <ForwardIcon class="h-6 w-6 stroke-slate-500 group-hover:stroke-slate-700" />
+    </button>`,
+    props: { player:Object, amount:Number },
+}
+
+const MuteIcon = {
+    template:`
+    <svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke-line-cap="round" stroke-line-join="round">
+        <template v-if="muted">
+          <path d="M12 6L8 10H6C5.44772 10 5 10.4477 5 11V13C5 13.5523 5.44772 14 6 14H8L12 18V6Z" />
+          <path d="M16 10L19 13" fill="none" />
+          <path d="M19 10L16 13" fill="none" />
+        </template>
+        <template v-else>
+          <path d="M12 6L8 10H6C5.44772 10 5 10.4477 5 11V13C5 13.5523 5.44772 14 6 14H8L12 18V6Z" />
+          <path d="M17 7C17 7 19 9 19 12C19 15 17 17 17 17" fill="none" />
+          <path d="M15.5 10.5C15.5 10.5 16 10.9998 16 11.9999C16 13 15.5 13.5 15.5 13.5" fill="none" />
+        </template>
+    </svg>`,
+    props: { muted:Boolean }
+}
+const MuteButton = {
+    components: { MuteIcon },
+    template:`
+        <button type="button" :aria-label="player.muted ? 'Unmute' : 'Mute'"
+              class="group relative rounded-md hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 md:order-none"
+              @click="player.toggleMute()">
+          <div class="absolute -inset-4 md:hidden" />
+          <MuteIcon :muted="player.muted"
+            class="h-6 w-6 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700" />
+        </button>
+    `,
+    props: { player:Object },
+}
+
+const playbackRates = [
+    {
+        value: 1,
+        icon:  {
+            template:`
+                <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="1.5" stroke-line-cap="round" stroke-line-join="round">
+                    <path d="M13 1H3C1.89543 1 1 1.89543 1 3V13C1 14.1046 1.89543 15 3 15H13C14.1046 15 15 14.1046 15 13V3C15 1.89543 14.1046 1 13 1Z"
+                        fill="currentColor" stroke="currentColor" stroke-width="2" />
+                    <path d="M3.75 7.25L5.25 5.77539V11.25" />
+                    <path d="M8.75 7.75L11.25 10.25" />
+                    <path d="M11.25 7.75L8.75 10.25" />
+                </svg>
+            `,
+        },
+    },
+    {
+        value: 1.5,
+        icon: {
+            template: `
+                <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="1.5" stroke-line-cap="round" stroke-line-join="round">
+                    <path
+                        d="M13 1H3C1.89543 1 1 1.89543 1 3V13C1 14.1046 1.89543 15 3 15H13C14.1046 15 15 14.1046 15 13V3C15 1.89543 14.1046 1 13 1Z"
+                        fill="currentColor" stroke="currentColor" stroke-width="2" />
+                    <path d="M2.75 7.25L4.25 5.77539V11.25" />
+                    <path d="M7.5 11C7.5 11.2761 7.27614 11.5 7 11.5C6.72386 11.5 6.5 11.2761 6.5 11C6.5 10.7239 6.72386 10.5 7 10.5C7.27614 10.5 7.5 10.7239 7.5 11Z" stroke-width="1"/>
+                    <path d="M12.25 5.75H9.75V8.25H10.75C11.5784 8.25 12.25 8.92157 12.25 9.75V9.75C12.25 10.5784 11.5784 11.25 10.75 11.25H9.75" />
+                </svg>            
+            `
+        },
+    },
+    {
+        value: 2,
+        icon: {
+            template: `
+                <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="1.5" stroke-line-cap="round" stroke-line-join="round">
+                    <path d="M13 1H3C1.89543 1 1 1.89543 1 3V13C1 14.1046 1.89543 15 3 15H13C14.1046 15 15 14.1046 15 13V3C15 1.89543 14.1046 1 13 1Z"
+                        fill="currentColor" stroke="currentColor" stroke-width="2" />
+                    <path d="M9.75 8.75L12.25 11.25" />
+                    <path d="M12.25 8.75L9.75 11.25" />
+                    <path d="M3.75 7.25C3.75 7.25 3.90144 5.75 5.63462 5.75C6.1633 5.75 6.5448 5.95936 6.81973 6.25035C7.67157 7.15197 6.97033 8.47328 6.0238 9.28942L3.75 11.25H7.25" />
+                </svg>            
+            `
+        },
+    },
+]
+const PlaybackRateButton = {
+    template:`
+    <button type="button"
+          class="relative flex h-6 w-6 items-center justify-center rounded-md text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
+          @click="nextPlaybackRate()"
+          aria-label="Playback rate">
+      <div class="absolute -inset-4 md:hidden"></div>
+      <component :is="playbackRate.icon" class="h-4 w-4" />
+    </button>    
+    `,
+    props: { player:Object },
+    setup(props) {
+        const playbackRate = shallowRef(playbackRates[0])
+        function nextPlaybackRate() {
+            let existingIdx = playbackRates.indexOf(playbackRate.value)
+            let idx = (existingIdx + 1) % playbackRates.length
+            let next = playbackRates[idx]
+            playbackRate.value = next
+            props.player.playbackRate(next.value)
+        }
+        return { playbackRate, nextPlaybackRate }
+    }
+}
+
+const PlayButton = {
+    template:`
+        <button type="button" :aria-label="player.isPlaying ? 'Pause' : 'Play'"
+              class="group relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-slate-700 dark:bg-slate-200 hover:bg-slate-900 dark:hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-700 dark:focus:ring-slate-200 focus:ring-offset-2 dark:ring-offset-black md:h-14 md:w-14"
+              @click="player.toggle()">
+          <div class="absolute -inset-3 md:hidden" />
+            <svg v-if="player.isPlaying" viewBox="0 0 36 36" aria-hidden="true" class="h-5 w-5 fill-white dark:fill-black group-active:fill-white/80 dark:group-active:fill-black/80 md:h-7 md:w-7">
+              <path d="M8.5 4C7.67157 4 7 4.67157 7 5.5V30.5C7 31.3284 7.67157 32 8.5 32H11.5C12.3284 32 13 31.3284 13 30.5V5.5C13 4.67157 12.3284 4 11.5 4H8.5ZM24.5 4C23.6716 4 23 4.67157 23 5.5V30.5C23 31.3284 23.6716 32 24.5 32H27.5C28.3284 32 29 31.3284 29 30.5V5.5C29 4.67157 28.3284 4 27.5 4H24.5Z" />
+            </svg>    
+            <svg v-else viewBox="0 0 36 36" aria-hidden="true" class="h-5 w-5 fill-white dark:fill-black group-active:fill-white/80 dark:group-active:fill-black/80 md:h-7 md:w-7">
+              <path d="M33.75 16.701C34.75 17.2783 34.75 18.7217 33.75 19.299L11.25 32.2894C10.25 32.8668 9 32.1451 9 30.9904L9 5.00962C9 3.85491 10.25 3.13323 11.25 3.71058L33.75 16.701Z" />
+            </svg>
+        </button>    
+    `,
+    props: { player:Object },
+}
+
+const RewindIcon = {
+    template:`
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-line-cap="round" stroke-line-join="round">
+      <path d="M8 5L5 8M5 8L8 11M5 8H13.5C16.5376 8 19 10.4624 19 13.5C19 15.4826 18.148 17.2202 17 18.188" />
+      <path d="M5 15V19" />
+      <path d="M8 18V16C8 15.4477 8.44772 15 9 15H10C10.5523 15 11 15.4477 11 16V18C11 18.5523 10.5523 19 10 19H9C8.44772 19 8 18.5523 8 18Z" />
+    </svg>`,
+}
+const RewindButton = {
+    components: { RewindIcon },
+    template:`
+        <button type="button"
+              class="group relative rounded-full focus:outline-none"
+              @click="player.seekBy(-(amount??10))"
+              :aria-label="'Rewind ' + (amount??10) + ' seconds'">
+          <div class="absolute -inset-4 -right-2 md:hidden" />
+          <RewindIcon class="h-6 w-6 stroke-slate-500 group-hover:stroke-slate-700" />
+        </button>`,
+    props: { player:Object, amount:Number },
+}
+
+const Slider = {
+    template:`
+      <div class="w-full flex items-center">
+        <div ref="sliderRef"
+          class="relative flex-grow h-2 bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer"
+          @click="handleClick"
+          @mousedown="startDrag"
+          @mousemove="handleDrag"
+          @mouseup="stopDrag"
+          @mouseleave="stopDrag">
+          <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full" 
+            :style="{ width: progress + '%' }"></div>
+          <div class="absolute top-1/2 -mt-2 w-4 h-4 bg-white dark:bg-black border-2 border-blue-500 rounded-full shadow"
+            :style="{ left: 'calc(' + progress + '% - 0.5rem)' }"></div>
+        </div>
+        <div class="hidden ml-2 items-center gap-2 md:flex whitespace-nowrap">
+            <span class="hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 md:block text-slate-500 dark:text-slate-400">{{ formatTime(currentTime) }}</span>
+            <span class="text-sm leading-6 text-slate-300 dark:text-slate-600" aria-hidden="true">/</span>
+            <span class="hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 text-slate-500 dark:text-slate-400 md:block">{{ formatTime(duration) }}</span>
+        </div>                    
+      </div>    
+    `,
+    emits: ['update:currentTime'],
+    props: {
+        currentTime: {
+            type: Number,
+            default: 0
+        },
+        duration: {
+            type: Number,
+            default: 0
+        }
+    },
+    setup(props, { emit }) {
+        const sliderRef = ref(null)
+        const isDragging = ref(false)
+        const progress = computed(() => (props.duration > 0 ? (props.currentTime / props.duration) * 100 : 0))
+        function startDrag() {
+            isDragging.value = true;
+        }
+        function stopDrag() {
+            isDragging.value = false
+        }
+        function handleDrag(event) {
+            if (isDragging.value) {
+                updateProgress(event)
+            }
+        }
+        function handleClick(event) {
+            updateProgress(event)
+        }
+        function updateProgress(event) {
+            if (sliderRef.value) {
+                const rect = sliderRef.value.getBoundingClientRect()
+                const offsetX = event.clientX - rect.left
+                const newProgress = (offsetX / rect.width) * 100
+                const newTime = (props.duration * newProgress) / 100
+                emit('update:currentTime', newTime)
+            }
+        }
+
+        const formatTime = (time) => {
+            const minutes = Math.floor(time / 60)
+            const seconds = Math.floor(time % 60)
+            return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+        };
+        onMounted(() => {
+            document.addEventListener('mouseup', stopDrag)
+        })
+        onUnmounted(() => {
+            document.removeEventListener('mouseup', stopDrag)
+        })
+        return {
+            sliderRef,
+            progress,
+            formatTime,
+            startDrag,
+            stopDrag,
+            handleDrag,
+            handleClick,
+        }
+    }
+}
+
+const AudioPlayer = {
+    components: {
+        PlayButton,
+        MuteButton,
+        RewindButton,
+        ForwardButton,
+        PlaybackRateButton,
+        Slider,
+    },
+    template:`
+        <div v-if="src" :class="v.cls">
+            <audio ref="refPlayer"
+                @play="onPlay()" @pause="onPause()"
+                @timeupdate="onTimeUpdate(Math.floor($event.currentTarget.currentTime))"
+                @durationchange="onDurationChange(Math.floor($event.currentTarget.duration))"
+                :muted="muted"
+            />
+            <div class="hidden md:block">
+                <PlayButton :player="player"/>
+            </div>
+            <div :class="v.innerCls">
+                <a :href="'/podcasts/' + id"
+                    class="truncate text-center text-sm font-bold leading-6 md:text-left"
+                    :title="title">
+                    {{title}}
+                </a>
+                <div :class="v.controlsCls">
+                    <div :class="v.startControlsCls">
+                        <MuteButton :player="player"/>
+                    </div>
+                    <div :class="v.midControlsCls">
+                        <RewindButton :player="player"/>
+                        <div class="md:hidden">
+                            <PlayButton :player="player"/>
+                        </div>
+                        <ForwardButton :player="player"/>
+                    </div>
+                    <Slider :currentTime="currentTime" :duration="duration" @update:currentTime="player.currentTime=$event" />
+                    <div :class="v.endControlsCls">
+                        <div class="flex items-center">
+                            <PlaybackRateButton :player="player"/>
+                        </div>
+                        <div class="hidden items-center md:flex">
+                            <MuteButton :player="player"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>    
+    `,
+    props: {
+        bus: Object,
+        id: String,
+        title: String,
+        src: String,
+        playbackRate: Number,
+        currentTime: Number,
+        autoPlay: Boolean,
+        variant: String,
+        cls: { 
+            type: String,
+            default: 'flex items-center gap-6 bg-white/90 dark:bg-black/90 px-4 py-4 shadow shadow-slate-200/80 dark:shadow-slate-700/80 ring-1 ring-slate-900/5 dark:ring-slate-50/5 backdrop-blur-sm md:px-6'
+        },
+        innerCls: {
+            type: String,
+            default: 'mb-[env(safe-area-inset-bottom)] flex flex-1 flex-col gap-3 overflow-hidden p-1'
+        },
+        controlsCls: {
+            type: String,
+            default: 'flex justify-between gap-6'
+        },
+        startControlsCls: {
+            type: String,
+            default: 'flex items-center md:hidden'
+        },
+        midControlsCls: {
+            type: String,
+            default: 'flex flex-none items-center gap-4'
+        },
+        endControlsCls: {
+            type: String,
+            default: 'flex items-center gap-4'
+        },
+    },
+    setup(props) {
+        const refPlayer = ref()
+        const muted = ref(false)
+        const state = ref('paused')
+        const currentTime = ref()
+        const duration = ref()
+        const playbackRate = ref(props.playbackRate || 1)
+
+        const variants = {
+            cls: {
+                compact: 'flex items-center bg-white/90 dark:bg-black/90 shadow shadow-slate-200/80 dark:shadow-slate-700/80 ring-1 ring-slate-900/5 dark:ring-slate-50/5 backdrop-blur-sm gap-2 pl-2 pr-4 rounded-full'
+            },
+            innerCls: {
+                compact: 'mb-[env(safe-area-inset-bottom)] flex flex-1 flex-col gap-1 overflow-hidden p-1'
+            },
+            controlsCls: {
+                compact: 'flex justify-between gap-2'
+            },
+            startControlsCls: {},
+            midControlsCls: {
+                compact: 'flex flex-none items-center gap-1 mr-1'
+            },
+            endControlsCls: {
+                compact: 'flex items-center gap-1'
+            },
+        }
+        const v = {
+            cls: variants.cls[props.variant] ?? props.cls,
+            innerCls: variants.innerCls[props.variant] ?? props.innerCls,
+            controlsCls: variants.controlsCls[props.variant] ?? props.controlsCls,
+            startControlsCls: variants.startControlsCls[props.variant] ?? props.startControlsCls,
+            midControlsCls: variants.midControlsCls[props.variant] ?? props.midControlsCls,
+            endControlsCls: variants.endControlsCls[props.variant] ?? props.endControlsCls,
+        }
+
+        function onPlay() {
+            state.value = 'playing'
+        }
+        function onPause() {
+            state.value = 'paused'
+        }
+        function onTimeUpdate(time) {
+            currentTime.value = time
+        }
+        function onDurationChange(value) {
+            duration.value = value
+        }
+        
+        const player = globalThis.player = {
+            get url() { return props.url },
+            get id() { return props.id },
+            get title() { return props.title },
+            play() {
+                // console.log('play', state.value, refPlayer.value.src, props.src)
+                if (refPlayer.value.src !== props.src) {
+                    refPlayer.value.src = props.src
+                    refPlayer.value.load()
+                    refPlayer.value.pause()
+                    refPlayer.value.playbackRate = playbackRate.value
+                    refPlayer.value.currentTime = props.currentTime || 0
+                }
+                refPlayer.value.play()
+                onPlay()
+            },
+            pause() {
+                refPlayer.value.pause()
+                onPause()
+            },
+            toggle() {
+                if (this.isPlaying) {
+                    this.pause()
+                } else {
+                    this.play()
+                }
+            },
+            set muted(muted) {
+                refPlayer.value.muted = muted.value = muted;
+            },
+            get muted() {
+                return muted.value
+            },
+            toggleMute() {
+                refPlayer.value.muted = muted.value = !muted.value
+            },
+            seekBy(secs) {
+                refPlayer.value.currentTime += secs
+            },
+            /** @param {Number} value */
+            set currentTime(value) {
+                refPlayer.value.currentTime = value
+            },
+            playbackRate(rate) {
+                playbackRate.value = rate
+            },
+            get isPlaying() { return state.value === 'playing' },
+        }
+
+        let sub = props.bus?.subscribe('toggleAudioPlayer', () => player.toggle())
+        onMounted(() => {
+            if (props.autoPlay) {
+                player.toggle()
+            }
+        })
+        onUnmounted(() => sub?.unsubscribe())
+        // console.log('AudioPlayer.mjs', globalThis.player)
+        
+        return {
+            v,
+            refPlayer,
+            muted,
+            player,
+            currentTime,
+            duration,
+            playbackRate,
+            onPlay,
+            onPause,
+            onTimeUpdate,
+            onDurationChange,
+        }
+    }
+}
+
+export default AudioPlayer
\ No newline at end of file
diff --git a/MyApp/wwwroot/pages/releases/v8_00.mjs b/MyApp/wwwroot/pages/releases/v8_00.mjs
index e4439147d3..5b680e2a79 100644
--- a/MyApp/wwwroot/pages/releases/v8_00.mjs
+++ b/MyApp/wwwroot/pages/releases/v8_00.mjs
@@ -1,4 +1,5 @@
 import Templates, { Index } from "../templates/Templates.mjs"
+import AudioPlayer from "../podcasts/AudioPlayer.mjs"
 
 const BlazorTemplate = {
     components: { Templates },
@@ -28,6 +29,7 @@ export default {
     install(app) {
     },
     components: {
+        AudioPlayer,
         BlazorTemplate,
         BlazorVueTemplate,
         IdentityAuthTemplates,
diff --git a/MyApp/wwwroot/pages/releases/v8_01.mjs b/MyApp/wwwroot/pages/releases/v8_01.mjs
index 6c19a77cfe..7b415fb09a 100644
--- a/MyApp/wwwroot/pages/releases/v8_01.mjs
+++ b/MyApp/wwwroot/pages/releases/v8_01.mjs
@@ -1,4 +1,5 @@
 import Templates, { Index } from "../templates/Templates.mjs"
+import AudioPlayer from "../podcasts/AudioPlayer.mjs"
 
 const BlazorTemplate = {
     components: { Templates },
@@ -28,6 +29,7 @@ export default {
     install(app) {
     },
     components: {
+        AudioPlayer,
         BlazorTemplate,
         BlazorWasmTemplate,
         BlazorVueTemplate,
diff --git a/MyApp/wwwroot/pages/releases/v8_02.mjs b/MyApp/wwwroot/pages/releases/v8_02.mjs
index ed75a8283a..c289f22663 100644
--- a/MyApp/wwwroot/pages/releases/v8_02.mjs
+++ b/MyApp/wwwroot/pages/releases/v8_02.mjs
@@ -1,4 +1,5 @@
 import Templates, { Index } from "../templates/Templates.mjs"
+import AudioPlayer from "../podcasts/AudioPlayer.mjs"
 
 const ComposeTemplate = {
     components: { Templates },
@@ -12,6 +13,7 @@ export default {
     install(app) {
     },
     components: {
+        AudioPlayer,
         ComposeTemplate,
     },
     setup() {
diff --git a/MyApp/wwwroot/pages/releases/v8_03.mjs b/MyApp/wwwroot/pages/releases/v8_03.mjs
new file mode 100644
index 0000000000..8b8f42f23b
--- /dev/null
+++ b/MyApp/wwwroot/pages/releases/v8_03.mjs
@@ -0,0 +1,22 @@
+import Templates, { Index } from "../templates/Templates.mjs"
+import AudioPlayer from "../podcasts/AudioPlayer.mjs"
+
+const AuthTemplates = {
+    components: { Templates },
+    template:`<Templates :templates="[Index['blazor'], Index['blazor-vue'], Index['razor'], Index['mvc'], Index['razor-bootstrap'], Index['mvc-bootstrap']]" hide="demo" />`,
+    setup() {
+        return { Index }
+    }
+}
+
+export default {
+    install(app) {
+    },
+    components: {
+        AudioPlayer,
+        AuthTemplates,
+    },
+    setup() {
+        return { }
+    }
+}
diff --git a/MyApp/wwwroot/pages/releases/v8_04.mjs b/MyApp/wwwroot/pages/releases/v8_04.mjs
new file mode 100644
index 0000000000..e024c2f29b
--- /dev/null
+++ b/MyApp/wwwroot/pages/releases/v8_04.mjs
@@ -0,0 +1,12 @@
+import AudioPlayer from "../podcasts/AudioPlayer.mjs"
+
+export default {
+    install(app) {
+    },
+    components: {
+        AudioPlayer,
+    },
+    setup() {
+        return { }
+    }
+}

From 48f0103f44a9f857b70a3e0e0b1c7b4bbba7d85f Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Tue, 24 Sep 2024 15:55:49 +0800
Subject: [PATCH 3/5] add beacon-url to podcasts

---
 MyApp/_pages/releases/v8_00.md | 2 +-
 MyApp/_pages/releases/v8_01.md | 2 +-
 MyApp/_pages/releases/v8_02.md | 2 +-
 MyApp/_pages/releases/v8_03.md | 2 +-
 MyApp/_pages/releases/v8_04.md | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/MyApp/_pages/releases/v8_00.md b/MyApp/_pages/releases/v8_00.md
index 9f9a1f680a..4735df2eec 100644
--- a/MyApp/_pages/releases/v8_00.md
+++ b/MyApp/_pages/releases/v8_00.md
@@ -3,7 +3,7 @@ title: ServiceStack v8
 ---
 
 <div class="-mt-16 flex justify-center not-prose">
-    <audio-player id="v8-0-release" title="ServiceStack v8.0 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-1-release.mp3" variant="compact"
+    <audio-player id="v8-0-release" title="ServiceStack v8.0 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-1-release.mp3" variant="compact" beacon-url="https://account.servicestack.net/stats/podcast/record?name=v8-0-release&source=v8_00&version=8.4"
         class="w-[450px]"></audio-player>
 </div>
 
diff --git a/MyApp/_pages/releases/v8_01.md b/MyApp/_pages/releases/v8_01.md
index 6d8fc11626..309716c24a 100644
--- a/MyApp/_pages/releases/v8_01.md
+++ b/MyApp/_pages/releases/v8_01.md
@@ -3,7 +3,7 @@ title: ServiceStack v8.1
 ---
 
 <div class="-mt-16 flex justify-center not-prose">
-    <audio-player id="v8-1-release" title="ServiceStack v8.1 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-1-release.mp3" variant="compact"
+    <audio-player id="v8-1-release" title="ServiceStack v8.1 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-1-release.mp3" variant="compact" beacon-url="https://account.servicestack.net/stats/podcast/record?name=v8-1-release&source=v8_01&version=8.4"
         class="w-[480px]"></audio-player>
 </div>
 
diff --git a/MyApp/_pages/releases/v8_02.md b/MyApp/_pages/releases/v8_02.md
index 5d5757a61f..aa8880c94f 100644
--- a/MyApp/_pages/releases/v8_02.md
+++ b/MyApp/_pages/releases/v8_02.md
@@ -3,7 +3,7 @@ title: ServiceStack v8.2
 ---
 
 <div class="-mt-16 flex justify-center not-prose">
-    <audio-player id="v8-2-release" title="ServiceStack v8.2 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-2-release.mp3" variant="compact"
+    <audio-player id="v8-2-release" title="ServiceStack v8.2 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-2-release.mp3" variant="compact" beacon-url="https://account.servicestack.net/stats/podcast/record?name=v8-2-release&source=v8_02&version=8.4"
         class="w-[500px]"></audio-player>
 </div>
 
diff --git a/MyApp/_pages/releases/v8_03.md b/MyApp/_pages/releases/v8_03.md
index 9b7e808b89..e6fd1cf0db 100644
--- a/MyApp/_pages/releases/v8_03.md
+++ b/MyApp/_pages/releases/v8_03.md
@@ -3,7 +3,7 @@ title: ServiceStack v8.3
 ---
 
 <div class="-mt-16 flex justify-center not-prose">
-    <audio-player id="v8-3-release" title="ServiceStack v8.3 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-3-release.mp3" variant="compact"
+    <audio-player id="v8-3-release" title="ServiceStack v8.3 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-3-release.mp3" variant="compact" beacon-url="https://account.servicestack.net/stats/podcast/record?name=v8-3-release&source=v8_03&version=8.4"
         class="w-[500px]"></audio-player>
 </div>
 
diff --git a/MyApp/_pages/releases/v8_04.md b/MyApp/_pages/releases/v8_04.md
index 99be690837..e2486fbef5 100644
--- a/MyApp/_pages/releases/v8_04.md
+++ b/MyApp/_pages/releases/v8_04.md
@@ -3,7 +3,7 @@ title: ServiceStack v8.4
 ---
 
 <div class="-mt-16 flex justify-center not-prose">
-    <audio-player id="v8-4-release" title="ServiceStack v8.4 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-4-release.mp3" variant="compact"
+    <audio-player id="v8-4-release" title="ServiceStack v8.4 Podcast Episode" src="https://media.servicestack.com/podcasts/v8-4-release.mp3" variant="compact" beacon-url="https://account.servicestack.net/stats/podcast/record?name=v8-4-release&source=v8_04&version=8.4"
         class="w-[500px]"></audio-player>
 </div>
 

From 13b1a07cd5beb3cd806b8188b2a86e3276a3d670 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Tue, 24 Sep 2024 16:00:49 +0800
Subject: [PATCH 4/5] Add support for beaconUrl

---
 MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs b/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs
index f5e88ec1e5..0aa3b75918 100644
--- a/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs
+++ b/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs
@@ -302,6 +302,7 @@ const AudioPlayer = {
         currentTime: Number,
         autoPlay: Boolean,
         variant: String,
+        beaconUrl: String,
         cls: { 
             type: String,
             default: 'flex items-center gap-6 bg-white/90 dark:bg-black/90 px-4 py-4 shadow shadow-slate-200/80 dark:shadow-slate-700/80 ring-1 ring-slate-900/5 dark:ring-slate-50/5 backdrop-blur-sm md:px-6'
@@ -337,7 +338,7 @@ const AudioPlayer = {
 
         const variants = {
             cls: {
-                compact: 'flex items-center bg-white/90 dark:bg-black/90 shadow shadow-slate-200/80 dark:shadow-slate-700/80 ring-1 ring-slate-900/5 dark:ring-slate-50/5 backdrop-blur-sm gap-2 pl-2 pr-4 rounded-full'
+                compact: 'flex items-center bg-white/90 dark:bg-black/90 shadow shadow-slate-200/80 dark:shadow-slate-700/80 ring-1 ring-slate-900/5 dark:ring-slate-50/5 backdrop-blur-sm gap-2 pl-1 pr-4 rounded-full'
             },
             innerCls: {
                 compact: 'mb-[env(safe-area-inset-bottom)] flex flex-1 flex-col gap-1 overflow-hidden p-1'
@@ -387,6 +388,9 @@ const AudioPlayer = {
                     refPlayer.value.pause()
                     refPlayer.value.playbackRate = playbackRate.value
                     refPlayer.value.currentTime = props.currentTime || 0
+                    if (props.beaconUrl) {
+                        navigator.sendBeacon(props.beaconUrl)
+                    }
                 }
                 refPlayer.value.play()
                 onPlay()

From 0aa8b64423e2a8e6ab0e73b42898aed21314e049 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Fri, 27 Sep 2024 13:10:51 +0800
Subject: [PATCH 5/5] update Callback URLs

---
 MyApp/_pages/background-jobs.md | 14 +++++++-------
 MyApp/_pages/releases/v8_04.md  | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/MyApp/_pages/background-jobs.md b/MyApp/_pages/background-jobs.md
index 917ef00977..b279158a82 100644
--- a/MyApp/_pages/background-jobs.md
+++ b/MyApp/_pages/background-jobs.md
@@ -635,31 +635,31 @@ public class NotifyCheckUrlsCommand(IHttpClientFactory clientFactory)
 `ReplyTo` can be any URL which by default will have the result POST'ed back to the URL with a JSON
 Content-Type. Typically URLs will contain a reference Id so external clients can correlate a callback
 with the internal process that initiated the job. If the callback API is publicly available you'll
-want to use an internal Id that can't be guessed so the callback can't be spoofed, like a Guid, e.g:
+want to use an internal Id that can't be guessed (like a Guid) so the callback can't be spoofed, e.g:
 
-`$"https://api.example.com?refId={RefId}"`
+`$"https://api.example.com/callback?refId={RefId}"`
 
 If needed the callback URL can be customized on how the HTTP Request callback is sent.
 
 If the URL contains a space, the text before the space is treated as the HTTP method:
 
-`"PUT https://api.example.com"`
+`"PUT https://api.example.com/callback"`
 
 If the auth part contains a colon `:` it's treated as Basic Auth:
 
-`"username:password@https://api.example.com"`
+`"username:password@https://api.example.com/callback"`
 
 If name starts with `http.` sends a HTTP Header
 
-`"http.X-API-Key:myApiKey@https://api.example.com"`
+`"http.X-API-Key:myApiKey@https://api.example.com/callback"`
 
 Otherwise it's sent as a Bearer Token:
 
-`"myToken123@https://api.example.com"`
+`"myToken123@https://api.example.com/callback"`
 
 Bearer Token or HTTP Headers starting with `$` is substituted with Environment Variable if exists:
 
-`"$API_TOKEN@https://api.example.com"`
+`"$API_TOKEN@https://api.example.com/callback"`
 
 When needed headers, passwords and tokens can be URL encoded if they contain any delimiter characters.
 
diff --git a/MyApp/_pages/releases/v8_04.md b/MyApp/_pages/releases/v8_04.md
index e2486fbef5..cfbdbfdf45 100644
--- a/MyApp/_pages/releases/v8_04.md
+++ b/MyApp/_pages/releases/v8_04.md
@@ -779,31 +779,31 @@ public class NotifyCheckUrlsCommand(IHttpClientFactory clientFactory)
 `ReplyTo` can be any URL which by default will have the result POST'ed back to the URL with a JSON
 Content-Type. Typically URLs will contain a reference Id so external clients can correlate a callback
 with the internal process that initiated the job. If the callback API is publicly available you'll
-want to use an internal Id that can't be guessed so the callback can't be spoofed, like a Guid, e.g:
+want to use an internal Id that can't be guessed (like a Guid) so the callback can't be spoofed, e.g:
 
-`$"https://api.example.com?refId={RefId}"`
+`$"https://api.example.com/callback?refId={RefId}"`
 
 If needed the callback URL can be customized on how the HTTP Request callback is sent.
 
 If the URL contains a space, the text before the space is treated as the HTTP method:
 
-`"PUT https://api.example.com"`
+`"PUT https://api.example.com/callback"`
 
 If the auth part contains a colon `:` it's treated as Basic Auth:
 
-`"username:password@https://api.example.com"`
+`"username:password@https://api.example.com/callback"`
 
 If name starts with `http.` sends a HTTP Header
 
-`"http.X-API-Key:myApiKey@https://api.example.com"`
+`"http.X-API-Key:myApiKey@https://api.example.com/callback"`
 
 Otherwise it's sent as a Bearer Token:
 
-`"myToken123@https://api.example.com"`
+`"myToken123@https://api.example.com/callback"`
 
 Bearer Token or HTTP Headers starting with `$` is substituted with Environment Variable if exists:
 
-`"$API_TOKEN@https://api.example.com"`
+`"$API_TOKEN@https://api.example.com/callback"`
 
 When needed headers, passwords and tokens can be URL encoded if they contain any delimiter characters.