bolero: use Elmish View Component for YouTube thumbs

[Bryan Wilhite]

attempt to translate @songhay/player-video-you-tube [ GitHub ] into an Elmish View Component for Bolero [ 📖 docs ]

this issue has taken priority over #79

• translate selected models from Angular library models
  • add Songhay.Player.YouTube.Tests project to add integration tests for YouTube data
  • translate you-tube-channel-set-data.store.spec.ts
  • translate you-tube-channel-data.store.spec.ts
• translate you-tube-thumbs to ElmishComponent<>
• translate you-tube-thumbs-set to ElmishComponent<>
  • add div to contain YtSet, showing and hiding with CSS animation
  • add YtSet Bulma header and Bulma dropdown with Elmish eventing/commanding

[Bryan Wilhite]

The higher-order function RemoteHandlerUtility.toHandlerOutputAsync is my new general-purpose error-handling strategy for Result<HttpResponseMessage,exn> where HttpResponseMessage is expected to contain JSON which will be converted into domain data by the domain-specific dataGetter passed as a parameter.

[Bryan Wilhite]

major changes:

• removed spacing and font sizing deferring to Bulma
• replaced button with a.command for Bulma

[Bryan Wilhite]

🥳

[Bryan Wilhite]

added songhay JavaScript [ GitHub] helpers:

the following CodePen will be used to develop interactivity: https://codepen.io/rasx/pen/mdpdqwW

[Bryan Wilhite]

Bolero: using cond and forEach in the same function

Forgetting the importance of cond and forEach threatens to come back to bite me again. Hours were lost last night because I could not think of this:

[Bryan Wilhite]

Bolero: IJSRuntime.InvokeAsync<HtmlRef> is probably an anti-pattern

Returning HtmlRef for the sake of JavaScript interop is probably never useful which means the following is likely not useful:

let getChildHtmlElementByQueryAsync (htmlRef: HtmlRef) (query: string) (jsRuntime: IJSRuntime) =
    let elementRef = htmlRef |> tryGetElementReference |> Result.valueOr raise
    jsRuntime.InvokeAsync<HtmlRef>($"{rx}.{DomUtility}.getChildHtmlElementByQuery", elementRef, query).AsTask()

let getChildHtmlElementsByQueryAsync (htmlRef: HtmlRef) (query: string) (jsRuntime: IJSRuntime) =
    let elementRef = htmlRef |> tryGetElementReference |> Result.valueOr raise
    jsRuntime.InvokeAsync<HtmlRef>($"{rx}.{DomUtility}.getChildHtmlElementsByQuery", elementRef, query).AsTask()

let getClosestHtmlElementByQueryAsync (htmlRef: HtmlRef) (query: string) (jsRuntime: IJSRuntime) =
    let elementRef = htmlRef |> tryGetElementReference |> Result.valueOr raise
    jsRuntime.InvokeAsync<HtmlRef>($"{rx}.{DomUtility}.getClosestHtmlElementByQuery", elementRef, query).AsTask()

let getElementByQueryAsync (query: string) (jsRuntime: IJSRuntime) =
    jsRuntime.InvokeAsync<HtmlRef>("document.querySelector", query).AsTask()

I thought I needed functions like these because I erroneously thought only one HtmlRef was recognized per component.

[Bryan Wilhite]

current thumbs layout:

[Bryan Wilhite]

final moves for this ridiculously-lengthy issue:

• move overlay y-scroll to .set block
• change overlay hide/show animation based on observations of how Android apps open on my Lenovo tablet
• move CSS animation jump-starter dictionary (state bag) to the component to pass this bag up into the module functions

this last item on the list is there for reasons that deserve more explanation but no time for that now ⌛