Channel subscribe button in search results

[kommunarr]

Channel subscribe button in search results (and minor improvements to grid & list views)

Pull Request Type

• Bugfix
• Feature Implementation

Related issue

closes #1968

Description

• Adds subscribe button to channel in search results
• Fixes ft-list-playlist not respecting appearance
• Fixes hashtag and channel button click area to be full-width on grid and list view
• Fixes list view being impossible to read video titles on smaller display sizes
• Fixes hashtag, channel, video, and playlist search results to all be the same width on list view
• Makes "videoCountContainer" on playlist item clickable to open the playlist

Video

This video completes the testing steps below:

simplescreenrecorder-2023-09-20_19.22.02-2023-11-23_08.26.28.mp4

Testing

• Test list & grid view in search results, playlist page, and recommendations in desktop, tablet, and mobile view
• Test that all list view search result types (hashtags, playlists, videos, channels) are all equal width, and that their click area width reflects that
• Test that all grid view search results have full width click are
• Test that you can click on the right-hand side of a playlist to open it
• Test that subscribe button is present in search results involving channel

My search of choice for testing these: mafia channel. For hashtags: #meow.

Desktop

• OS: OpenSUSE Tumbleweed
• OS Version: 2023xxxx
• FreeTube version: 0.19.1

[PikachuEXE]

I think it doesn't look great on low width view (like video at 1:05)
Using more vertical space is expected by low width view users

Otherwise works fine

[PikachuEXE]

The original list view for channel already got issue on low width (< 500px)

In this PR it becomes worse

[kommunarr]

@PikachuEXE What conditions are you seeing where the text is being clipped like in the image? Are you sure you don't just need to re-close and open dev tools?

[kommunarr]

I think it doesn't look great on low width view (like video at 1:05) Using more vertical space is expected by low width view users

Otherwise works fine

I appreciate the feedback here. Do you have a suggestion on what it should look like?

[PikachuEXE]

Why would resizing the window reproduce a different result from using Toggle Device Toolbar
Anyway here is my WIP attempt (I rarely use grid even in FT)
(As on how to adjust the button style on tablet widths is up to you)
(I don't dare to change all ft-item style from flex to grid yet)

Replace whole style block starting with .ft-list-channel { in src/renderer/scss-partials/_ft-list-item.scss with

.ft-list-channel {
  &.grid {
    align-items: center;
    text-align: center;

    .info {
      margin-block-end: 12px;

      .infoLine {
        text-align: center;
      }
    }
  }

  &.list {
    align-items: start;
    display: grid;

    grid-template:
      'channelThumbnail info channelSubscribeButton'
      / auto 1fr auto;

    .channelThumbnail {
      grid-area: channelThumbnail;
    }

    .info {
      grid-area: info;
      align-content: start;
    }

    .channelSubscribeButton {
      grid-area: channelSubscribeButton;

      margin-block: auto;
      margin-inline: 7px;
    }

    @media only screen and (max-width: 1000px) {
      grid-template:
      'channelThumbnail info'
      'channelThumbnail channelSubscribeButton'
      / auto 1fr;
    }
  }
}

[kommunarr]

Hi Pika, sorry, to clarify, I meant what you were intending behaviorally, you didn't have to code anything up. Implemented your suggestions now in a least-changes manner. Also fixed issue with the channel icons not shrinking properly on smaller screen sizes.

[PikachuEXE]

It's a rare chance for me to learn grid