Currently, the device info view is reachable only from the video view page. The device info should also be available in settings view as a separate panel and on the homepage (add a button to the header?).

For the Android Player implementation entry in the device info, show "Android Native" before we go to a video and can reliably tell if it's ExoPlayer or MediaPlayer

At some point, we should evaluate and assess expo-video, use it to replace expo-av. From discussions with @freeboub on LinkedIn, related to #59.

Some tests that rely on peertube nightly api need to be rewritten in order to be fail-able (follow-up to #62)

Issue expo/expo#26566 is affecting us too, the external links to Sepia and PeerTube instances are not openable in new tab since they are prepended with the experimental baseUrl that we are using to allow deployment to GH Pages. For now, the links to instances are rendered as clickable text but this is not an accessible approach on the web.
When the issue is fixed we need to go back to <Link /> components instead of clickable text.

For Thursday morning, please work with Daniella on completing #11 (designs in #3), with screen sharing and mentoring, help her fix up PR #34 (taking all things from #38 into consideration).

The Continuous Delivery function from #2 is great, but it is not easy to understand from user perspective which build is actually running. I would like to have a commit link (and/or timestamp?) so it's easy to click back to GitHub and see what revision is running on my browser/device.

• Initial grafisk design för startsidan, baserad på mockups
• Tillgänglighet i åtanke (synfel, ljust/mörkt läge)

Height of the video does not match with window, adds scrollbars on web (Safari/Chrome):

Now we have an initial VideoService from #10 implemented and merged in #19 (still only using local test data), and we have a PeertubeVideosApi service on the way in via PR #33. I would like Someone to update the VideoService as follows:

1. The VideoService constructor should be updated to either a) read data from the local testData.json file, or b) read live data from the API of a PeerTube instance using the PeerTubeVideosApi service
2. Update tests in lib/videoService.test.ts to cover two basic scenarios:
   1. Expected behavior when VideoService is initialized to use test data (as it is now, the baseline)
   2. Expected behavior when VideoService is initialized with a PeerTube instance "peertube2.cpy.re" as backend (returns a list of all videos)

Run through GitHub Actions CI/CD pipeline on your fork, ensure that the solution can be verified to work both with local test data and the live API data (manual tests on GitHub Pages deployment), and attend to the Devoplement / Contributing checklist in the project README before submitting a solution for review.

On the Settings view, the current backend defaults (test data, Rebellion Tube and PeerTube Nighly) should be listed under a "Preset backends" page segment, but then we should have another segment labelled "Recent backends" with a list that the user can select from. The recent backend lists should be updated whenever a user adds a Sepia backend from #72 or navigates to an instance by opening a URL like "https://app.owntube.tv/web-client/?backend=videos.globenet.org" per #67.

Please @mykhailodanilenko, can you recover the "lost PR" #25 and complete it? The student Viktor who were working on it is no longer with us.

Please give credits to OGTor by re-using his commits, not just copying the images.

• Olika upplösningar för olika formfaktorer, "porträttläge på mobil", "landskapsläge på TV"
• Uppdatera grafisk design med logo
• Ej för ful
• Ta tillgänglighet i beaktande (accessibility/synfel/mörkt läge)

• Use Figma and make it easily shareable ← https://www.figma.com/file/77wSzKzV4cbKzttKpG4vPw/Untitled?type=design&node-id=0%3A1&mode=design&t=ZcSPPNIUARQPFM7M-1
• Mock-ups på design, hur ser landningssidan ut? Ska se vettigt ut i alla förekommande formfaktorer. 2 varianter för tablet, 2 varianter för desktop, och 4 varianter för mobiler (Android/iPhone, stående/liggande)
• Vilka komponenter behöver sidan? Förmodligen någon yttre container, olika kategorier med videor som horisontalscrollar, och video-previews
  • Boka ett "grooming-möte 3" och diskutera vilka komponenter som behövs och hur man ska implementera landningssidan i React Native + skapa issue för detta
  • Ta olika (extremt) lågpresterande low-end devicer (Android/TV) i beaktande, antal videor att rendera per kategori? Dokumentera i React-issuet eller någon annanstans hur vi ska tänka kring detta.
• Namnge versionen från denna uppgift "landing-page-v1.0.0" och be @tryklick & @mblomdahl & @OGTor reviewa + approva

The peertube instance currently used needs to be stored in the url to allow sending links to videos on different instances. Investigate the feasibility of storing the instance url in the url parameters. Update settings page to reflect the change.

When viewing the app settings— apart from selecting from the existing pre-defined backends —we should offer the user to add any other instance from Sepia. A button with text "Add from Sepia instances' list" which opens a select element with instances.

Hosts lists come from https://instances.joinpeertube.org/api/v1/instances?start=0&count=1000&sort=-createdAt and could be rendered like so:

• wrtube.wrservices.lat – WR Services Media (20)
• tankie.tube – TankieTube (2)
• videos.globenet.org – Vidéos Globenet (42)
• videomensoif.ynh.fr – Mensoif Tube (423)
• ...

The number within the parenthesis is the "totalLocalVideos" count for each site, and sites which have 0 local videos they should not be listed/selectable.

Update 2024-07-03: About improving the capabilities of the Sepia API, created https://framagit.org/framasoft/peertube/instances-peertube/-/issues/50

Related to #10 and mblomdahl#2, it is apparent that we need to make the app configurable for development, testing and deployment. Add a settings screen to modify the things that are configurable:

1. Debug loggning
2. Data source
   1. testData.json
   2. default PeerTube backend server (peertube2.cpy.re)
   3. alternative backend (tube.rebellion.global)

Acceptance criterion:

• A "⚙" cogwheel icon or something to click in order to open the settings view
• A settings view where changes to app configuration can be applied
• A new "AppConfig" service that other services/components may use to consume current app configuration
• Use Session Storage (debug logging) and Local Storage API (for backend) for configuration persistence

Illustration:

Sometimes when the app is opened the icons which are in a separate font are not loaded right away and show up as colored squares, this behavior has to stop. This article https://docs.expo.dev/develop/user-interface/fonts/#use-a-custom-font can provide some solutions

If a user watches a video the playback position has to be stored and rehydrated when the video is opened again. if the homepage is opened and last saved state was "playing video x at y milliseconds" the user must be prompted to continue watching

Tests in peertubeVideosApi.test.ts are unstable - they sometimes fail due to 5000ms timeout when making the http request to peertube nightly. Happens both locally and on CI. Need to investigate what is wrong with the setup.

When running npm install, @OGTor pointed out that we get a warning about vulnerabilities from a SemVer dependency of Expo:

$ npm audit
# npm audit report

semver  7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/expo/node_modules/@expo/image-utils/node_modules/semver
  @expo/image-utils  <=0.0.1-canary-20240109-93608d8 || 0.3.10-alpha.0 - 0.4.2
  Depends on vulnerable versions of semver
  node_modules/expo/node_modules/@expo/image-utils
    @expo/cli  <=0.0.0-canary-20231123-1b19f96-4 || 0.0.1-canary-20231125-d600e44 - 0.18.0
    Depends on vulnerable versions of @expo/image-utils
    Depends on vulnerable versions of @expo/prebuild-config
    node_modules/expo/node_modules/@expo/cli
      expo  50.0.0-alpha.0 - 50.0.17
      Depends on vulnerable versions of @expo/cli
      node_modules/expo
    @expo/prebuild-config  <=7.0.0-beta.0
    Depends on vulnerable versions of @expo/image-utils
    node_modules/expo/node_modules/@expo/prebuild-config

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

This should be adressed by expo/expo#27856 a month ago (March 26th), but it does not seem to have the intended effect.

Can we fix this?

For building the iOS/Android apps, we need a Expo organization and project. Create one and invite the contributors.

I want the skip back/forward buttons to work like they do on Apple Podcasts app:

From troubleshooting asset appearance with @mykhailodanilenko today, @OGTor ... Can you please upload the SVGs and generated PNGs for OwnTube web client to this GitHub issue? Just attachments here. We need to repair broken appearance.

• Vilka upplösningar behövs för iPad, iPhone, favicon, m.fl.?
• Olika upplösningar, 32x32, 64x64, 128x128, ...
• Inte för ful
• Ta tillgänglighet i beaktande (accessibility/synfel/mörkt läge)

1. Create a platform-specific (web) video playback component
2. The component will utilize an hls-supporting lib on the web, video.js or hls.js (investigate which is easier to use)
3. Update baseQueryParams in the video fetching service to include hls videos when fetching videos list

Use the Expo org from #16 and configure the web-client to build (and publish?) an Apple iOS application. Document the procedure as needed.

Per @mykhailodanilenko talks, we should add Expo Code Push online JavaScript bundle updates.

From implementing #14, we have some nice information on the front page like "/.../ current deployed revision is 917e278 (link) built at Monday, Jun 10th 2024 09:58. (Your friendly mykhailodanilenko (link) 🙋‍♀️ was here!)". It was good as a starting point, but now when we're maturing the functionality this information should be hidden to not obscure initial impressions.

New solution for displaying build info: When tapping/clicking the background 10 times within a 5 second time frame, open a snackbar at the top of the page that remains visible for 10 seconds and then disappears. The text in the snackbar should be

"Revision 917e278 (linked as before), built at 2024-06-10T09:58Z by @mykhailodanilenko (linked as before)"

... instead of

"... deployed revision is 917e278 (link) built at Monday, Jun 10th 2024 09:58...".

The tapping/clicking for build info feature, it should work on all views (home, settings, video player). How it will work on TVs that does not have tapping/clicking, this we will ignore for now.

Use the Expo org from #16 and configure the web-client to build (and publish?) an Android application. Document the procedure as needed.

Per @mykhailodanilenko talks, we should add Expo Code Push online JavaScript bundle updates.

Currently the scrubbar is only a representation of playback progress. It needs to become a controller for playback position.

As I watch videos from a PeerTube backend site, I would like my view history to be recorded in persistent storage, in order to implement "resume watching" functionality and reasonable "next video" functionality in the future.

Acceptance criterion:

1. On the settings page (or similar), list what videos I've watched with some details:
   1. last playback timestamp in the video (and total video length)
   2. which PeerTube backend the video is associated with
   3. datetime when I first started watching
   4. datetime when watching the last time
2. A "clear watch history" button next to the watched videos history
3. The history must persist across reloads and opening the video in new tabs
4. If I alternate between watching videos from 2 different browser tabs, history should be updated with the latest status (not corrupted)

Goal: Välj ett verktyg för att lista funktioner vi implementerat (löpande) och hur man testar dem.

Apps to consider/evaluate:

• TestQuality, https://github.com/marketplace/testquality
• Testspace.com, https://github.com/marketplace/testspace-com
• Kiwi TCMS, https://github.com/marketplace/kiwi-tcms
• Qase TestOps, https://github.com/marketplace/qase-testops

• Ta fram en sajt som vi kan använda för initial testning och mock-data, inte blocka progress på webbklient-sidan
• Sätta upp en egen PeerTube-sajt för utveckling och test
• Hur funkar PeerTube? Kolla på YouTube + gå igenom för samsyn

From PR #19 review, we lack some basic editor setup hints. Review the React Editor Setup recommendations and implement so it is easy to use with GitHub Codespaces.

(Originally posted by @mblomdahl in #19 (comment))

Address PR #34 review comments from @Dykyi:

• Have different views in a screens/ structure
• Do not copy inline styling everywhere (share instead)
• Make components more light-weight
• Have shared types in a types/ color
• Declare colors somewhere where they can be shared
• Use "layouts" in the App.tsx
• Add a utils/ for things like sizing functions
• Use hooks for reusing

When clicking on a video from landing page #3, a new view is opened for video playback.

• Figma mockup extended with navigating to a single video
• Video should have a back button
• "Video controls overlay" med ...
  • Play/pause in the center
  • Skip forward/back X seconds
  • When at the end of the video, replace Pause with a "Replay" button
  • Scrubber/scrub bar ← if possible, short research
  • Can we standardize look and feel of video audio contols (or just mute/unmute)
• Use same video source for every video, https://tube.rebellion.global/w/hNa2eoCT2o11268m2yV5CY

The expo-router issue from #78 is fixed so we can now remove the patch for deep-equal package. if at the time of processing the fix is unreleased, find a way to test it out

Investigate the options we have available to detect device capabilities to mitigate the many if's and but's associated with crossplatform development (e.g. is the client device desktop? is it running the native mobile version? etc.)

The issue expo/expo#29716 is related to #73 #67 #75 #77 and should be checked on from time to time because we are using the mentioned functionality

Currently if you go to the homepage and fetch videos you only get the ones that are on the root channel; need to: 1. get all videos on the instance, on all channels; 2. categorize into channels; 3. in each channel, categorize into categories;

Now I have to find the "ball" and drag it, I would like to also be able to tap the timeline to jump directly to where I want to go.

From #3, we need a service that provides categories and video data per the format used in PeerTube.

Add data model representing a subset of a PeerTube video object:

{
  "id": number,
  "name": string,
  "category": object,
  "thumbnailPath": string,
}

A Category object looks like this if set:

{
  "id": 3,
  "label": "Vehicles"
}

Or if not mapped to a specific category, a Category object looks like this:

{
  "id": null,
  "label": "Unknown"
}

The public interface should look something like this:

class VideoService {

  private videos = [];

  // extracted from "category" info in private videos list
  public getVideoCategoryLabels(): Array[CategoryLabel]

  // relies on first getting category labels
  public getVideosForCategory(categoryLabel): Array[Video]
}

The React components will use VideoService.getVideoCategoryLabels() and VideoService.getVideosForCategory() to render their contents.

Acceptance criterion:

• Use test data with 2 categories + 1 "Unknown"
• Spread 10 videos across the different categories, one category with 1 video, one category with 7 videos, one category with 2 videos
• Unit test coverage for the public interface of the VideoService

As mentioned in #90 by @mblomdahl the controls overlay is all using a pointer cursor, instead we want the pointer to only be there for the actual controls.

Might want to use @ts-ignore here since the builtin values for "cursor" style prop in RN are "pointer" and "auto"

Need to set up linking on the frontend for correct routing on web.

Acceptance criteria:

• When navigating to pages like "Settings" or "View Video" the url should reflect the change
• Do not use hash routing
• If possible keep the web deployment on GitHub pages

Add a README that lists the project structure, explanations for various choices made in development, testing information.

When deploying the app via GitHub Actions from 0bbb4b5, the job succeeds and I can access the app:

$ curl -s https://owntube-tv.github.io/web-client/ | grep title
    <title>OwnTube.tv</title>

However, it does not load in the browser, when I open https://owntube-tv.github.io/web-client/ then I get the following error:

I would like the app URLs to be consistent and compatible with a dumb/static web server.

• hostname.com/web-client/ = naked landing page URL, should automatically client-side redirect to a URL with defaults in query params, e.g. hostname.com/web-client/?backend=wrtube.wrservices.lat&view=home
• hostname.com/web-client/?backend=videos.globenet.org&view=home = landing page URL for Vidéos Globenet PeerTube instance
• hostname.com/web-client/?backend=videos.globenet.org&view=video&uuid=2e8c65df-7271-4961-bd0f-7c2c8c621e03 = video playback view for the video
• hostname.com/web-client/?backend=videos.globenet.org&view=video&uuid=2e8c65df-7271-4961-bd0f-7c2c8c621e03&start=1m30s = video playback view, starting 90 seconds into the video, like this: https://videos.globenet.org/w/6KogudktY2zTj98GDmE7ke?start=1m30s
• hostname.com/web-client/?backend=videos.globenet.org&view=settings = opening the "app-global settings" view, with Vidéos Globenet as the current backend

Hello,
Just a simple question, as I see active developpement on this repo !
I am planning to create a new package react-native-peertube-iframe, something similar to react-native-youtube-iframe.
Would you be interested to use it ?
Is expo-av working fine on peertube video ?
We can discuss outside of github if you want !
Thank you

From #3, we need to implement some initial React components to render the landing page mock-up:

• MainPageComponent (vertically scrolling container for the category preview container)
• VideoCategoryPreviewComponent (horizontally scrolling container for video thumbnail components)
• VideoThumbnailComponent (a block element for the video thumbnail and information)

The components rely on the VideoService in #10 for data.

Acceptance criterion:

• Read up on and implement component styling per React best practices and add the necessary structures/configs for building CSS
• Comment on how to satisfy project goal 4: "Built-in theming /.../ support [for users]"