Describe the bug
When loading the media index, if the current directory contains many folders, the load times are quite long.

To Reproduce
Steps to reproduce the behavior:

1. Go to the media manager index
2. Create a large number of folders
3. Refresh the page
4. Observe the load time

Expected behavior
Any given index should load in less that 1 second, in general, barring 1000's of imagaes and folders in a directory (in such a case, lazy loading / pagination would be helpful)

Additional context
It's clear that the operation that is sucking the most resources is the loop that reads the modified_at time of all the folders on disk and creates the assosiated array that lists that. currently it is cached, though in general it would be better to improve it's efficiency instead.

• I did notice one bug with creating slideshows. There is one closing tag missing that causes the “next/previous” buttons to show up as their own image at the end of the slideshow before it cycles back around to the first image. You can see in the attached screenshot, the with all the space around it just above the “bxslider-controls” is the one I needed to add in manually. After that was added in, the slideshows all worked perfectly on the front end. (DONE)
• Would it be possible to add folders to the search results? That way after an editor creates their new folder for an article, they can find it faster than needing to scroll down looking for it. If that really complicates things, I am thinking as an alternative, if the user could be brought inside the folder they just created after making it that could also be a good solution. (DONE) went with the second soloution client suggested

test for client users

Describe the bug
When browsing to a folder with many sub-directories, say 30-40, load time for the index page are in excess of 12 seconds.

To Reproduce
Steps to reproduce the behavior:

1. Create many folders in your file system (either via the UI or via a shell script)
2. Load the media manager to that directory
3. Observe the load time

Expected behavior
Generally a folder directory should, more often than not load in under 1 second.

Screenshots

Additional context
The problem is definitely caused by the media index function MediaController:66 when iterating over all sub-directories and fetching their last modified time. This is a disk read intensive operation and is causing slow downs.

Caching the file list is likely the quickest solution.

An admin user should be able to attach a piece of media to a particular resource in the CMS via a button that summons the media manager and allows them to pick a piece of media. The functionality should be exactly the same as the way the live site works now.

The component should:

• Show a button that says "attach media"
• Once clicked open the media manager in a modal
• The user should be able to browse all media and select a piece of media they'd like to attach
• Click the button "select" which closes the modal and shows a preview of the selected media
• add error managment when the request fails

it seems like we have no pagination or lazy loading happing on the new media manager.

For reference the old media manager has lazy loading working when you open the media manager from inside an article and it has pagination from inside the media section of the CMS

Uploading a new image, the user is given a success message but there is no immediate pop up for the image itself as the previous media manager had, i.e. a user must nagivate to the image itself and 'open' it.

Description

Updating a peice of media's meta data does not work when using Laravel < 8.X. This is likely due to the nature of the fill() function and how it has changed over time.

Is your feature request related to a problem? Please describe.
Media validations is currently quite ambiguous. its unclear if media validation should be handled via mediable or if the media manager should have some functionality there.

Describe the solution you'd like
A simple way to define what media should be upload-able, as well as some validation that ensure media being uploaded is indeed of that type / is safe.

Describe alternatives you've considered
Letting Mediable take on this responsibility: feels confusing, potentially careless

Additional context
N/a

Describe the bug
Carousel - you are supposed to be able to select items from multiple folders and "bank" them to create carousel - right now this doesn't seem to work

To Reproduce
Steps to reproduce the behavior:

1. Go to a folder and select some pictures.
2. Go to another folder and select some pictures.

Expected behavior
We should have pictures selected from both folders.

Overview

We need to refactor all the things!

Vue

* [ ] Props enhancements
* [ ] State
* [ ] Import with VueX states

CSS

* [ ] Remove unused styles

• Fix readme

BUG Delete attachment reloads the page and discards unsaved values.

we'll leverage the new custom event we created for the attach media. we just need to change the BED response for the delete attachment request and call the custom event in the success of that request

I would like to optimize the frontend portion on this.

*New feature to allow user to see the max file size allowed to be uploaded
when user is uploading images, they can see what is the maximum file size allowed to be uploaded,
this prevents from unnecessarily uploading bigger images than what is allowed

Approached taken
-created a life cycle method, to fetch the required data to display to the user
-created a helper function that can be imported where needed to parse the data,
to display the correct amount of bytes

Is your feature request related to a problem? Please describe.
The developers should be able to specify a set of conversions that should be automatically created upon upload of a supported file.

Describe the solution you'd like
The Conversions trait should be extended to load the conversions settings from a config file that can be published and modified. By default some set of SrcSet conversions should be included as well.

Additional context
The Conversions trait already exists but may need to be adjusted slightly to to accommodate the above outlined changes

These are bugs that came up during deployment Mar 9th

after deploying the media manager to production we came accross issues with the infinite scroll and a mix content http error that was caused by the AWS enviorment.
all these bugs have been addressed and fixed and will deploy today today March 10th

when attaching an image to an article the media manager triggers a refresh thats causing unsaved data on the article to get lost.
this issue is linked to this issue on the main TCE repo

1. Currently you can’t add spaces when searching the media manager from in an article. The spacebar just doesn’t work. We can add spaces without issue when searching on the main page so hopefully this is a minor issue. (DONE)
2. Currently attaching a new image in the gallery section of an article replaces all images currently there. We would like the “attach” function to add any new images without replacing anything that is there. This is especially important for existing articles that get expanded, we don’t want to delete everything that is already in the gallery. (DONE)
3. Dragging and dropping an image into the article currently adds the link to the image in twice, once as a link and once as plain text in the article. I have attached an example.
4. Lastly, the slideshow embed code is working great, the one thing is that it no longer contains the bit of HTML that contained the “previous/next” labels for the buttons. It seems to be working fine without that section but I just wanted to make sure it wouldn’t cause any issues for existing slideshows on the site that contain that extra bit of code. I have included a screenshot of the HTML I am referring to.

Trello: https://trello.com/c/sjVbbKsH/52-translatable-fields

Task :

Add toggle switch for EN / FR content.
User should be able to switch between fr & en content.

Is your feature request related to a problem? Please describe.
Interacting with the media manager is difficult without a user interface.

Describe the solution you'd like
It be best if there was a set of Vue components that came together into one component that acted as the media manager, that way the media manager as a whole can be placed somewhere as a single component and load on said page.

Additional context
We've put together some designs as a visual aid for any front-end development. any Vue components should reflect some element with these designs or at least remain within the same style
https://projects.invisionapp.com/share/BCY4614YHFP#/screens/435070722

Description

When an image is uploaded to a directory with the same name as some other image in that directory, deleting that image causes inconsistent behaviour. The items are not deleted properly.

Additionally there is a missing call to clear the cached folders list when a folder is deleted, causing a folder to appear as if it has not been deleted.

Describe the bug

When updating media, a 500 error is thrown if required fields are passed as null.

To Reproduce

Steps to reproduce the behavior:

1. Visit the media manager
2. Click on a piece of media to get its details
3. Leave a required field blank
4. Save the media
5. See that nothing happens.

Expected behavior

There should be a warning that tells the user they've omitted a required field

Additional context

We're essentially missing proper request validation and error passing to make this work right.

Description

Add a set of tests that can detect the media API is still working as intended.
Have this test suite run on every PR into master via github actions.

Describe the bug
when selecting images to add to media carousel, the image thumb nail representation is not being rendered,
css background property has a value of undefined

To Reproduce
Steps to reproduce the behavior:

1. Go to 'encyclopaedia, click media '
2. Click on 2 or more images to add them to carousel
3. See error

Expected behavior
thumb nails in carousel are supposed ot have images.

Screenshots

close[]

• Reduce space between cards and buttons on carousel create panel.
• Hide slidepanel when deselect item.

Description

The full URL for a given resource should be available for use. A getURL function should be added to the base Media model as well as an attribute that uses said function. The added attribute should be included in the $appends

we need a way for the user to remove attached media

work will be done in branch #54 54-media-attach-component

Is your feature request related to a problem? Please describe.
When displaying media pulled from the media manager on a front-end, there is not a simple way to define which image should be used and when. A developer should be able to define a number of SrcSets or in the absence of such a definition, the package should automatically fallback to a number of standardized SrcSets

Describe the solution you'd like
There should be SrcSet display functions that help a developer format the image in a number of standard sizes, dependant on the users display size. Ideally these SrcSet functions would be configurable so that a developer can override them.

Describe alternatives you've considered
A simple set of standard SrcSet functions that just pull the correct image when they need to would be an acceptable V1.0 of this feature.

Is your feature request related to a problem? Please describe.

It's not possible to tell what's inside of a zip file without downloading the whole thing and opening it. This can take a lot of time depending on the size of the zip.

Describe the solution you'd like

We should have a way to preview the zip folder contents in the media manager interface

For frontend: could be part of the details sidebar, with a little scrollable area, kind of like google drive does it

For backend: we should add a new api route that reads the file with ZipArchive and recursively gets all the contents with getNameIndex()

Describe alternatives you've considered

• Downloading it
• Extracting it and displaying all files in a folder

Additional context

Should be tackled after we nail the core functionality and do the first release.

Describe the bug
Language Switch changes the media manager folder

To Reproduce
Steps to reproduce the behavior:

1. Go to a folder and notice the bread crumb info. It shows Home / folder(s)
2. Insert or edit an image.
3. On the side panel toggle the language.
4. The bread crumb info changes and shows a UUID instead of the folder names.

Expected behavior
The bread crumb info should always reflect the current folder.

Desktop (please complete the following information):

• OS: Mac OS
• Browser chrome
• Version Version 102.0.5005.115 (Official Build) (arm64)

There a few house keeping tasks that need to be done for this to go live:

All remaining PRs should be merged
A point release should be created for the project
The Repo should be made public of ease of deployment
The final PR on TCE should be merged, #71 closed

Is your feature request related to a problem? Please describe.

Currently there is no way to attach media to a given model from the media manager. This means that information about media can be edited and created, but then media cannot be attached to a given model for use in the project

Describe the solution you'd like

For this feature to be effecting a new endpoint should be added that will allow for attaching an arbitrary piece of media to an arbitrary model. This can be achieved via reflect / model name resolution. To do this the front end will need to pass in the model name in question, as well as the ID of the particular model, as well as the id of the media selected.

Additional context

Overall the flow of this can be:

1. A new button component is created that summons the media manager in a modal.
2. This button will accept props for the current model class, as well as the id of the model
3. Clicking the button summons the media manager and allows a user to select a piece of media
4. There should be an "attach" button of some kind added to the media manager when in this state that will call the new attachment endpoint.
5. The attachment endpoint will associate the model with the new piece of media.

Description

When attempting to move a folder into some sub folder, the user is met with a success message, though the files don't actually get moved properly. This behavious seems to only happen with an S3 configured bucket

Is your feature request related to a problem? Please describe.
It is currently impossible to move a folder and it containing files or just a single file.

Describe the solution you'd like
Add 2 controller functions, one to move a folder with all its contained media, and one to move a specific piece of media.

Additional context
The Move folder function should exist in the MediaManagerController while the move file should exist in the MediaController

this issue will close with #75 work was done on same branches

Task :

From Annika 1:43 PM
FYI confirmed we can remove "Creator" field from new MM so will just be using
Image title
Alt text (will only display if images are broken or if using a screen reader)
Caption
Source

Screenshot :

Switching between languages in Media Manager discards changes after editing.

To reproduce:

1. Open up an image in the Media Manager
2. Edit the title and/or caption
3. Switch to the other language
4. Switch back to the original language
5. Observe that the title/caption changes have been discarded

Feel free to break these into tasks:

• Clicking on an image already in an article does not take you to the image in the library as previously (see video) - this is fixed
• you cannot type spaces in the search bar - general behaviour in this bar seems off, periods appear when you press space repeatedly - looked into this but not 100% whats happening here
• pressing enter doesn't make the search work you HAVE to click on the magnifying glass to get a response - this is fixed

Describe the bug
Currently, the conversions trait is designed to be added to a Mediable model, and not the media model

Expected behavior
Conversions should be an extension to the Media model, and call regenerate conversions when some media is saved

Additional context
The functions on Conversion should be refactored to be able to be attached to the media model instead of a mediable model

Is your feature request related to a problem? Please describe.
The Frontend should be able to make changes to the data via the endpoints available

Describe the solution you'd like
Each component that represents some button or set of controls should make an Axios call to the appropriate endpoint.

Additional context
As much as possible logic for performing actions should be contained within the components that perform them so that a specific component can potentially be used somewhere else and would still work

For now some pages/medias take times to load and we don't have visual indicator to reflect that so we will implement a loader.

Task :

For now filesize are not readable.
Need to implement a vueJS filter to fix this.

Description

Following #41
the /media-api/settings endpoint should be made more restrictive as to only allow the required data.

This will be determined later, once Front-end has had a chance to use what we offer to them.

For now the search close button appear whatever the circonstance.
We need to show the close / clean search button only if we have search results.

Is your feature request related to a problem? Please describe.
Most times a user would need to be able to credit the creator of a piece of media, or include alt text with the image. This is currently unsupported

Describe the solution you'd like
Add the fields alt and author / credit as fields on the media migration, as well as making them fillable.

Describe alternatives you've considered
Since the media model will eventually be extendable / publishable we may leave fields such as these for a user to implement, but something like alt is quite universal.

Describe the bug
When you click the close button on 'slidepanel' it reload the page.

To Reproduce

1. Open a picture on the slidepanel
2. Click the close button

Preview :

• add a copy html button to each media side panel that would generate the image tag using the media url allowing users to add single images to the body of post
• make sure the carousel copy to clipboard is working as intended

Is your feature request related to a problem? Please describe.
Building a path to a specific image is non trivial, and knowing what conversions are available is almost impossible from the front end.

Describe the solution you'd like
Ideally 2 mutators on the media model, one that is a URL directly to the piece of media we're interesting in. The other can be an array of urls that list out all the conversions.