CS Plugin Pages Load Everytime not from Cache?

[mickle026 400]

Is there a way to make plugin HTML pages load fully everytime rather than cached?

I tried adding this to the html

    <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

However when I load the Main Start Page and Go back to my secondary page, dynamic items dont load or trigger my api calls.  Other pages work just fine, its just the main start page that seems to do this, but its not every time, it seems to be random.

 

I have api calls that need to be triggered when the page is viewed , like below

        return function (page, params) {
            page.addEventListener('viewshow',
                () => {
                    ApiClient.getJSON(ApiClient.getUrl('/CPP/DoMyThing')).then(response => {
                        var dat = response;
                        document.getElementById("DisplayMyResults").innerHTML = dat.Text;
                        console.log(dat.Text);
                    }).catch(e => {
                        console.log(e);
                    });
}

I have also tried

window.top.location = window.top.location
 
and

window.location = window.location;

Could it be firefox nightly that is faulty?

 

However its not as bad as MS Edge, loading api calls as the page is rendered to replace divs with returned content crashes my MS Edge in windows 10.

[chef 3745]

@mickle026 Try this:

                   ApiClient.getJSON(ApiClient.getUrl('CPP/DoMyThing')).then(response => {
                        var dat = response;
                        document.getElementById("DisplayMyResults").innerHTML = dat.Text;
                        console.log(dat.Text);
                    }).catch(e => {
                        console.log(e);
                    });

Take the "/" off before the initial endpoint call. It's probably routing to a 500 or 404 not found, and there is nothing to load.

"CPP/DoMyThing"

not

"/CPP/DoMyThing"

Edited September 18, 2022 by chef

[mickle026 400]

4 minutes ago, chef said:

Try this:

                   ApiClient.getJSON(ApiClient.getUrl('CPP/DoMyThing')).then(response => {
                        var dat = response;
                        document.getElementById("DisplayMyResults").innerHTML = dat.Text;
                        console.log(dat.Text);
                    }).catch(e => {
                        console.log(e);
                    });

Take the "/" off before the initial endpoint call. It's probably routing to a 500 or 404 not found, and there is nothing to load.

"CPP/DoMyThing"

not

"/CPP/DoMyThing"

I wish it was that, but sadly it makes no difference to the behaviour.

It still does it, occasionally not triggering the api calls, and doesnt work at all in EDGE

[mickle026 400]

Here is a screen recording to show you whats happening

 

 

Edited September 18, 2022 by mickle026

[mickle026 400]

 

I did a test where api call returns the base 64  text of an image in the plugins directory, I have a fallback error string that is put there if image load fails.  So either way if api is called I get a result, either an image or a string.  No string or image is loaded showing the api call fails.

1st page load is not triggering api calls, second one is.

1.If I click Home once it loads nothing, 

2.I click it again it loads the image via api call into the placeholder,

3.I click it again,the page is loaded but not the api call,

4.I click it again nothing,the page is loaded but not the api call,

5.I click it again it loads the image via the apicall

and repeat is the same

page.addEventListener('viewshow',
                () => {

is not triggering everytime, this is litterally doing my head in !  The api calls seem to be triggered every 3rd page load

Edited September 18, 2022 by mickle026

[roaku 795]

@mickle026

I have a feeling you're running into this quirk of the Emby UI, rather than an html caching issue:
 

If so, then your listeners and/or query selectors are getting attached to dom elements that aren't active when you navigate back.

You would need to attach and select through the page or view object, depending on which one you're using.

page.getElementById(...) instead of document.getElementById(...), for example.

[mickle026 400]

5 minutes ago, roaku said:

@mickle026

I have a feeling you're running into this quirk of the Emby UI, rather than an html caching issue:
 

If so, then your listeners and/or query selectors are getting attached to dom elements that aren't active when you navigate back.

You would need to attach and select through the page or view object, depending on which one you're using.

page.getElementById(...) instead of document.getElementById(...), for example.

I think that s what it must be.

Thanks Roaku, gosh more learning ... as if this isnt hard enough ,..... lol

Edited September 18, 2022 by mickle026

[chef 3745]

Is all your code inside that API promise callback?

Don't use document.getElementById

Instead use:

page.getElementById

 

That way you are not querying the entire document.

It might just be that.

 

Edited September 18, 2022 by chef

[mickle026 400]

no

 

html, the label is swapped for image data as base 64 string in a html file

    <div style="padding:0 16px">
        <label id="LoadHTML=MainHeader.html"></label>
        <h1>Home</h1>
        <hr />

        <h3>Enable/Dissable Plugin Completely</h3>
        <div class="checkboxContainer checkboxContainer-withDescription">
            <label class="emby-checkbox-label">
                <input is="emby-checkbox" type="checkbox" id="enableProviders" name="enableProviders" class="emby-checkbox emby-checkbox-focusring">
                <span class="checkboxLabel">Enable/Dissable Providers</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription"></div>
        </div>
        <blockquote>
            <div class="checkboxContainer checkboxContainer-withDescription">
                <label class="emby-checkbox-label">
                    <input is="emby-checkbox" type="checkbox" id="enableScrapers" name="enableScrapers" class="emby-checkbox emby-checkbox-focusring">
                    <span class="checkboxLabel">Enable/Dissable Scrapers</span>
                </label>
                <div class="fieldDescription checkboxFieldDescription"></div>
            </div>
        </blockquote>
        <hr />
    </div>

this is wrapped in

<div id="CPV4ToolsHome" data-role="page" class="page type-interior pluginConfigurationPage page-windowScroll"
     data-require="emby-button,emby-select,emby-checkbox,emby-linkbutton,emby-input" data-controller="__plugin/CPV4ToolsHome.js">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
  
</div>

with a css style as well

 

javascript

define(["loading","require", "jQuery", "globalize", "emby-checkbox", "emby-select", "emby-linkbutton", "emby-input", "emby-button"],

        //return function (page, params) {

        function (loading) {
            return function (page) {

                var pluginUniqueId = "B19C4634-2C02-4DD9-8579-F950961EB219";


                page.addEventListener('viewshow',
                    () => {
                        
                        ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
                            var dat = response;
                            document.getElementById("LoadHTML=MainHeader.html").innerHTML = dat.Text;
                            console.log(dat.Text);
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                );
            }
        }
);

c#

using MediaBrowser.Common.Net;
using MediaBrowser.Controller.Configuration;
using MediaBrowser.Controller.Library;
using MediaBrowser.Model.IO;
using MediaBrowser.Model.Serialization;
using MediaBrowser.Model.Services;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;

namespace Custom_Provider_v4.Configuration
{
    public partial class LoadHTMLToHTMLfromFolder : IService
    {

        private readonly IServerConfigurationManager configurationManager;
        private readonly IHttpClient _httpClient;
        private readonly IFileSystem _fileSystem;
        private readonly ILibraryManager libraryManager;
        private IJsonSerializer JsonSerializer { get; }
        internal static LoadHTMLToHTMLfromFolder Current;

        public LoadHTMLToHTMLfromFolder(IServerConfigurationManager serverConf, ILibraryManager libMan, IHttpClient httpClient, IFileSystem fileSystem, IJsonSerializer json)
        {
            configurationManager = serverConf;
            _httpClient = httpClient;
            _fileSystem = fileSystem;
            JsonSerializer = json;
            libraryManager = libMan;

            Current = this;
        }


        [Route("/CPP/{PageName}/LoadHTML", "GET", Summary = "Load a Local HTML Page and Embed it Images")]
        public class LoadHTMLToHTML : IReturn<object>
        {

            public string Text { get; set; }


            /// <summary>
            /// The Name of the Image to process
            /// </summary>
            /// <value></value>
            [ApiMember(Name = "PageName", Description = "Load HTML Page", IsRequired = true, DataType = "string", ParameterType = "path", Verb = "GET")]
            public string PageName { get; set; }
        }

        public string Get(LoadHTMLToHTML result)
        {

            var config = Plugin.Instance.Configuration;
            Current = this;
            string ThisPluginPath = Path.Combine(Current.configurationManager.CommonApplicationPaths.PluginsPath, "CustomProvider");
            string PageName = Path.Combine(ThisPluginPath, result.PageName);

            // generic check or exit if values are empty
            if (File.Exists(PageName))
            {
                string HTMLText = File.ReadAllText(PageName);

                return JsonSerializer.SerializeToString(new LoadHTMLToHTML()
                {
                    Text = HTMLText
                });
            }
            else
            {
                return JsonSerializer.SerializeToString(new LoadHTMLToHTML()
                {
                    Text = $"Exited with incorrect parameters (Page name:{PageName}) set.<br />Does File Exist/Name spelt correctly? <br />"
                });

            }
        }
    }
}

Basically what it does is load html text from a html file in the plugins folder "/Plugins/CustomProvider"

In that html file I can put anything, but images must be a base 64 string

The html is put where the label is.  The get url

CPP/MainHeader.html/LoadHTML

calls the LoadHTML in the .cs file and sends in MainHeader.html as the filename which returns the html file as a string.

 

so what I should be seing is

But as roaku pointed out there may be several cached versions of the page.....

Edited September 18, 2022 by mickle026

[mickle026 400]

The idea is to be able to display anything from files created on the server.

I just thought this would be easy :(, I could load reports, html, images, css or even other website pages this way but it seems to be proving to be a headache !

[chef 3745]

are you using the built in  tabs manager?

have a look here. maybe this doesn't help... i dunno...

define(['loading', 'mainTabsManager'],
    function (loading, mainTabsManager) {

    ApiClient.makeMyCall = function () {
         var url = this.getUrl("My_Endpoint");
          return this.getJSON(url);
     }

     function anotherImportantMethod(){
         return "Important Data";
     }

      function getTabs() {
            var tabs = [
                {
                    href: Dashboard.getConfigurationPageUrl('POINTING_TO_A_JS_EMBEDDED_RESOURCE_NAMED_IN PLUGIN_CS'),
                    name: "Tab 1
                },
                {
                    href: Dashboard.getConfigurationPageUrl('ANOTHER_TAB_POINTING_TO_A_JS_EMBEDDED_RESOURCE_NAMED_IN PLUGIN_CS'),
                    name: "Tab 2"
                },
                {
                    href: Dashboard.getConfigurationPageUrl('YET_ANOTHER_POINTER_POINTING_TO_A_JS_EMBEDDED_RESOURCE_NAMED_IN PLUGIN_CS'),
                    name: 'Tab 3'
                }
            ];
            return tabs;
        }

        return function (view, params) {

                view.addEventListener('viewshow', async function () {

                 mainTabsManager.setTabs(this, 0, getTabs); //This points to Tab 0 which is this tab. O index in the array of tabs (getTabs)
                  
                 var myImportantResponseData = await ApiClient.makeMyCall(); //mayMyCall was a function which extended the ApiClient... up there!
                  
                  //No need to Promise anyting... no 'then'... no callback hell because we are awaited.
                  console.log(myImportantResponseData);                
                 
                 
                });
               
        }
        
      
});

 

[chef 3745]

4 minutes ago, mickle026 said:

no

 

html, the label is swapped for image data as base 64 string in a html file

    <div style="padding:0 16px">
        <label id="LoadHTML=MainHeader.html"></label>
        <h1>Home</h1>
        <hr />

        <h3>Enable/Dissable Plugin Completely</h3>
        <div class="checkboxContainer checkboxContainer-withDescription">
            <label class="emby-checkbox-label">
                <input is="emby-checkbox" type="checkbox" id="enableProviders" name="enableProviders" class="emby-checkbox emby-checkbox-focusring">
                <span class="checkboxLabel">Enable/Dissable Providers</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription"></div>
        </div>
        <blockquote>
            <div class="checkboxContainer checkboxContainer-withDescription">
                <label class="emby-checkbox-label">
                    <input is="emby-checkbox" type="checkbox" id="enableScrapers" name="enableScrapers" class="emby-checkbox emby-checkbox-focusring">
                    <span class="checkboxLabel">Enable/Dissable Scrapers</span>
                </label>
                <div class="fieldDescription checkboxFieldDescription"></div>
            </div>
        </blockquote>
        <hr />
    </div>

this is wrapped in

<div id="CPV4ToolsHome" data-role="page" class="page type-interior pluginConfigurationPage page-windowScroll"
     data-require="emby-button,emby-select,emby-checkbox,emby-linkbutton,emby-input" data-controller="__plugin/CPV4ToolsHome.js">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
  
</div>

with a css style as well

 

javascript

define(["loading","require", "jQuery", "globalize", "emby-checkbox", "emby-select", "emby-linkbutton", "emby-input", "emby-button"],

        //return function (page, params) {

        function (loading) {
            return function (page) {

                var pluginUniqueId = "B19C4634-2C02-4DD9-8579-F950961EB219";


                page.addEventListener('viewshow',
                    () => {
                        
                        ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
                            var dat = response;
                            document.getElementById("LoadHTML=MainHeader.html").innerHTML = dat.Text;
                            console.log(dat.Text);
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                );
            }
        }
);

c#

using MediaBrowser.Common.Net;
using MediaBrowser.Controller.Configuration;
using MediaBrowser.Controller.Library;
using MediaBrowser.Model.IO;
using MediaBrowser.Model.Serialization;
using MediaBrowser.Model.Services;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;

namespace Custom_Provider_v4.Configuration
{
    public partial class LoadHTMLToHTMLfromFolder : IService
    {

        private readonly IServerConfigurationManager configurationManager;
        private readonly IHttpClient _httpClient;
        private readonly IFileSystem _fileSystem;
        private readonly ILibraryManager libraryManager;
        private IJsonSerializer JsonSerializer { get; }
        internal static LoadHTMLToHTMLfromFolder Current;

        public LoadHTMLToHTMLfromFolder(IServerConfigurationManager serverConf, ILibraryManager libMan, IHttpClient httpClient, IFileSystem fileSystem, IJsonSerializer json)
        {
            configurationManager = serverConf;
            _httpClient = httpClient;
            _fileSystem = fileSystem;
            JsonSerializer = json;
            libraryManager = libMan;

            Current = this;
        }


        [Route("/CPP/{PageName}/LoadHTML", "GET", Summary = "Load a Local HTML Page and Embed it Images")]
        public class LoadHTMLToHTML : IReturn<object>
        {

            public string Text { get; set; }


            /// <summary>
            /// The Name of the Image to process
            /// </summary>
            /// <value></value>
            [ApiMember(Name = "PageName", Description = "Load HTML Page", IsRequired = true, DataType = "string", ParameterType = "path", Verb = "GET")]
            public string PageName { get; set; }
        }

        public string Get(LoadHTMLToHTML result)
        {

            var config = Plugin.Instance.Configuration;
            Current = this;
            string ThisPluginPath = Path.Combine(Current.configurationManager.CommonApplicationPaths.PluginsPath, "CustomProvider");
            string PageName = Path.Combine(ThisPluginPath, result.PageName);

            // generic check or exit if values are empty
            if (File.Exists(PageName))
            {
                string HTMLText = File.ReadAllText(PageName);

                return JsonSerializer.SerializeToString(new LoadHTMLToHTML()
                {
                    Text = HTMLText
                });
            }
            else
            {
                return JsonSerializer.SerializeToString(new LoadHTMLToHTML()
                {
                    Text = $"Exited with incorrect parameters (Page name:{PageName}) set.<br />Does File Exist/Name spelt correctly? <br />"
                });

            }
        }
    }
}

Basically what it does is load html text from a html file in the plugins folder "/Plugins/CustomProvider"

In that html file I can put anything, but images must be a base 64 string

The html is put where the label is.  The get url

CPP/MainHeader.html/LoadHTML

calls the LoadHTML in the .cs file and sends in MainHeader.html as the filename which returns the html file as a string.

 

so what I should be seing is

But as roaku pointed out there may be several cached versions of the page.....

oh... right, I understand now...

cool idea.

I'll keep looking to see if I can see anything.

 

If you break the dev console sources tab on inside the "viewshow" event it never gets raised when browsing back... eh?

[chef 3745]

What happens if the Service endpoint returned 'string' instead of 'object'?

Probably doesn't matter as string is an object... still looking...

[chef 3745]

Maybe it is because you set 'Current' to 'this'  inside  Get(LoadHTMLToHTML result) ?

Your IService class will persist for the lifetime of the Server.

If you set 'Current' to 'this' inside the constructor only, then when the Emby builds your service, you should not have to set it again.

Perhaps when the call is made a second time 'Current' no longer means what it did when the Service first loads??

 

 

Edited September 18, 2022 by chef

[mickle026 400]

My tabs are CSS tabs not tabmanager.  Too many limitations with tab manager.

I'll look at current= this but I really don't think that's the problem as the API call is not even being called to enter the c# code.  The c# code works fine when it's called.  I believe this is a HTML related dom problem.

It persists even with the change roaku mentioned.

[mickle026 400]

What's bothering me more than anything is why are there more than 1 session of a page?

Click home , API loads

Click home , API doesn't load

Click home, API doesn't load

Click home, API loads

Click home, API doesn't load

Click home, API doesn't load

Click home API loads

And so on.....

I mean wtf!  

This is without clicking back on the web browser. 3 sessions...3 instances of the page....

This is a pain in the rear!

How can this be avoided?

If I add a click button to the page this works every time, but I want it to be as the page renders.

[Luke 37066]

There's no way to do this, but you can have JavaScript fill in all the dynamic data that you need.

[mickle026 400]

2 minutes ago, Luke said:

There's no way to do this, but you can have JavaScript fill in all the dynamic data that you need.

Thats there is where the problem lies, the JavaScript is not getting called evertime.

[mickle026 400]

Even though there are 3 instances of the page how come they are not the same , only 1 have JavaScript enabled?

 

I really don't understand this....

[Luke 37066]

The javascript gets pulled down once but the pages will each have their own instances. You may want to look at AutoOrganize and how it sets up it's javascript and events:

https://github.com/MediaBrowser/Emby.AutoOrganize

[chef 3745]

I was thinking, what if you put the JavaScript that had to run on the page, in script tags at the bottom of the html?

Have all your main functions written and load in the external JavaScript file, but then each time the html page loads, the DOM would read the script tags too. Right?

Put whatever API calls you want in the DomContentLoaded event.

Even better is that the ApiClient is scoped globally so it is available in the script tags.

 

That has gotta work for you.

[mickle026 400]

Tried adding this, and nothing changes

 

I actually have never heard of Dom Content loaded so not sure if this is correct either.  Nothing from this is logged in the console

<script>
    document.addEventListener("DOMContentLoaded", (event) => {

        for (let i = 0; i < 1_000_000_000; i++);
  // This synchronous script is going to delay parsing of the DOM,
  // so the DOMContentLoaded event is going to launch later.

        ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
            var dat = response;
            document.getElementById("LoadHTML=MainHeader.html").innerHTML = dat.Text;
            console.log("DOM fully loaded and parsed");
            console.log(dat.Text);
        }).catch(e => {
            console.log(e);
        });
        console.log("DOM fully loaded and parsed");
  });

</script>

However I am always getting a 200 OK response from Emby server

Ive made a little progress in the debugging of what is happening.  Actually the javascript is firing! after all.  Its the page thats not updating

Each click is 200 OK response

and each click has the data (below)

 

so therefore it must be this bit , the promise response to change the elements data

document.getElementById("LoadHTML=MainHeader.html").innerHTML = dat.Text;

Thats not happening on 2 of the 3 instances

I changed the element id name to

<label id="header"></label>

and the responce to

document.getElementById("header").innerHTML = dat.Text;

To see if the = in the elements id was causing it, but its still the same behaviour

 

To be clear this is working perfectly until the user clicks to go off the page and then comes back.  Only on the 3rd click is this page fully reloaded or it shows the original instance.

 

So basically its like it has been said already, 2 of the 3 page instances dont update

I fear that there maybe no fix for this at all without a button to manually intervene.

[mickle026 400]

I didnt know this until today but in firefox inspector you can actually see the 3 instances, div id="CPV4Homepage", and as you click the active one highlights, greyed out areas seem to be the parts that are ignored.

if you click event on the active page it shows the javascript for "viewshow", in colour if its triggered, greyed if not.
So I can see its triggered everytime.

The label is not updated from the response everytime,the label is there, but ignored

greyed out for 2 of these page instances.  It looks as if even though emnby server is responding to the page the label is not available to be updated

Edited September 19, 2022 by mickle026

[roaku 795]

23 minutes ago, mickle026 said:

Tried adding this, and nothing changes

 

I actually have never heard of Dom Content loaded so not sure if this is correct either.  Nothing from this is logged in the console

<script>
    document.addEventListener("DOMContentLoaded", (event) => {

        for (let i = 0; i < 1_000_000_000; i++);
  // This synchronous script is going to delay parsing of the DOM,
  // so the DOMContentLoaded event is going to launch later.

        ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
            var dat = response;
            document.getElementById("LoadHTML=MainHeader.html").innerHTML = dat.Text;
            console.log("DOM fully loaded and parsed");
            console.log(dat.Text);
        }).catch(e => {
            console.log(e);
        });
        console.log("DOM fully loaded and parsed");
  });

</script>

However I am always getting a 200 OK response from Emby server

Ive made a little progress in the debugging of what is happening.  Actually the javascript is firing! after all.  Its the page thats not updating

Each click is 200 OK response

and each click has the data (below)

 

so therefore it must be this bit , the promise response to change the elements data

document.getElementById("LoadHTML=MainHeader.html").innerHTML = dat.Text;

Thats not happening on 2 of the 3 instances

I changed the element id name to

<label id="header"></label>

and the responce to

document.getElementById("header").innerHTML = dat.Text;

To see if the = in the elements id was causing it, but its still the same behaviour

 

To be clear this is working perfectly until the user clicks to go off the page and then comes back.  Only on the 3rd click is this page fully reloaded or it shows the original instance.

 

So basically its like it has been said already, 2 of the 3 page instances dont update

I fear that there maybe no fix for this at all without a button to manually intervene.

It still looks like you just need to use the page/view object for the getElementById selector instead of document.

page.getElementById(...) or view.getElementById(...)

[mickle026 400]

2 minutes ago, roaku said:

It still looks like you just need to use the page/view object for the getElementById selector instead of document.

page.getElementById(...) or view.getElementById(...)

I might have missed the meaning of this in your earlier explanation, trying it now

        function (loading) {
            return function (page) {

                var pluginUniqueId = "B19C4634-2C02-4DD9-8579-F950961EB219";

                page.addEventListener('viewshow',
                    () => {
                            ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
                            var dat = response;
                            page.getElementById("header").innerHTML = dat.Text;
                            console.log(dat.Text);
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                );
            }

        }

page.getElementById("header").innerHTML = dat.Text; - doesn't update anything, its like the element header cannot be found within the page array

document.getElementById("header").innerHTML = dat.Text; - document updates the label 1 in 3 times

view doesn't exist

 

This is still lost on me - lol !  I'll get there though the more i do the more will sink into this brainy thing of mine....