Bug Description

The functionality for deleting individual downloaded videos from the offline storage happens immediately, without any way for the user to avoid unintended clicks or asking for a confirmation of any sorts.

When the user hovers over the check mark, it changes to a x. If user accidentally clicks the x, the video is deleted from cache. If the user decides it was done in error, and clicks the download once again, the video download restarts ... it is not resurrecting a stored copy of the video from cache .. but a brand new download is initiated.

Expected Behaviour

As described in the Figma design, the video should be kept in cache for a few seconds with a "download" button visible, which user could click to recover from an accidental deletion. It would make more sense if the video was deleted after a delay or a confirmation.

Design specification for this behavior - https://share.getcloudapp.com/v1uN7Am9

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. Download for offline viewing any of the videos
3. Hover over the check mark on a downloaded video and it turns into a x mark..
4. If you click the check mark/x mark, the video is immediately deleted.
5. There is no way for the user to recover from accidentally clicking the check mark/x mark.

Screenshots

Screencast of immediate deletion: https://share.getcloudapp.com/E0u9plLy

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to select subtitles track.

Note: We could also expand this ticket for Shaka player and others though, or create a new one for them.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This is conditional on understanding what the browser does, need dev research into this

Notes

Does browser expose this?

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a developer, I want to be able to correctly identify the source that is suitable for offline playback from the list of all <video> sources.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

In the markup you have

Dev note: List of available sources and browser picks a source based on its capabilities.
In the code we need to find out from browser its capabilities and find way to get appropriate source from the video tag.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to play video back from offline storage.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

1. For playing itself the experience should be the same as for the online mode.

Notes

In the application its quite involved in implementation, but as a process for user its straightforward.

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

Scenario: User downloads a video for offline viewing, then physically shuts off WiFi & Data connection or goes into Airplane mode. Now, without internet, when the user tries to play the downloaded video, the player starts from the beginning. However, if the user fast forwards by clicking on the timeline, the video starts from the new point, but within a few seconds it stops playing and stalls.

Expected Behaviour

The video player should be able to function with the same controls in offline mode as it does when online. So the user should be able to fast forward and continue viewing the video.

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. Download one of the videos for offline viewing.
3. Now break the internet connection to the device by switching off WiFi or going into Airplane mode without data connection
4. Play the downloaded video
5. You will notice that the progress bar increments normally, with some amount of prefetching like behavior seen
6. Next fast forward by clicking the progress bar ahead of the current time and beyond the bufferend amount
7. The video jumps to the new time point, plays for some time and then stops when the progress bar reaches end of prefetched data.

Screenshots

1. Downloaded file for offline viewing followed by breaking internet connectivity to the machine
   

2. Start playing the downloaded video while internet is cut -- NOTICE that the video button shows || indicating play
   

3. Click forward, and wait for a bit. The video stops playing - NOTICE that the play button is > indicating pause/stall
   

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

Scenario: A user clicks download on a bunch of videos. In between, she pauses some of the video downloads, and then goes back and restarts. Trying this a few times, it looks like there is something that causes the video to show downloading, but there is no activity on the network tab and the service worker Storage > IndexedDB > VideoID shows done:false for a long time.

Expected Behaviour

Loading up the service worker to do multiple downloads should not result in a frozen state where one of the downloads does not complete.

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. Click on download for a bunch of videos
3. Go to Manage Downloads and pause and restart a lengthy video
4. See discrepancies listed.

Screenshots

Screencast showing long download stuck after pause+restart: https://share.getcloudapp.com/v1uN7mnE

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

1. The Privacy Policy and Terms of Service links are missing
2. When clicking "See the source code" there is a console error preventing opening of the link in another browser window
3. For narrow view ports, the wrapping of long footer text is inconsistent

Expected Behaviour

1. https://policies.google.com/privacy should be linked in the footer
2. The following console error should NOT when the "See the source code" is clicked, and github repo should open in a window
   
3. When the viewport is narrower than 405px wide, the "Google Privacy Policy and Terms of Service" string should wrap on to the next line with adequate line spacing unlike as shown here
   

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. Scroll down to the Footer section
3. If needed, go to Google Chrome Dev tools and switch to a mobile/responsive view where you can change the width to below 405 px.
4. See discrepancies listed.

Screenshots

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to play a streamed video.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Dev Notes

Unsure of priority, worth discussing with team. Need more implementation to do this.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a website owner, I want to be able to play ads in offline mode

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

(and related ticket for capturing analytics offline for ads)

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to select a default quality for video playback.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This helps users to indicate which quality they prefer on the device they're on.

This is a global setting to play all videos as a specific quality

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to see which videos are downloaded for offline playback.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

1. See a list of offline ready videos.
2. In the gallery view of videos, be able to identify which videos are available for offline playback.

Design: Biograph handles this with gray out of videos. We're not sure if we want download only or not. Need design support on the look of this. May have separate view for offline, toggle on existing. Inspiration: Netflix. And then have icon indicating downloaded.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• As a developer I need a place to store the video assets to be used with a video player.

Implementation brief

• Setup a Google Cloud Storage bucket with the proper permissions
• Ensure there is a CORS policy in place that supports our development
• Setup Cloud CDN once we have a domain to remove the wildcard domain from the CORS policy

Current policy:

[
  {
    "origin": [
      "*"
    ],
    "responseHeader": [
      "Accept-Ranges",
      "Content-Type",
      "Content-Length",
      "Date",
      "Server",
      "Transfer-Encoding",
      "X-GUploader-UploadID",
      "X-Google-Trace",
      "Origin",
      "Range"
    ],
    "method": [
      "GET"
    ],
    "maxAgeSeconds": 3600
  }
]

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to select an audio track for the currently playing video when there are multiple audio tracks.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This is conditional on understanding what the browser does, need dev research into this

Notes

Does browser expose this?

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to play DRM protected offline videos.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This is similar to the Netflix question, coming up with a concept of expiration; videos storable but only good for an artibtrary limit, then ability to renew if DRM approves.

May be two DRM modes, owned vs rent.

Dev note: There is a single API to signal intent to play protected video in browser, and you get data back that unlocks the video for you, and you don't need to know anything about what happens outside of that API

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to play DRM protected videos.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

One of the main topics is the EME API

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to see correct poster images, subtitles and other data when serving a video from offline storage.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Notes

Dev note: We should design what other data might be. May have audio tracks, need to consider that.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to have control over the available bitrates of the video.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

We don't know what the videos are that we'll be using in the application, once that's decided we need to identify what the user control could be.

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

Since we are using sample videos on the KINO staging environment that might make it to Google/UAT, i wanted to flag the fact that some of the videos have very large preview images that appear weird on mobile

Expected Behaviour

The preview image for videos should be responsive and appear whole within viewports of different dimensions

Steps to reproduce

1. Go to KINO Staging Site in Google Chrome
2. If you are on desktop, change to Mobile View within Chrome DevTools or use a Mobile device
3. Click on article titled "Javascript For Loops Are Complicated"
4. The preview image is very large and appears distorted

Screenshots

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to download a static video to offline storage via fetch

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Design: Contingent a little bit on the design. However a user should be able to view any video on the site, select download, and know that their action is happening.

Relates to #24, #25, #26, #35

Notes

• Discuss which types of videos (single file, stream) are supported for offline.
• Differentiate between using Fetch API and Background Fetch API. #25

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a developer, I need to be able to implement and install a SW that would allow me to present the application experience even if the device is offline.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

We need to figure out how to implement the app shell, how to cache it, how to serve it, and how it ties to the rest of the offline experience.

Some apps display a message: Installed for offline use, that would be a nice to have.

We could expose UI for adding application to desktop/mobile.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a product owner, I want to figure out if and how the setting between using Fetch API and Background Fetch API should or shouldn't be presented to the user.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

The user experience is not the same in the sense that: if you download video using fetch-api, your download video is interrupted. With background fetch this is handled; download starts, indicates something is downloaded. If you kill tab it continues, if you kill browser it resumes.

If we give users ability to choose which way they want to use to download videos. One constraint is background fetch API only available to certain browsers (Chrome), could be Chrome only feature. Very useful, and I as a user would like it. If Chrome user shouldn't force to use that method.

So we need to consider: Some users have choice, should we expose that.

On many browsers there is no choice, only fetch, need to tell the user that so they aren't surprised.
On chrome, there are two choices, need a way for user to understand and decide.

Relates to #24, #25, #26, #35

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a developer, I would like to collaborate with a designer to uncover uses for autoplay functionality and what the browser support and implementation is in different browsers.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

We need to understand how browsers do this, lots of use cases for this. If R&D ticket, then this can be a P1 research, not implementation

Notes

Focus on the exploration aspect.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to select a playback quality for the currently playing video.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

You need to hook a UI element to your browser to indicate that you want to switch from medium to high quality

Notes

https://developer.mozilla.org/en-US/docs/Web/API/VideoPlaybackQuality

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

The application has a hero video section on the home page that is prominently displayed and can be played. Below it there are category sections and the same video in the hero section is repeated below in its own category.

However, it looks like the hero video and the corresponding category video are not connected because user can download the one in the category section for offline viewing, make the service worker go offline, but still the hero video does not play.

This can be confusing to the user, since we claim that all videos are downloadable for offline viewing. Clearly the hero video is NOT in this category.

Expected Behaviour

If we claim that all videos we host are available for offline viewing, then the Hero section video should also be downloadable and should be able to be played after going offline - right from the home page !

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. Click on Hero video and make sure it is playing.
3. Locate the corresponding video in the category section below and download it for offline viewing.
4. Take the service worker offline by using the option within Dev Tools > Application > Service Worker > Offline
5. Now play the hero video and notice that after some time it stops playing since it is different from the downloaded video
6. To double check, go to the same video as the hero video but within the category section and hit play
7. The equivalent hero video from the downloaded category section is able to play while service worker is offline.

Screenshots

Screencast of reproducing the problem: https://share.getcloudapp.com/12uoYL7m

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a developer, I need to be able to parse HLS / DASH manifests and extract video metadata.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

The manifests are files that describe the individual pieces of the videos and any meta data. We need to consume manifests and make sense of them in playing back or downloading video.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I expect adaptive streaming functionality that takes into account my current bandwidth and / or device resolution etc.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

When the "Delete All Button" within the Manage Downloads page is clicked repeatedly (more than once at least), there is a status message "No videos. To download a video press the button." that is repeated over and over again.

Screenshot

Expected Behaviour

"Delete All Button" should delete all videos if they are present. If no videos are present, it should ideally be greyed out or inoperative, but at a minimum, should not repeatedly printout the same message and fill up the view.

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. Click on Manage Downloads menu item
3. Click on the "Delete All" button multiple times.
4. See discrepancies listed.

Screenshots

Attached above.

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

There are three visual elements that are related directly to the ONLINE/OFFLINE status of the Service Worker.

1. The status message at the bottom of the page, to the extreme right side
2. The Offline/Online button on the header menu
3. The "Show offline content only" setting in the Settings page

It is not clear what drives what and how the three are related. Here are the permutations and combinations of what happens to two of the elements when the third is manipulated

• When the Chrome Dev Tools > Application > Service Workers > Offline check box is checked,
  -- the status message at the bottom changes to a red-offline
  -- the header button automatically changes to offline mode
  -- the settings page "Show offline content only" changes to true only WHEN refreshed CONFUSING

• When the Chrome Dev Tools > Application > Service Workers > Offline check box is UNchecked
  -- the status message at the bottom changes to green-online
  -- the header button automatically changes to online mode
  -- the settings page "Show offline content only" changes to false only WHEN refreshed CONFUSING

• When the MENU button is manually changed to OFFLINE (even if the real service worker status is online)
  -- the status message at the bottom remains green-online
  -- the settings page "Show offline content only" changes to true only WHEN refreshed CONFUSING

• When the MENU button is manually changed to ONLINE from OFFLINE
  -- the status message at the bottom remains green-online
  -- the settings page "Show offline content only" changes to false only WHEN refreshed CONFUSING

• When settings page "Show offline content only" is manually changed to true
  -- the status message at the bottom remains green-online
  -- the header button remains in online/offline mode that it was CONFUSING

• When settings page "Show offline content only" is manually changed to false
  -- the status message at the bottom remains green-online
  -- the header button remains in online/offline mode that it was CONFUSING

Expected Behaviour

For the average user, the behavior of the settings page "Show offline content only" can appear inconsistent, since there is another button in th menu that reflects the change in online/offline status. Also, it is not clear why there should be another status message at the bottom of the page.

In the Figma Designs, the menu button was clearly labelled "Offline Mode" and "Online Mode". Perhaps there needs to be clarity around which of these buttons is a selector and which is a status indicator.

Suggestions:

1. Either the menu button should be a setting that can simulate the online/offline behavior of the service worker
2. Or the Settings > "Show offline content only" button should automatically flip along with the menu button without requiring a refresh of the page.

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. follow the instructions listed above.
3. If needed, change to Mobile View within Chrome DevTools.
4. See discrepancies listed.

Screenshots

Screencast of the lack of synchronicity between menu button and Settings : https://share.getcloudapp.com/kpu72QGN

Screenshot showing Figma design and how it indicates a difference in shading between Offline and Online depending on which side the button is flipped: https://share.getcloudapp.com/jkueGqx6

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to download a static video to offline storage via background fetch API

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Design note and AC: Presentation of file being downloaded is different between background fetch and fetch API. On background fetch there is a banner on system that says being downloaded, will happen regardless of leaving browser. Fetch API handled by application, need indicator built into application to expose progress to user.

They also should be aware of where their downloads are going.

Relates to #24, #25, #26, #35

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a developer I must implement the designs for the frontend of the application.

Figma: https://www.figma.com/file/dQ0GxUTVNKgvMyEkEVPzd1/Google---Web-Dev-Media?node-id=17%3A0

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

HEADER

• Video - Plays in place
• Download button on video - Pressing once downloads it, then it changes to "downloaded icon", and pressing that icon takes to manage downloads page.

SECTION TITLES

• Three videos shown initially. Latest videos appear.
• If a user wants to see more videos they click View All, and (pending design approval) then the section expands to show more videos. The view all button would then turn into a collapse button. May want to change the buttons to say: View More and Hide More
• The View All button will take users to a new category page.

FOOTER

• Google Privacy Policy and TOS takes you to a single external link
• See the source code takes you to Github

Mobile menu

• Should open a mobile menu screen with links to the pages: Home, Manage Downloads, Settings. Design needed.

MANAGE DOWNLOADS

• There will be a button to clear cache, with a confirmation that asks users to verify if they want to clear cache.
• • There will be indicator to show how much local storage is being taken up
• Shows list of all downloaded. There should be a remove icon next to each video.

SINGLE VIDEOS

• Have the View All slide open and show all the additional videos. Then it changes to close after. May want to change buttons to say View More and Hide More.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to cast a currently playing video to another device.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Great feature that's highly requested, unsure of priority

Implementation brief

• Relevant tutorial: https://codelabs.developers.google.com/codelabs/cast-videos-chrome/#0

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to clear all videos from the offline storage.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This is a UI consideration for removing all items at once from offline storage.

2. After X period of days remove the offline storage. Storage is not persistent by default. It may not be available in a week, browser can always clear data.
3. Quotas browser assigns, you can ask for persistent storage and browser grants requests or rejects it silently.

Design:
Need design consideration for this.
May want some kind of UX writing to tell user how long will stay downloaded

Users may want to remove all things at once to save up space.

Notes

Dev note: Storage we're using has high quotas. Technically speaking you can store many videos in there.
Dev note: May want to set expiration to expire and remove.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to toggle an "Offline mode" view.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Design: Need direction on how this works, to identify whether its a P1 or P2

This is related to #21, in that we need design to indicate how/where offline videos are displayed.

Focus here is on the toggle which implies something like a settings section, or a UI element to indicate they want offline.

Notes

Might need design to indicate which videos are available offline.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a product owner, I would like to explore ways of using the Picture-in-picture experience.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

R&D on this.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to have an option to prefetch popular content.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

1. Need to define what popular content is. Popular content may be based on views, or could be an editorial decision
2. Pre-fetch needs logic around what to pre-fetch. Are we pre-fetching metadata, the whole video, part of video for playback when click button

Implementation brief

QA testing instructions

Demo

Changelog entry

As mentioned here.

Feature description

As a user, I want to be able to play, pause and otherwise control media from other contexts using Media Session API.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

If you play a video on mobile, in system you can see the banner at the top of your screen with controls of video, or access from lock screen.

Low hanging fruit, really nice to do

Maybe related to #52

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a website owner, I want to be able to capture analytics data when videos are played offline.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

View count, and maybe ad playback

Dev note: Sends data to server that you played 5 videos offline

Goal is for website owners to have a good sense of what is being watched offline.

Using existing libraries can we store, fetch, track data, and when come back online send back to server. How many videos seen in series, watch through, click through ads, etc.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to resume an interrupted download.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Notes

Design note: Need some kind of indication that a download was interupted, and a callout for user to resume.

Dev note: We have a POC of this downloading, and the architecture directly allows for resuming downloads. This is a lower hanging fruit that we could identify, but its not essential for the application. This is a nice to have, and a great iteration on this process.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to remove a single video from offline storage.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Contingent on UI, but should be considered how we can remove from the individual page with downloads (if we design it that way) and from the normal browsing pages with some kind of UI indication.

Visually there may be some kind of animation icon load when removing.

If you're in offline only mode it will gray out after deleted (and/or disappear? Similar to Netflix)

Design: Need design to identify how this would work

Notes

Any operation on database that holds that data can fail. We may need to handle an error state in that regard. Also holds true for other items that manipulate database."

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I want to be able to play back a single video file.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This is straightforward using browser video player or custom video player (Shaka, Video JS)

Implementation brief

• Implement a VideoPlayer web component with a render(videoData) method that renders a native <video> element correctly constructed with respect to the videoData information passed to it.

QA testing instructions

Demo

Changelog entry

Feature description

As a developer, I want to be able to use MSE to play back DASH / HLS streams.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Technical notes needed.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to download a streaming video to offline storage.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Distinction between static videos and streaming videos is relatively hard. We don't know how challenging

Relates to #24, #25, #26, #35

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a developer, I want to keep expensive computation out of main thread by using Workers to play back offline video, to download content, to sync posters, ...

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This is incredibly valuable to have to not pollute main JS thread with all this complexity, it should be a matter of a worker doing that job in parallel, but it would still work in the application if it didn't happen initially.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I should be able to see an indicator showing the progress of a video being downloaded.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

This is only for application using fetch API, and would be a visible indication within the application

So we need a UI for this, and the indication is the same for streamed videos and static videos.

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

Ticket created as a result of a previous issue comment. Details to be added.

Explore web app manifest once we are clear on what the app name is, how the icon looks like etc.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Bug Description

Scenario: A user initiated a download of a large video that is taking a lot of time due to high latency or low bandwidth connection. Later on, the user goes to Manage Downloads and finds that the video is still downloading. She then decides to "delete-all" and the partially downloaded video is removed from "Managed Downloads" page.

However, if she goes back to the home page, the video has NOT stopped downloading .... The service worker continue to download the video, even though it has been removed via the "delete-all" action.

Expected Behaviour

If the Manage Download page shows videos that are partially downloaded, then a "delete-all" operation it should invoke a cancel operation on pending videos.

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. Click on the download button for a video that is particularly large
3. Go to the Manage Download page
4. You should see the partially downloaded video with a status indicator
5. Now click delete-all and the video will disappear from the Manage Downloads page
6. However, if you go back to the Home page, the video continues to download.

Screenshots

Screencast showing the steps above: https://share.getcloudapp.com/04uJjrLq

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

As a user, I expect more advanced controls that would allow me to seek within the video.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Skipping 10 seconds, 15, etc.

Implementation brief

QA testing instructions

Demo

Changelog entry