disc-in / ultimateapp Goto Github PK

There is a need to complete the database with the first real drill that will be integrate in the app.

For the fitness drill, we try to add video with a nice realization as on these examples:
https://www.youtube.com/channel/UCjNE2-Yeiwo4mTJ3HdfrSHA/videos
https://www.youtube.com/user/FitnessBlender/videos
https://www.youtube.com/channel/UCCgDGih2kSp0A6W_0cVYuaQ/videos
https://www.youtube.com/watch?v=tpVhJNQURk4
https://www.youtube.com/channel/UC_aLZ9YxRrGmCe1Zd3GSkEA/videos

@guillaumemoby : I will ask to the coaches in my network to share with us some drills that I will implement in the V1.

we'll want to set up a system to recognize the user.

Users will be able to group together in teams and share exercises in private.

Users will be able to see what the next recommended exercise for the team is through the application.

Display it on the animation
Add an input to the editor

Inspiration

🐛 Bug Report

Environment

iOS

Steps to Reproduce

Open the app on an iOS device.
Go to any drill with an animation (eg. 3 people mark)
Look at the animation

Expected Behavior

They should be circles, as on Android

Actual Behavior

When the user taps the filter button on the Drill List, it opens a filters view

Fitler button could look like :

Filters view :

• The back arrow should take us back to the exercise list and not the homepage.
• Add back arrows and validation as in Nike Training Club (see examples here)

From Homepage, when user choose 'Training' he is redirected to a page showing all available trainings.
When he select a training, he is redirected to a page showing all drills from training

Adding a hamburger button to access new information from the homepage

Instead of the check at the upper right corner

Same layout as the 'start training' button

Remove the training bravo page

Now, we (Martin) have succeed to present a video like this:

For a better visualization, we are aiming to a be able to have a full screen view.

We don't want too many levels of descriptions on the drill page
With instructions for each step of an animation, we can't keep step description as well

It should look like this :

@guillaumemoby maybe you can send links to the images so that the developer can use them directly ?

Display trainings on the Training List Page
Trainings should be defined in the fixtures

Some improvement can be done on training page:

• Improve training presentation: make it less ugly
• Improve training presentation: display equipment as well
• Navigation inside training: add a 'Start' button which redirects to the first drill of training
• Navigation inside training: user can go to Next or previous drill of a training

To present different version of a drill the app need to link to show more than one video.
We want to find a way to pass from a video to another one. In the following image, te idea is to use a button or to swipe to pass to the next video (as in the app Nike training):

Here is a representation of the following drill:

{
      id: 3,
      type: 'fitness', // vs technical
      source: 'Fraser Wilson',
      title: 'Legs Workout Off-season',
      image: 'https://assets.afcdn.com/story/20180529/1160936_w980h638c1cx622cy473cxt0cyt0cxb2121cyb1414.jpg',
      description: 'A full body workout that you can do whenever and wherever you like!!',
      nbPlayers: 1,
      equipmentLabel: 'No Equipment', // Basic Equipment , Full Equipment
      equipment: 'None',
      durationInMinutes: 10,
      intensity: 'Low', // Moderate , High
      goals: ['Legs'], // Upper , Full Body , Core , Conditioning
      seasontiming: 'Off-season', // Pre-season , In-season , Anytime
      level: 'Intermediate', // Beginner , Advanced
      video: '',// if there is only one 1 video to show complete with a youtube link
      steps: [
        {
          video: 'https://www.youtube.com/embed/gNS2ZRQQ9sY'
          title: 'Reverse Lunge From a Riser',
          subtitle: '20 lunges',
        },
        {
          video: 'https://www.youtube.com/embed/vr8OToLRGyQ'
          title: 'Barbell Romanian Deadlift',
          subtitle: '15 deadlifts',
        },
        {
          video: 'https://www.youtube.com/embed/uzjfcTvgpoc'
          title: 'Front DB Box Squat',
          subtitle: '20 squats',
        },
        {
          video: 'https://www.youtube.com/embed/mnzEGjv0IQQ'
          title: 'Glute Bridge',
          subtitle: '20 glute bridges',
        },
        {
          video: 'https://www.youtube.com/embed/_iYwv4QVFjM'
          title: 'Standing Calf Raise',
          subtitle: '25 calf raises',
        },
        {
          video: 'https://www.youtube.com/embed/55e1a7McsXo '
          title: 'Standing Hip Flexion',
          subtitle: '30 hip flexions',
        },
      ],
    },

@sallesma and @Adeloche : do you think that it's a good way to save our drill?

We must think about

• where is the button?
• how does the feedback form look like? Is it an email? A direct form? A third-party tool?
• where does the feedback arrive and how do we process it?

As i wondered what the difference is between training and practice (we use "training" but a canadian coach in paris uses "practice")

I think we should have a review from a native speaker just to make sure we are not introducing confusion

When we add a player or cone, it appears somewhere else, pretty annoying

Users don't understand it
Use a star, or heart, or whatever icon better understood

Add a reset button

Inspiration

For now, we are using images found on the internet.

Before going live, we need to use images we have the right to use.

(An idea could be to use Focus photos, since they would probably accept)

Animation should be as wide as possible on the screen, both on the drill page and editor

Inspiration

• Translate all the content from fixtures
• Translate all the wording of the app
• Detect user language by defautl
• Possibility to switch language ?

This issue is not to be assigned and treated. It gathers the specifications of the app.

• The user enters the app through the home page (screen 1)
• When the user selects 'Fitness' or 'Frisbee' on homepage (screen 1), he is redirected to the 'Fitness/frisbee' drills (screen 2) page (only drills from relevant type are displayed)
  • From a drills list page (screen2), he can select a specific drill and be redirected to the relevant drill presentation page (screen 3)
    • From dril presentation page, the user can access a video/animation page specific to the drill (screen 6)
  • He can also use filters to see specific drills on the drill list page (screen 4)
• When the user selects 'Training', he is redirected to the list of drills contained in this specific training (not specified yet, see screen 5)

We want to be able to play/pause, see progress, go full screen and choose volume

But previous and next buttons make no sense if they are'nt mapped to previous/next step

We could use expo-video-player (referenced in expo documentation)

I am looking for idea to link a series of exercises or trainings. This "series" will be made by experience coachs which will have to create coherent and thoughtful sequences adapted to a defined level.

Here is the list of my idea :

• At the end of the Training description or drills we could have a link to the next practice. I like this idea because being able to link drills together it's something difficult as a beginner coach
• We could add a fourth buttom on the homepage to add "Your next frisbee or fitness drill"

Add pre-commit hook with npm run prettier-fix.

I think we should also enforce eslint rulses, but there are a bunch of warnings atm that I didn't get to fix

Drill page should look like this :

Should include all the info about the drill : equipment needed, number of players, space...

In order to have a nice documentation and automated snapshot testing, Bernie suggested we use Storybook there #47 (comment)

What do you guys think about instead of writing all these snapshot tests manually we could start using storybook (https://storybook.js.org/) in combination with storyshots (https://storybook.js.org/docs/testing/structural-testing/#using-storyshots)?

That way we both get the benefit from storyshot (develop components in isolation or grouped, better testability because of the encouraged capsulation, better documentation) as well as automated snapshot testing with only a one-time setup being necessary

Add splash screen at the same time

Replace gradient
Tweak other buttons

In the HomePage, we should have a access to a page with a tab where you can find all you favorite drills and training

When the user taps the filter button on the fitness Drill List, it opens a filters view

Fitler button could look like :

Filters view :

Now that we have a few pages working, we should have some automated testing to make sure we don't break anything.

What are the best practices there? should we be using jest?

We need icons instead of < and >

• Add opacity on the photos
• technical drills : display number of players on the pictures (see exemple here) and display objectives instead of duration and number of players below drill name
• fitness drills : display drill duration on photo and display objectives instead of duration and number of players below drill name

We have security alerts on Mem and Minimist

Minimist alert (high severity) come from a dependency of a dependency of a dependency of Jest.

So we should update jest

We could also set up an automatic update of npm dependencies. Otherwise we'll end up outdated after a while

On a drill page, load animation/video associated to the selected step.

Update

On drill page we should have:

• Title
• Animation (video or 'ultiplay like' animation if provided, else display drill image), always the same
• Description
• (Optional) list of steps: just display them for version 0 if available, could be synchronized with animation in a later version

So for now a drill should have:

drill:
id (integer),
type (['fitness','technical']),
title: (text),
img: (image link)
description: (text),
nbPlayers: (integer),
duration: (integer minutes)
goals: [(keywords)],
level: ['beginner'/'intermediate'/'advanced'],
[optional] animation: (animation name),
[optional] video: (link to video),
[optional] steps: [
{
key: (integer),
title: (text),
subtitle: '(text),
},
],

• Link from the home page
• Link from a drill

In order to enforce consistent quality and help with review we should have an automated pipeline running tests, etc. for us.

• Run tests, lint and prettier on all commits
• Add code climate?
• Publish master to Expo

• photo should appear with full screen size
• video button should be replaced by a down-arrow button
• when pressing the button, scroll down to bottom
• Make the video or animation appear at the bottom of the page

🐛 Bug Report

Environment

iOS

Steps to Reproduce

Open the app on iOS
Go to any training
Start the training

Expected Behavior

The back button and the drill titile do not overlap

Actual Behavior

We want the user being able to create their own drill. The animation is a key part of this app ,
we want to obtain something close to:
https://www.ultiplays.com/invite/VeEqZ2DDZ1IM3eBBWM74

When a user clicks on the "ultiplays" or "video" or "youtube" round button on the Drill page, a new view should open with the video or animation and steps.

Inspiration :

We need cut and counter cut to be in the same animation step

Inspiration :

We want to modify the header to have something as on the picture