Creepso/NuvioStreaming_backup_24-10-25
1
0
Fork 0
Code Issues 53 Pull requests Projects Releases 32 Packages Wiki Activity Actions

Responsive Video Player Controls with animations #202

Merged
qarqun merged 7 commits from main into main 2025-10-21 08:28:24 +00:00
Conversation 3 Commits 7 Files changed 4 +413 -6
qarqun commented 2025-10-20 11:39:25 +00:00 (Migrated from github.com)
Copy link

Changes

  • Responsive Sizing: All controls scale based on screen width for phone and tablet compatibility
  • Play/Pause Animation: Smooth crossfade transition between play and pause icons with scale effect
  • Seek Animations:
    • Arc sweep animation on seek buttons
    • Number slide-out effect showing +10/-10 seconds
    • Touch feedback with semi-transparent circle flash

Technical Details

  • Button sizes calculated as percentage of screen width
  • All animations use useNativeDriver for optimal performance
  • Separate animation refs for each button to prevent animation conflicts

Visual Preview

Tablet
image

Phone
image

### Changes - **Responsive Sizing**: All controls scale based on screen width for phone and tablet compatibility - **Play/Pause Animation**: Smooth crossfade transition between play and pause icons with scale effect - **Seek Animations**: - Arc sweep animation on seek buttons - Number slide-out effect showing +10/-10 seconds - Touch feedback with semi-transparent circle flash ### Technical Details - Button sizes calculated as percentage of screen width - All animations use `useNativeDriver` for optimal performance - Separate animation refs for each button to prevent animation conflicts ### Visual Preview **Tablet** <img width="1062" height="657" alt="image" src="https://github.com/user-attachments/assets/d509e8b3-f410-42a6-8770-20d434bfd9e3" /> **Phone** <img width="943" height="420" alt="image" src="https://github.com/user-attachments/assets/ebe8f921-9cfe-4d39-824e-996000cc3de2" />
gitguardian[bot] commented 2025-10-20 11:40:03 +00:00 (Migrated from github.com)
Copy link

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secret in your pull request
GitGuardian id GitGuardian status Secret Commit Filename
20515118 Triggered Generic High Entropy Secret f895428e3d src/components/metadata/TrailersSection.tsx View secret
🛠 Guidelines to remediate hardcoded secrets
  1. Understand the implications of revoking this secret by investigating where it is used in your code.
  2. Replace and store your secret safely. Learn here the best practices.
  3. Revoke and rotate this secret.
  4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

#### ⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request. Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components. Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard. Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard. <details> <summary>🔎 Detected hardcoded secret in your pull request</summary> <br> | GitGuardian id | GitGuardian status | Secret | Commit | Filename | | | -------------- | ------------------ | ------------------------------ | ---------------- | --------------- | -------------------- | | [20515118](https://dashboard.gitguardian.com/workspace/641164/incidents/20515118?occurrence=222092946) | Triggered | Generic High Entropy Secret | f895428e3d083e061523ae912c61a3b2f3d8f05f | src/components/metadata/TrailersSection.tsx | [View secret](https://github.com/tapframe/NuvioStreaming/commit/f895428e3d083e061523ae912c61a3b2f3d8f05f#diff-cc7dee7a2fecfa9d0f4e729610094b620144eff62cf1c8147358edfb7aad6b6dR142) | </details> <details> <summary>🛠 Guidelines to remediate hardcoded secrets</summary> <br> 1. Understand the implications of revoking this secret by investigating where it is used in your code. 2. Replace and store your secret safely. [Learn here](https://blog.gitguardian.com/secrets-api-management?utm_source=product&amp;utm_medium=GitHub_checks&amp;utm_campaign=check_run_comment) the best practices. 3. Revoke and [rotate this secret](https://docs.gitguardian.com/secrets-detection/secrets-detection-engine/detectors/generics/generic_high_entropy_secret#revoke-the-secret?utm_source=product&amp;utm_medium=GitHub_checks&amp;utm_campaign=check_run_comment). 4. If possible, [rewrite git history](https://blog.gitguardian.com/rewriting-git-history-cheatsheet?utm_source=product&amp;utm_medium=GitHub_checks&amp;utm_campaign=check_run_comment). Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data. To avoid such incidents in the future consider - following these [best practices](https://blog.gitguardian.com/secrets-api-management/?utm_source=product&amp;utm_medium=GitHub_checks&amp;utm_campaign=check_run_comment) for managing and storing secrets including API keys and other credentials - install [secret detection on pre-commit](https://docs.gitguardian.com/ggshield-docs/integrations/git-hooks/pre-commit?utm_source=product&amp;utm_medium=GitHub_checks&amp;utm_campaign=check_run_comment) to catch secret before it leaves your machine and ease remediation. </details> --- <sup>🦉 [GitGuardian](https://dashboard.gitguardian.com/auth/login/?utm_medium=checkruns&amp;utm_source=github&amp;utm_campaign=cr1) detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.<br/></sup>
tapframe commented 2025-10-20 21:28:05 +00:00 (Migrated from github.com)
Copy link

Changes

  • Responsive Sizing: All controls scale based on screen width for phone and tablet compatibility

  • Play/Pause Animation: Smooth crossfade transition between play and pause icons with scale effect

  • Seek Animations:

    • Arc sweep animation on seek buttons

    • Number slide-out effect showing +10/-10 seconds

    • Touch feedback with semi-transparent circle flash

Technical Details

  • Button sizes calculated as percentage of screen width

  • All animations use useNativeDriver for optimal performance

  • Separate animation refs for each button to prevent animation conflicts

Visual Preview

Tablet

image

Phone

image

Thanks for the PR, it looks fine for bigger screens but don't you think controls look a bit bigger on Mobile screens based on the screenshot. The Play and skip buttons.

Thanks.

> ### Changes > > - **Responsive Sizing**: All controls scale based on screen width for phone and tablet compatibility > > - **Play/Pause Animation**: Smooth crossfade transition between play and pause icons with scale effect > > - **Seek Animations**: > > - Arc sweep animation on seek buttons > > - Number slide-out effect showing +10/-10 seconds > > - Touch feedback with semi-transparent circle flash > > > > ### Technical Details > > - Button sizes calculated as percentage of screen width > > - All animations use `useNativeDriver` for optimal performance > > - Separate animation refs for each button to prevent animation conflicts > > > > ### Visual Preview > > > > **Tablet** > > <img width="1062" height="657" alt="image" src="https://github.com/user-attachments/assets/d509e8b3-f410-42a6-8770-20d434bfd9e3" /> > > > > **Phone** > > <img width="943" height="420" alt="image" src="https://github.com/user-attachments/assets/ebe8f921-9cfe-4d39-824e-996000cc3de2" /> > > Thanks for the PR, it looks fine for bigger screens but don't you think controls look a bit bigger on Mobile screens based on the screenshot. The Play and skip buttons. Thanks.
qarqun commented 2025-10-21 03:34:11 +00:00 (Migrated from github.com)
Copy link

Visual Preview

Tablet
image
Phone
image

Thanks for the PR, it looks fine for bigger screens but don't you think controls look a bit bigger on Mobile screens based on the screenshot. The Play and skip buttons.

Thanks.

Hi @tapframe , i think it looks fine on mobile. The design takes inspiration from Stremio/Cloudstream. #152

Feel free to tweak it a bit for a better mobile fit, I’m good with whatever works.. TQ

> > ### Visual Preview > > **Tablet** > > <img alt="image" width="1062" height="657" src="https://private-user-images.githubusercontent.com/12039099/503185499-d509e8b3-f410-42a6-8770-20d434bfd9e3.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjEwMTUxMTcsIm5iZiI6MTc2MTAxNDgxNywicGF0aCI6Ii8xMjAzOTA5OS81MDMxODU0OTktZDUwOWU4YjMtZjQxMC00MmE2LTg3NzAtMjBkNDM0YmZkOWUzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTEwMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUxMDIxVDAyNDY1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTgyNmU2ZDU0YTkxNTFiNDA5OWM0Mjc4OWY0Y2RhZWU1ZDA2YjQxOTVhZmVlZDU2MzJlOGY4MzRhZTRhN2NlNDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.EwacG3pTZn7a78GP35nJT1dpfAnNkSo9rJqRAoQxy5w"> > > **Phone** > > <img alt="image" width="943" height="420" src="https://private-user-images.githubusercontent.com/12039099/503187816-ebe8f921-9cfe-4d39-824e-996000cc3de2.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjEwMTUxMTcsIm5iZiI6MTc2MTAxNDgxNywicGF0aCI6Ii8xMjAzOTA5OS81MDMxODc4MTYtZWJlOGY5MjEtOWNmZS00ZDM5LTgyNGUtOTk2MDAwY2MzZGUyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTEwMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUxMDIxVDAyNDY1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNlMzVlOWEzYmQ2MzY1NWIyODdlOGY5OGQyNDc2Mzk3ODIwM2UzYWU3Zjc3MzAzMGMxYWIzYzgwY2JlMzQ3NzMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.CX8qehpdPQ_1kVtN0xK9KlD_X6Er8SSLttdey_iNSQo"> > > Thanks for the PR, it looks fine for bigger screens but don't you think controls look a bit bigger on Mobile screens based on the screenshot. The Play and skip buttons. > > Thanks. Hi @tapframe , i think it looks fine on mobile. The design takes inspiration from Stremio/Cloudstream. [#152](https://github.com/tapframe/NuvioStreaming/issues/152#issuecomment-3380310873) Feel free to tweak it a bit for a better mobile fit, I’m good with whatever works.. TQ
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
bug

Something isn't working

  
documentation

Improvements or additions to documentation

  
duplicate

This issue or pull request already exists

  
enhancement

New feature or request

  
good first issue

Good for newcomers

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
question

Further information is requested

  
wontfix

This will not be worked on

No labels
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: Creepso/NuvioStreaming_backup_24-10-25#202
No description provided.
Delete branch "main"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?