[Feature]: Group referred publications media together

[dagandrew]

Is your feature request related to a problem?

Sometimes there are too many media items in the midweek meeting because it references additional publications. For example in the week starting Jan 20

or 27

Describe the solution you'd like

It would be great if there was a setting of excluding referred publications in midweek meeting (except Congregation Bible Study of course - you could keep only the last referred pub, since it's the last part of Wookbook) in the Advanced settings alongside 'Exclude all media from the Teaching brochure'. It would be similar of what JW Library does
and I think it's similar to this #874 and maybe now it's easier since Workbook is changed a bit

Describe alternatives you've considered

Show them, but maybe an option of hiding all referred publication this week on the main screen in the right click menu like 'hide all referred media items' alongside 'hide this media item'

Additional context

No response

Confirmations

• I confirm that I have read the documentation website.
• I confirm that I have searched through the existing issues to make sure my feature request is not a duplicate.
• I confirm that I have searched through the existing discussions to make sure my feature request is not a duplicate.

[dagandrew]

Or if you definitely want to keep it you could hide it in dropdown menu with a publication name that goes between main media items

[sircharlo]

Actually, JW Library does not do this. By default it even shows more media than M³, because JWL shows all pictures for any given chapter, not just the images relating to paragraphs covered or referenced by the material.

The difference lies in the fact that JWL doesn't notify the user if a referred publication is not downloaded. If you were to download all referred publications in JWL and look at the media list once more, I think you'd see a much different media list.

[mtdvlpr]

We could make the assumption that videos from referred publications are never used, since videos are always referenced directly (Play the VIDEO). That would clean up edge cases like the week of January 27.

[sircharlo]

We could make the assumption that videos from referred publications are never used, since videos are always referenced directly (Play the VIDEO). That would clean up edge cases like the week of January 27.

I do agree with that.

[dagandrew]

Great idea! Could you please think about this design? To have an expansion item for referred publications

[ux-git]

To have an expansion item for referred publications

Круто! 👍 That’s a great idea! I’ve been thinking about something similar recently. Sometimes, the conductor asks to play referenced media without prior notice, assuming it’s just a click away. However, at that point, there’s no time to e.g. go into the global settings, enable the "fetch references/footnotes" option, and re-initiate media sync.

In such cases, having secondary media synced but collapsed makes sense. This way, it’s always accessible in urgent situations without being distracting most of the time. In my opinion, this feature would work well "on by default", with the ability to disable it in the settings for those who are absolutely sure they’ll never need the referred media.

I’d just say it’s important to visually design it in a way that makes it intuitively clear which meeting part the media belongs to. And perhaps even to let users manually hide the accordion in the same way as a normal media item (... more → hide).

[e-Feitosa]

I’d just say it’s important to visually design it in a way that makes it intuitively clear which meeting part the media belongs to. And perhaps even to let users manually hide the accordion in the same way as a normal media item (... more → hide).

Following this line of reasoning, it would be interesting to have the media hidden on the main screen, and with just one click, activate and deactivate the optional media.

For example:
Optional media ⬇️

[sircharlo]

Grouping media by source publication isn't tricky (I actually have it right now on my dev machine), but drag-and-drop sorting is where it gets interesting. I'll need to refactor the sorting methods and logic to allow all this eventually.
Also, the insert plugin looks very nice, and I'd like to implement it at some point.

[ux-git]

I was trying different approaches (buttons, accordions, etc) to see what would fit the UI in the most intuitive way, and seems like accordion proposed by @dagandrew might work very well:

1. Collapsed state with a media items count. Most of the time it's compact and not distracting, while still presenting the count of media even without expanding it:

2. And then expanded accordion with all the available media shown and ready to be presented.

By inserting the referenced media before the divider, basically right under the media item, the dependency is more clearly recognisable for the user.

---

Alternatively, the text and icons can be painted blue to indicate the 'clickability' more clear. Or this may become a hover state, which also would add another level of feedback for users.

[sircharlo]

I was trying different approaches (buttons, accordions, etc) to see what would fit the UI in the most intuitive way, and seems like accordion proposed by @dagandrew might work very well:

1. Collapsed state with a media items count. Most of the time it's compact and not distracting, while still presenting the count of media even without expanding it:

2. And then expanded accordion with all the available media shown and ready to be presented.

By inserting the referenced media before the divider, basically right under the media item, the dependency is more clearly recognisable for the user.

Alternatively, the text and icons can be painted blue to indicate the 'clickability' more clear. Or this may become a hover state, which also would add another level of feedback for users.

Looks nice; how would you handle sortability?

[ux-git]

how would you handle sortability?

I think that in the best scenario, the referred media should be sortable in both inside and outside (drag it out to the main media list) use cases.

But if the latter one is technically complicated, the sorting within the referred media list would be a reasonable compromise to be able to at least set the desired media to the first in the list when needed.

Do you have other ideas or see other use cases?

[sircharlo]

how would you handle sortability?

I think that in the best scenario, the referred media should be sortable in both inside and outside (drag it out to the main media list) use cases.

But if the latter one is technically complicated, the sorting within the referred media list would be a reasonable compromise to be able to at least set the desired media to the first in the list when needed.

Do you have other ideas or see other use cases?

I'm aiming for sorting abilities like the ones seen here.

[ux-git]

Looks good. But should the referred media list stick to its parent media item or just a meeting part (because certain meeting parts can have multiple images PLUS referred media for example)? How do you see it?

[sircharlo]

@ux-git Would you like to try the test build from here? (You might have to change the meeting day or to clear your cache; I haven't implemented the migration steps yet.)

[sircharlo]

(The test build is from #3864)

[ux-git]

@sircharlo I've cleared the cache and viewing the weeks of Jan 27th, can't find any collapsible lists:

Also, may you consider having beta and stable versions separate to be able to test beta versions without re-writing the normal stable version?

[ux-git]

After changing the meeting day, it re-synced and now works even for this week:

[ux-git]

It works quite well. Only some visual tweaks are needed, but so far technically very good.

1. Round corner radius for play button hover state:

2. Make the corner radius of the collapsible area on hover a bit smaller:

3. Perhaps for the item count badge for the dark theme we could invert the colors to have blue as a background and grey/white for the number? Or at least pick a white color for the number:

4. Round the corner radius in the expanded state:

5. Round the corner radius for the ... more button.

Bonus: I'm not sure if that's only the beta version of the stable too, but I can't initiate zoom in with a trackpad gesture, only by clicking + button. After doing so, the gesture starts working in both directions, BUT only for this specific media item. For another I must click + and repeat the process all over again.

Bonus two: I suppose it's just a temp bug of a beta version, but all images are listed as songs:

[dagandrew]

Wow! Thank you so much for your hard work! Looks so good! Especially sorting! Could these be resolved

1. Keyboard shortcuts, it works until the next item is expansion element. Could be this way: if the expansion element is open, go to its first element, if it's closed skip the collapsible list and go to next media item
2. Is it possible if you hid the elements inside to hide the expansion item all together? btw, you can't unhide it (there is no 'show hidden media' in import menu
   
3. The last one for CBS is used frequently, could you make an exception? Or at least keep it open at launch?
4. I don't know if it's possible, but could the media items inside the list aligned with the ones outside? Maybe get rid of borders, but keep a bottom one to know where it ends OR maybe modify items outside the list?
   

[sircharlo]

It works quite well. Only some visual tweaks are needed, but so far technically very good.

1. Round corner radius for play button hover state:

Fixed in e4d1782.

2. Make the corner radius of the collapsible area on hover a bit smaller:

Fixed in e4d1782.

3. Perhaps for the item count badge for the dark theme we could invert the colors to have blue as a background and grey/white for the number? Or at least pick a white color for the number:

Trying something out in 83f7de9.

4. Round the corner radius in the expanded state:

Fixed in e4d1782.

5. Round the corner radius for the ... more button.

Fixed in e4d1782.

Bonus: I'm not sure if that's only the beta version of the stable too, but I can't initiate zoom in with a trackpad gesture, only by clicking + button. After doing so, the gesture starts working in both directions, BUT only for this specific media item. For another I must click + and repeat the process all over again.

Yes, this was a change as of recent. To make image thumbnails draggable to sort, like video thumbnails, I only activate zoom features after zoom is initiated. For now, this is done by clicking the zoom button. Perhaps eventually, I'll make it trigger on trackpad zoom as well, but this is more involved that it looks.

Bonus two: I suppose it's just a temp bug of a beta version, but all images are listed as songs:

I don't see this behaviour at all:

[sircharlo]

Wow! Thank you so much for your hard work! Looks so good! Especially sorting!

Happy you like it! 😄

1. Keyboard shortcuts, it works until the next item is expansion element. Could be this way: if the expansion element is open, go to its first element, if it's closed skip the collapsible list and go to next media item

Definitely. I'll add that to the to-do in the PR.

2. Is it possible if you hid the elements inside to hide the expansion item all together? btw, you can't unhide it (there is no 'show hidden media' in import menu

I'll also add this to the to-do.

3. The last one for CBS is used frequently, could you make an exception? Or at least keep it open at launch?

Great idea! Done as of 26c8da8.

4. I don't know if it's possible, but could the media items inside the list aligned with the ones outside? Maybe get rid of borders, but keep a bottom one to know where it ends OR maybe modify items outside the list?

Not sure about that. What do you think would look best, @ux-git ?

[dagandrew]

could you consider this? it's aligned to others and the bg color shows how what items belong to it

[ux-git]

What do you think would look best, @ux-git ?

Well, I get both points: 1) Having the area obviously separated is good for UX but unaligned/weird for UI part, while 2) Having the collapsible area without the border allows to align everything better, but then it's harder to separate them from other items. Having more background colors for different areas, plus clicked state for each of them is also questionable, but might work if done right.

I'm happy about any of those options. When designing, I was actually first trying to go with the no-border option, but I believe this will make it a bit harder to navigate. It's hard to decide, but in my opinion neither option will be too bad, especially considering how often the referred media are used 😄

[sircharlo]

Sounds good, thanks for you feedback. I've pushed 015dbfc; I'll be curious to see what you all think.

[dagandrew]

It's aligned and that's what matters! Great job! while we're here I noticed that when you add extra media and move it to the other part of the meeting it stopped hiding Extra Media part

and could the border be not so bright in dark mode, maybe like this? I've used rgb(80, 80, 80)

[sircharlo]

It's aligned and that's what matters! Great job! while we're here I noticed that when you add extra media and move it to the other part of the meeting it stopped hiding Extra Media part

Fixed in 3bb7717.

and could the border be not so bright in dark mode, maybe like this? I've used rgb(80, 80, 80)

Fixed in 4565a5a.