custom-cards / upcoming-media-card

πŸ“Ί A card to display upcoming episodes and movies from services like: Plex, Kodi, Radarr, Sonarr, and Trakt.
281 stars 79 forks source link

Turn off linking #94

Closed 1liminal1 closed 5 months ago

1liminal1 commented 5 months ago

Hey guys,

Is there a way to turn off the linking in the YAML, I can't see anything in the doco for that?

I have a dashboard that's just a full webpage with no controls. So when I click the link I cant go back and have to restart my Pi.

Hopefully I just missed it.

Thanks :)

mkanet commented 5 months ago

Hi @1liminal1. Thank you for the feature suggestion. I'm guessing your device doesn't have a back button? I'll put this in my todo list when I have time. I can add something like disable_deeplink. The default would continue to be enabled.

PS: Don't worry, I doubt you have to wait long to see this new feature. I'll try to add it in the next update.

1liminal1 commented 5 months ago

Yeah Im using dakboard. Its great and worth it

image

Have a link to HA and back to Dakboard. But It gets stuck if it opens anything else and I have to reset the Pi to get back lol

image

Also, and this is just nothing to do with the request, more just a question. As you can see in my screenshot the view is quite cool. I found and added a bunch of custom code to make this work. But I was (I'm a hardware guy not a dev, so get ready for my caveman question HAHA) wondering how easy it would be to do something like this as a default view? Again, completely separate thing, more just putting an idea out there that you may like lol :)

1liminal1 commented 5 months ago

And thank you being able to turn it off, Im having to be very careful what I press right now HAHA :)

mkanet commented 5 months ago

You're welcome. Implementing a view similar to the one you posted isn't programmatically difficult; it's just time-consuming. The CSS just takes time to do.

I'm not a software developer either. I just wanted to improve UMC on my personal Home Assistant setup with some new features; and, ended up sharing the features I added with everyone else here to enjoy too. You could do the same, if you're motivated to.

1liminal1 commented 5 months ago

That's my dashboard :) I was more meaning that as a default option. But look all good, Im pretty deep in doing WLED stuff right now. But maybe sometime down the track Id love to help :)

Thanks again

mkanet commented 5 months ago

@1liminal1 Good news! Version 0.5.7 has a new optional setting called: disable_hyperlinks. Just add disable_hyperlinks: true to your YAML card code.

1liminal1 commented 5 months ago

Hey! Apologies for only just getting to this. Just wanted to say thanks for implementing that. Will be super helpful for those of us with single use type dashboards :)

Thank you!!!

mkanet commented 5 months ago

@1liminal1 Do you happen to have the radarr_upcoming_media integration for UMC? If so, I'm curious what would happen if you try to use the enable_trailers: true feature. If you enable it, it will playback the video trailer of the movie if you click (or touch) it, if available. I actually thought of you when I added an X close button for this feature (so you can conveniently close the video on your Dakboard) to go to the Home Assistant UI again.

I also added this capability to the trakt integration for UMC. However, it wont be available until my PR is merged.

Upcoming Media Card Trailers

1liminal1 commented 5 months ago

Whoa! That's very cool :) Just tested it on a PC, ill test it on the dashboard screen when I get home and let you know.

Actually I seem to have discovered a secret back button in Dakboard OS. SO I may end up using the feature to open radar ect 😒 πŸ˜ƒ but very happy to turn the option off if its not very useable so thanks again 😊

Is Trakt like Overseerr?

mkanet commented 5 months ago

Trakt keeps track of what movies and shows you watch. It knows what movies and shows people watch. I added it to Plex. However, it also has several useful lists too; which the trakt integration has access to.

Recently, I enhanced the trakt integration so that it displays all the anticipated movies and shows in the near future. You saw it briefly in the animated gif above.

image

1liminal1 commented 5 months ago

Ok interesting. I use Overseerr, which I think might be similar.

Also, here is my code for the rounded covers all next to each other. As much as I love the upcoming media card the default views are a little dated. (To me anyway ☺️)

Im using minimalist UI, kinda taught myself how to code for it... But I forgot most of it now 😒 πŸ˜„ You might get some use out of it if you like that look :)

  - view_layout:
      grid-area: "media1"
    type: horizontal-stack
    cards:
      - type: picture-elements
        image: /local/box.png
        card_mod:
          style: |
            ha-card {
              height: 1050px !important;
              width: 1px !important;
              overflow: visible !important;
              background: transparent;
            }
        elements:
          - type: custom:upcoming-media-card
            title: Recently Added
            label:
            date: ddmm
            style:
              top: 5px
              left: 5px
              width: 1px
              height: 260px
              transform: translate(0%, 0%)
            entity: sensor.plex_recently_added
            image_style: poster
            flag: false
            icon: none
            max: 8
            box_shadows: false
            border_color: transparent
            accent_color: transparent
            title_text: $empty
            line1_text: $day, $date
            line2_text: $number - $runtime
            line3_text: $empty
            line4_text: $empty
            title_size: large
            line1_size: large
            text_shadows: false
            card_mod:
              style: |
                ha-card.type-custom-upcoming-media-card {
                background: transparent;
                padding: 0px !important;
                box-shadow: none;
                overflow: visible !important;
                }
                ha-card > div {
                padding: 0px !important;
                }
                #main.plex_poster {
                margin: 0px !important;
                overflow: visible !important;
                position: absolute !important;
                width: 500px !important;
                }
                #main.plex_poster:nth-of-type(2) {
                left: 181px !important;
                }
                #main.plex_poster:nth-of-type(3) {
                left: 362px !important;
                top: 77px;
                }
                #main.plex_poster:nth-of-type(4) {
                top: 77px;
                left: 543px !important;
                }
                #main.plex_poster:nth-of-type(5) {
                top: 77px;
                left: 724px !important;
                }
                #main.plex_poster:nth-of-type(6) {
                top: 77px;
                left: 905px !important;
                }
                .plex_poster .plex_container_poster {
                border-radius: 10px;
                box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
                margin: 0px;
                padding: 0px;
                width: 168px;
                height: 258px;
                }
                .plex_poster .plex_svg_poster {
                margin: 0px;
                position: absolute;
                top: 166px;
                left: 0px;
                width: 153px !important;
                border-radius: 0px 10px 10px 0px;
                background-color: rgba(44, 45, 67, 0.6);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                transition-duration: 150ms;
                }
                .plex_poster .plex_svg_poster:hover {
                opacity: 0%;
                transition-duration: 200ms;
                }
                .plex_line0_poster {
                font-size: 14px !important;
                }
                .plex_line1_poster {
                font-size: 21px !important;
                fill: white !important;
                opacity: 80%;
                }
                .plex_line2_poster {
                font-size: 22px !important;
                fill: white !important;
                opacity: 80%;
                }
1liminal1 commented 5 months ago

Ok, been playing with this a little and it seems that deeplinks actually open a new webpage so my back button does not work.

Do you know if there is a way that will just go to the page and not open a new tab?

mkanet commented 5 months ago

Ok, been playing with this a little and it seems that deeplinks actually open a new webpage so my back button does not work.

Do you know if there is a way that will just go to the page and not open a new tab?

The current method has no issues with the back button (at least for common web browsers (even mobile versions); including, the Home Assistant companion app as well. However, it doesnt appear to work the same way with Dakboard unfortunately.

To answer your question, yes, it's very simple to change this behavior to do what you want; replace window.open(videoUrl, '_blank'); with window.location.href = videoUrl; in the upcoming-media-card.js. However, there are benefits to using the current method over the method you're suggesting which I'm not willing to give up currently: 1) The current method is faster and less clunky when pressing the back button since the previous webpage is already waiting in memory; ready to be displayed. 2) Web browsers that display tabs have the flexibility to keep both pages open.

Considering I already added a disable_hyperlinks setting for your specific use case, I'm honestly not motivated to add yet another setting for the same use case (to switch between window.open(videoUrl, '_blank'); and window.location.href = videoUrl;) via a setting I.E., hyperlink_tabs: true

You can modify the upcoming-media-card.js yourself with that small change above. However, you would have to do it each time you upgrade upcoming media card. If I see more people wanting this specific setting, I would consider adding it in the future.

1liminal1 commented 5 months ago

😳 Oh man, definetaily. You have already given me what I needed for my use case. Thank you ☺️

I wasn't trying to get you to do more HAHA, just asking about it 😌 I honestly didn't even expect you to write out what you have about it. More like, yeah man, check this page if you want to do something like that. Or even, I have no idea HAHA

Thanks mate! I appreciate it.

But also I think there is a little bit of a miscommunication. The traliers work great.

My issue is when I hit the link that opens Sonarr or Radarr it opens the page in a new tab, so my slide to go back does not work. SO I was wondering if you knew of a setting to say dont open pages in a new tab or some such 😊

Sorry for the confusion and please, not asking for anything more then you have already done πŸ’™

mkanet commented 5 months ago

All good mate glad to help.