Configuration questions

[kingalysterianlion]

Greetings, In the setup of my JW Showcase, I have a few things that I would like to do.

1. I have added a new sub nav bar below the header nav that consists of different media categories (i.e. movies, tv, concerts etc. I will include a screenshot) How would I go creating these areas in jw showcase? Would I make multiple instances in different directories of the application and provide the url or is there another way?

2. Is it possible to make the poster images wider?

3. I would like to integrate this application into a subscription platform that I am building on Ruby on Rails. How would I go about handling this integration?

4. I would like to add an image to the background when the application is loading, how can I achieve this?

I am working on a deployment that is time sensitive. If you could get in touch with me quickly that would be greatly appreciated.

Note: I have kept the sample content loaded while I work out the majority of the UI and UX specs and changes that I want before I begin uploading my desired content.

Grace & Blessings, King Alysterian Lion

[pajter]

Hi!

1. Multiple instances should work, but I'm not sure how user friendly it is. If you want to do it properly you'd have to create a new route/view to handle those 'sub-playlists'. Both of these options would require some work though.
2. See https://github.com/jwplayer/jw-showcase/wiki/Getting-Started#configuration-parameters -> content[].aspectratio. If you want more fine-grained control you can edit this css file.
3. I'm not sure what you mean by this. If you're asking about how to add Showcase to your server, you can find more information here.
4. It's probably easiest to add an image to your body in index.html and remove that as soon as your application is loaded.

Hope this helps!

Pieter

[kingalysterianlion]

Greetings, Thank you for getting back to me so quickly. Can you walk me through the general roadmap (sprint) that I would need to do to create the appropriate views? What are the basic tasks that I would need to do to make the new view work? I know that I need to create the HTML files in the views directory. How would I go about setting up each of those views markup? Do I need to create new files elsewhere? or just create the view HTML files? Should I replicate the same structure as the view files for the main page? I am sorry for all the questions, I am just trying to understand the steps I should take in order to achieve my desired outcome.

[pajter]

First of all, if you haven't done so yet, fork the repo and get it running locally.

Then you should start by adding a new module, controller and view. You could just copy an existing module, such as Settings (module/controller, view), and start from there. Most of that code should be pretty self-explanatory, or can best be learned from the AngularJS docs. As far as matching a view template to a controller, check out this line. As you can see there, you only need to pass the correct path.

When adding those new files, be sure to also reference the module and controller files in index.html so that they get included in the build process.

[kingalysterianlion]

I forked the repo first and that is how I got all of the customizations setup that I have done thus far. I also renamed the repo directory and created my own local vcs based on the repo that has the customized name with all of my customizations.

[kingalysterianlion]

Do I need to copy the entire setting directory where the module and controller are located? Also, when I am creating a new view, should I just copy the header view and change which button is active? Finally, should I create a new module, controller, and view for each button in the category nav bar that I created?

[kingalysterianlion]

Greetings, I copied the dashboard directory in both the scripts and the views directories and renamed as well as configured the files within these directories accordingly. I also added the appropriate attributes to the jwShowcase.module.js file so that the buttons would work. Now I would like to change what shows up in the featured section. I noticed that the media ID information is within the config.js file. However, I would like to change what shows based upon the category that is clicked. How can I accomplish this?

[pajter]

You would need to add some sort of filter. If you've added new routes, I would suggest pairing each route with a specific playlist id. That way you could add categories to your config.json, and for each category you can specify a playlist id. Then in your new route, you can read which playlist id you need to retrieve based on the current selected category.

[kingalysterianlion]

Greetings, Are you referring to setting up routes using Angular? Could you please explain the how and where I would create these routes and how I would go about setting them up in my config.json file? How would I structure these routes? Would I create a single routes file? Or would I create multiple routes files? Finally, where would I store the routes files. Thank you for your help in ensuring that I can get this application configured, developed and deployed.

[kingalysterianlion]

Greetings, I am currently working on the routing of content. What would be the best practices that you would recommend for setting up these routes within the JW Showcase framework? These routes will be used to display different content (Playlists based on the route that is selected. This is a time sensitive matter as I am on a dead line for the beta deployment of this platform. Grace & Blessings, Ellis

[pajter]

Routes are configured in the $stateProvider with the url property. See this line for an example: https://github.com/jwplayer/jw-showcase/blob/develop/app/scripts/settings/settings.module.js#L36

There is no specific JW Showcase framework. It's an AngularJS application using ui-router, so you'll be able to find most things in the official documentation.

[kingalysterianlion]

Greetings, Thanks for getting back to me. I have got my new sub nav working perfectly! My next task is to assign specific playlists to each route. How would I inject the playlistid into the corresponding route that I created? Would I call the playlistid in the corresponding module file that I created? If so, how would I go about achieving this? Thank you for your prompt response to this matter. Grace & Blessings, Ellis

[kingalysterianlion]

Greetings, Could I duplicate the config file and rename (eg copy .config.json and rename it to musicconfig.json) it for the module I would like to control and call the new config file in the corresponding module files? Grace & Blessings

[pajter]

I would suggest adding those playlist id's to the existing config file, and then editing this method to load them. As soon as you get those custom playlist feeds into your application, you can consume them in your new module. See the feed module for an example of how this works.

[kingalysterianlion]

Greetings, Ok thank you for the clarification. So should I basically so would I edit the feeds module? Or would I insert similar functions and methods that are in the feeds module file into my new modules that I created?

The next question I have is what edits will I need to my custom playlists to the config file by creating a new code block like the content code block and then call that new content code block in the apiConsumer.service.js file then route that content block to my module? If this is the case would I just call the new content code block section from the config file to the the section that you referenced on the apiConsumer.service.js File? or create a new function for each content block in that file?

I know that these are a lot of questions and I really appreciate your help and patience. Grace & Blessings,

[pajter]

I think adding a new key to the existing config would work fine. For example

config.json

{
  "subcontent": [
    {
      "title": "Featured",
      "playlistId": "123asdf"
    },
    {
      "title": "Music",
      "playlistId": "567qwer"
    }
  ]
}

apiConsumer.service.js

this.loadSubFeedsFromConfig = function () {

    var promise,
        feedPromises = [];

    if (!angular.isArray(config.content)) {
        return $q.resolve([]);
    }

    // loop over the items in the subcontent property
    dataStore.feeds = config.subcontent
        .map(function (row) {
            var model = new FeedModel(row.playlistId);
            promise   = self.populateFeedModel(model)
                .then(function (response) {
                    // set custom options from dashboard in config content
                    angular.merge(row, extractShowcaseOptions(response));

                    return response;
                })
                .catch(function (error) {
                    // show error, but resolve so we can wait for all feeds to be loaded
                    console.error(error);

                    return $q.resolve();
                });

            feedPromises.push(promise);

            return model;
        });

    return (allFeedsPromise = $q.all(feedPromises));
};

The above method is just a slightly adjusted version of the existing loadFeedsFromConfig. I'll leave it up to you to decide how DRY you want your code to be. This just gives you an idea of what to do.

You can reuse the code in the feeds module, as this will just resolve a playlistId from the url, retrieve it from the store (which has been populated in apiConsumer) and inject it into your controller. See this line on how to retrieve it in your controller.