Mux app: new features (#9826)

* Added modal before the upload of the asset. Added option to select video quality

* Added styling for the upload container.
Code refactoring.
Fixed tests.

* Added help description for the video quality option.

* Change default quality to "Plus"
Added description based on selected quality.
Removed duplicated code.

* Added show modal when it's a URL case.

* Added video and audio restriction

* Change styling of the quality options

* Modal refactor into components.
Added Playback policy options.
[WIP] Added captions (working but remains validations and UI bugs).

* Fixed captions components align

* Added validations for captions types.
Renamed Captions component props.
Refactor of Beta language validations

* Added modal subcomponent for reset state

* Added MP4 renditions option

* Added MP4 renditions panel with download, create and delete actions.
Refactored endpoints logic into new file.

* Fixed render error while creating/removing captions

* Removed unnecessary timers

* Added optional flag for no resync player in rendition cases

* Added skipped status case with tooltip reason

* Added upload metadata information in Upload Asset modal.
Updated mux player library to latest
Mux API refactor for upload by URL or direct upload.
Refactor of modal state

* Added state for unique polling.
Added asset sync at first render.

* Commited Github suggestions

* Implemented edit metadata through "Edit" button under the asset player

* Renamed Modal.
Removed unused passthroughId in Asset Metadata

* Implemented add and remove audio tracks.
Caption tab refactor into component and reuse it for audio

* Fixed note spaces.
Fixed set captions when uploading an Asset

* Removed unused component.
TrackList refactor and added data-test.
Fixed some tests

* Added missing download link.
Fixed tests

* Removed "Edit" button.
Moved Metadata as a new Tab.
Added styling and scrollable Tab.

* Removed metadata Switch in Asset creation

* Added optional title sync while creating a new Asset

* Added sync title from Content model to override Mux Asset title in the metadata tab.

* Added txt transcript for captions.
Added download option when it's a Signed asset.

* Added default state for audio list.
Removed redundant track in the audio title

* Updated plugin version
Added auto generated captions option while updating an existing Asset.
Added transcript option if the caption is autogenerated.

* Added onPublish function to sync playbackId swap
Added sync of publish event in frontend
Removed logic for swap playbackId in front and moved to function.

* onPublish function refactor

* Added remaining actions

* Added undo option for pendingActions

* fixed typos

* Added remove asset first in Function

* Fixed wrong updated fields from Mux

* Added remove entry from Contentful when the asset was removed

* Changed Checkbox to Radios

* Fixed update fields

* Added asset deletion to pendingActions

* Added mock to fix tests

* Created interface for addByURL config parameters.
Removed commented code.
Renamed in_progress status to inProgress.
Interfaces refactor for reuse

* Applied prettier format

* Added changes

* Fixed linter

* Sidebar refactor

* Implemented iframe tab for Player Code

* Renamed PlayerSnippet to PlayerCode.
Remove unused Tab content

* Updated metadata.
Fix function VersionMismatch

* Added retry mechanism for pendingActions.

* Fixed missing update in pending actions.

---------

Co-authored-by: Manuel Calleriza <mcalleriza@mux.com>
Co-authored-by: david-shibley-contentful <149433784+david-shibley-contentful@users.noreply.github.com>

Author: 3 people

apps/mux/README.md

@@ -2,11 +2,10 @@
 
 Contentful Marketplace App that allows customers to link to and work with Mux-hosted video assets.
 
-
 ## Front End
 
 See the [front end README](./frontend/README.md) for more information about using and working with the front end.
 
 ## App Actions
 
-This app relies on app actions to correctly sign JWT tokens in a secure context.
+This app relies on app actions to correctly sign JWT tokens in a secure context.

apps/mux/frontend/README.md

@@ -11,21 +11,21 @@
 
 ## Contentful app setup
 
-* Use the Mux (dev) contentful app and make sure it is pointed to http://localhost:3000 for development
-* Create a development app in Contentful. Try to only select the resources needed.
-* You will have to go into your browser settings and disable mixed content warnings for this to work
-* Contentful uses Conventional Commits.
-* Squash commit history.
-* Use Node 14.
-* Use Prettier for formatting.
+- Use the Mux (dev) contentful app and make sure it is pointed to http://localhost:3000 for development
+- Create a development app in Contentful. Try to only select the resources needed.
+- You will have to go into your browser settings and disable mixed content warnings for this to work
+- Contentful uses Conventional Commits.
+- Squash commit history.
+- Use Node 14.
+- Use Prettier for formatting.
 
 ## Existing Videos and Captions
 
-Captions and subtitles (using the terms interchangeably here) are bundled and delivered with the video during playback, and is ultimately the source of truth. For other UI uses, the captions are included in the data object so the video manifest does not have to be downloaded. For existing videos, workflows may have already added captions on some videos, and will continue to work in players even if they are not reflected in data stored in Contentful.  To update the Contentful data on the video, press the "resync" button to sync to the latest state of the video.
+Captions and subtitles (using the terms interchangeably here) are bundled and delivered with the video during playback, and is ultimately the source of truth. For other UI uses, the captions are included in the data object so the video manifest does not have to be downloaded. For existing videos, workflows may have already added captions on some videos, and will continue to work in players even if they are not reflected in data stored in Contentful. To update the Contentful data on the video, press the "resync" button to sync to the latest state of the video.
 
 ## Deploy
 
-* This gets deployed and hosted by Contentful
+- This gets deployed and hosted by Contentful
 
 ## Object Version
 

apps/mux/frontend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/mux-contentful-frontend",
-  "version": "1.10.14",
+  "version": "2.0.0",
   "private": true,
   "devDependencies": {
     "@testing-library/jest-dom": "5.17.0",
@@ -23,7 +23,7 @@
     "@contentful/dam-app-base": "2.0.46",
     "@contentful/f36-components": "4.67.0",
     "@contentful/react-apps-toolkit": "1.2.16",
-    "@mux/mux-player-react": "2.9.1",
+    "@mux/mux-player-react": "3.4.0",
     "@mux/mux-uploader-react": "1.0.1",
     "@vitejs/plugin-react": "^4.3.2",
     "jsdom": "^25.0.1",