toniebox-reverse-engineering / teddycloud_web

A better web interface for TeddyCloud
https://github.com/toniebox-reverse-engineering/teddycloud/
16 stars 9 forks source link

[PoC implemented] Display model and source img #80

Closed henryk86 closed 2 months ago

henryk86 commented 4 months ago

If you assign a tag a certain model but a different source (like model is the image of the tag and source is the actual content (e.g. model: yakari figurine, content: episode 7 (Cd with cover xyz))) it would be nice to represent that in the tonie card also. Like the model image as currently as cover and new the src image as a small overlay or hover image.

something like here mocked: image

Mockup details

source code: ```html

Wickie - Custom Tag Wickie - Custom Tag
``` ```css .sourceImage { padding: 8px; position: absolute; top: 40%; left: 50%; height: 25%; width: auto; } ```

This also needs some backend modifications. Currently only one of them is attached to the uid, this must be extended to a second one (like adding a child tag with the src one and same structure). To be checked how this will work with Original ones, but I assume both will be equal.

or overwork it a little that there are multiple images available (model one for cover and a second image for src). All other stuff like tonieinfo should be fetched from source if available (and filled from model if not set on src level)

henryk86 commented 4 months ago

As there seems to ne no capacity to extend the api, i prepared it without need of an adapted API on cost of some performance. as soon as the api is extended, the fetching part here can be reverted.

It looks as follows:

Tonies overview:

image

tonies information modal: image

there is a tooltip stating that alternative source is assigned (as shown in second image)

henryk86 commented 4 months ago

performance needs to be checked if its usable!

cbob commented 4 months ago

Hi Henryk, first of all thanks for your work. It is awesome. Here is some feedback I like to provide you in regards of travel/coin tonies, while testing this PoC implementation.

As a quick background: I copied the original tonies metadata from the tonies.json over to the tonies.custom.json and than only modified the pic with a local url to my replacement picture. So the new custom tonies also includes the audio_id and hash.

Without having a look at the code it seems that the original content seems to be switched to my custom one as you can see in the first picture here:

before

After I removed that from the tonies.custom.json it switch back to the original image:

after

So my original idea was to have a clear differentiation between the original and travel tonies which was ok for the time being. Maybe for that use case (as I think many using travel tonies) It found be cool to have it the other way around:

Hope this feedback is helpful for the further steps.

henryk86 commented 4 months ago

first thank you for your feedback! This use case could be difficult to handle even if I fully understand the intent.

The big image is fetched from the model information. There should be no change at all. The small image is taken from the information fetched from the source which is got by the audio id (the information which is available in the library view if you access the taf file).

If you duplicated the json entry with the same audio id and hash, and only changed the pictures then this causes some uncertainty. The system has now to choose between two entries for one tag. Actually I do not know which one it prefers, the one from the tonies.json or the one from the tonies.custom.json. It seems like the custom one, but I don’t know. Especially I am not aware from with source the information was fetched in the end.

how ever. I use indeed the picture to decide if the small image shall be shown or not. If the picture is the same, I do not show the small one (only in the tonies view, in the information modal I also check differences within series, episodes and tracks). In your case the picture is different and so I show the small one too.

still quite complicated and I have currently no idea how to solve that using this feature.

your proposal sounds reasonable, but I still prefer the actual tonie (model) as bigger image and the content (source) as smaller one.

so maybe you should adapt your custom entry for travel tags in general. No tonie image, just the coin. No audio id nor hash. Assign that as model to the travel / coin tonie. The actual content then will be the small tonie image.

henryk86 commented 4 months ago

I still think the label request would solve this much better.

—> https://github.com/toniebox-reverse-engineering/teddycloud/issues/157

henryk86 commented 4 months ago

@cbob : have a look here:

image

you can download the pic here: travelTonie

cbob commented 4 months ago

The more I think about the current implementation the more I would agree to the current implementation. So for example (even if I don't think that is currently a use case for me): If some day I would like to assign an alternative content to the coin/travel tonie (which than also has still that image inside the coin capsule) I could select the new content and than the hole think makes much more sense like before:

alternative

Maybe (for my original intent) this label request would really make more sense than this feature. But somehow is there any chance to make this feature optional? So if I have the situation with same tonie content but different picture I could opt-out that feature and if I come back later I could enable it again.

Regarding your last comment this is also a good workaround. I will also try to play around it.

Thank you!

henryk86 commented 4 months ago

as soon as its possible to store some settings in a db or what ever, I think this could be configurable, even in tag level. on global level it may get its own setting in the settingssection. but this will be a subject to be discussed.

@SciLor what do you think about making some teddycloud frontend features configurable? (like show sourceInfo)

cbob commented 4 months ago

@henryk86 do you think it would be convenient to decide based on the content. So for example if the alternative content matches the other one than also not display the small icon?

So the tooltip current shows:

This Tonie "Feuerwehrmann Sam - Eine Insel voller Abenteuer" has an alternative content assigned: "Feuerwehrmann Sam - Eine Insel voller Abenteuer"!

Which for me as a user would also look as the contents are the same.

henryk86 commented 4 months ago

i would rename the custom tonies json element accordingly with "Traveltonie Feuerwehrmann Sam".

maybe I change the tooltip also, remove "alternative".

i will sleep on it.

henryk86 commented 4 months ago

@cbob : I am currently trying to recreate this 1:1. But as soon as I have the entry from the tonies.json in the custom json and only change the image, only the image from the custom json is displayed. no two images. in the model search, only the image from the custom json is displayed... did you really only change the image?

cbob commented 4 months ago

@henryk86 this was the first picture I posted here. It seems that the custom tonie has priority. What I than changed (see second picture) was removing the audio_id and the hash on the tonies.custom.json (and no but not sure if necessary).

henryk86 commented 4 months ago

In the first case you still have two images on the second tonie. I could not reproduce that.

image

(the original image is idefix, the guy is the "coin"/custom image)

henryk86 commented 4 months ago

did you captured the screen directly after changing the source? no reload?

In my version i changed here something so that the tonie is really updated in frontend... maybe thats the difference...

but still there would be the problem that you are not really able to distinct between both...

if i adapt the custom json as mentioned (+changing the modelnumber): the same bevhaviour as described. Custom Travel tonie has the travel image and the small original image. The original one has the original image

cbob commented 4 months ago

So I quickly checked the necessary steps I did to reproduce the initial behavior. So originally the config in tonies.cusom.json looked like this:

  {
      "no": "0",
      "model": "c-10000524",
      "audio_id": [
          "1614018035"
      ],
      "hash": [
          "4E0BCB589462786C497457BFC3A05D24C8D813EC"
      ],
      "title": "Feuerwehrmann Sam - Eine Insel voller Abenteuer",
      "series": "Feuerwehrmann Sam",
      "episodes": "Eine Insel voller Abenteuer",
      "tracks": [
          "Fußball gegen Wissenschaft",
          "SOS auf Pontypandy Eiland",
          "Balance auf dem Baumhaus",
          "Gefangen in der Schlucht",
          "Ameisenalarm"
      ],
      "release": "1615420800",
      "language": "de-de",
      "category": "audio-play",
      "pic": "<url-to-images>/image-10000524.png"
  }

In that case the original content was also associated with that coin image (in my case).

To get the behavior of the second image I removed the audio_id, hash, release and no:

  {
      "model": "c-10000524",
      "title": "Feuerwehrmann Sam - Eine Insel voller Abenteuer",
      "series": "Feuerwehrmann Sam",
      "episodes": "Eine Insel voller Abenteuer",
      "tracks": [
          "Fußball gegen Wissenschaft",
          "SOS auf Pontypandy Eiland",
          "Balance auf dem Baumhaus",
          "Gefangen in der Schlucht",
          "Ameisenalarm"
      ],
      "language": "de-de",
      "category": "audio-play",
      "pic": "<url-to-images>/image-10000524.png"
  }

In both cases (hope I mentioned that) I added a prefix to the custom entry model (c-)

henryk86 commented 4 months ago

okay. the model prefix is important. With that i can reproduce it:

so. identical entry, different model and image:

image
henryk86 commented 4 months ago

the following cases are possible:

  1. different picture but same title
  2. different picture and different title
  3. same picture and same title
  4. same picture and different title

i would go the following:

for case 1: Show only model picture for case 2: Show both (status quo) for case 3: Show only model picture (status quo) for case 4: Show both

but again... the assumption is, that in case 1 it's the same content (but if not... bäm) the tracks are completly left out.

but I think we can go with that...

henryk86 commented 4 months ago

next develop version will have this change.

cbob commented 4 months ago

Yes, I think this should be not really a problem.

Thanks a lot!

henryk86 commented 4 months ago

currently the case of Kreativ tonies are still unsolved. They are have by default a different model and content. So they appear like:

image

(this one is a boxine defined Kreative one...)

cbob commented 4 months ago

For this last topic I also found something strange in my setup:

The shown apperence is only the same for me if I look on the home view. On the tonies page this does not seem to be there:

Home: Bildschirmfoto vom 2024-07-03 11-52-05

Tonies: Bildschirmfoto vom 2024-07-03 11-48-11

Another think I found is that a tonie which doesn't have an audio_id assign from tonies.json (in my case "Tilda Apfelkern - Tilda Apfelkern - Das Drinnen-Picknick") is also shown as the kreative ones. So I would guess that the library depends on the audio_id to match the icon, title and so on:

Home: Bildschirmfoto vom 2024-07-03 11-51-32

Tonies: Bildschirmfoto vom 2024-07-03 11-46-38

Library: Bildschirmfoto vom 2024-07-03 12-06-35

This seems to be different from yours right?

henryk86 commented 4 months ago

I overworked here a lot now. i rechecked and it looks now the same. lets wait for the merge and recheck then.

So I would guess that the library depends on the audio_id to match the icon, title and so on

Yes. Library and content depends on the audio_id

henryk86 commented 3 months ago

@cbob so. Es ist im develop. Bitte einmal anschauen :)

cbob commented 3 months ago

@henryk86: Sieht gut aus. Jetzt ist es denke ich klarer verständlich. Vielen Dank!

Auch die Diskrepanz zwischen Home und Tonies ist jetzt verschwunden.

henryk86 commented 3 months ago

PoC in Develop

henryk86 commented 2 months ago

@cbob this was now moved to the backend api. May you check in latest develop if it still works fine for your setup?

cbob commented 2 months ago

As far as I see it works still fine in TeddyCloud vX.X.X (a5a6237)!

henryk86 commented 2 months ago

Perfect!