refactor(multimedia): change design and refactor multimedia detail

[alireza013013]

Description

• remove all old code and start multimedia detail page
• get data from useMultimedia composable
• add property to type multimedia
• add widgets-breadcrumb component in page
• create multimedia-preview-card for handle review PowerPoint or video and show data
• add content detail component
• enhance layout for multimedia page
• pdf type in previewcard component
• add download button component and integrate with multimedia detail page
• add random box question
• add related content component with dynamic ID and source
• remove old component use in multimedia page
• remove old share modal and create component in rigth folder and use again
• replace old crashreport modal with new base modal structure
• create folder for component and replace them in folder and change name in page for past paper

Type of Change

• Bug fix
• New feature
• Documentation update
• Other (please describe):

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings/errors
• I have added tests that prove my fix is effective or that my feature works

[vercel]

@alireza013013 is attempting to deploy a commit to the GamaEdtech Team on Vercel.

A member of the Team first needs to authorize it.

[sanaderi]

Review

Overall this is a solid restructuring of the multimedia detail page (consolidated modals, new composable-driven fetch, related exams/multimedia sections). Requesting changes for a few concrete bugs found while reading the diff and confirmed by running the branch locally.

Bugs to fix before merge

1. Stale content when navigating between multimedia detail pages — app/pages/multimedia/[id]/[[slug]].vue
   The useAsyncData key changed from a reactive getter (() => \multimedia-${route.params.id}`) to a static string, and the old { watch: [() => route.params.id] }option was dropped. Since Vue Router reuses this route component when navigating between two multimedia items (e.g. via a "Related Multimedias" card), the fetch won't re-run and the page shows the previous item's data until a hard refresh. Please restore the reactive key +watch`.

2. Download button gets stuck spinning — app/components/multimedia/downloadButton.vue

   • pendingDownload is declared and read in handleCoinPaymentClose but never assigned anywhere, so when a succeeded: true response comes back with upgradeSuggestions (no url), the coin-payment modal opens but the item is never cleared from downloadingItems/downloadProgress — the button spins forever even after closing the modal.
   • xhr.onload only handles status === 200; any non-200 response (4xx/5xx) leaves the download stuck in its loading state with no toast/error, since onerror only covers network-level failures.

3. title-url bound to the wrong value — app/pages/multimedia/[id]/[[slug]].vue

   :title="contentData.title"
   :title-url="contentData.title"
   

   Both props get contentData.title; should be contentData.title_url (already used correctly a few lines later for the canonical link). This flows into downloadButton.vue's trackFileDownload call as file_url, so download analytics end up recording the title text instead of a URL.

Please confirm intentional

• Crash report removed from the multimedia page entirely — still present on paper/tutorial detail pages. Verified by running the page locally; there's no trigger or modal for it here.
• Inline title/description editing removed (the old editMode/updateDetails flow for content owners) with no replacement. Not mentioned in the PR description.

Minor

• Title row has ‹ › chevron icons that read as prev/next navigation but have no click handler or cursor-pointer — confirmed in the browser, they're inert. Either wire them up or drop them to avoid confusing users.
• Typo: messgage → message in downloadButton.vue.
• No tests added (checklist item unchecked) despite the download-flow state machine being exactly where the bugs above live.

[sanaderi]

Review (follow-up)

Nice work on the previous round of fixes — crash report, inline editing, the title-url prop, and the download spinner bugs (via the new shared useDownloadWithProgress composable) all look correctly addressed.

One small thing left to clean up:

Edit modal Discard button shares the Submit loading state

app/components/multimedia/modal/edit.vue — both the "Discard" and "Submit" buttons are bound to :loading="loadingEditItem":

<v-btn ... :loading="loadingEditItem" @click="closeModal">
  Discard
</v-btn>
<v-btn ... :loading="loadingEditItem" :disabled="!isFormValid" @click="save">
  Submit
</v-btn>

Since loadingEditItem only reflects the in-flight save request, clicking "Discard" while a save is submitting will show the Discard button spinning too, which is confusing — it isn't doing anything itself. Recommend removing :loading="loadingEditItem" from the Discard button (and/or disabling it while a save is in progress, if that's the intended UX).

Cosmetic, not blocking, but worth a quick fix.