KSPlayer with Native UI

[dhs97dev]

Hello!

tvOS 17 has a very good UI in terms of the native video player. I would like to know if it is possible to use this player, but with the native UI.

Can you help me, please?

[cdguy]

Hello!

tvOS 17 has a very good UI in terms of the native video player. I would like to know if it is possible to use this player, but with the native UI.

Can you help me, please?

This has been requested before, if you are up to the challenge and provide a nice UI written in SwiftUI, @kingslay would be happy to implement it

[kingslay]

嗯，你们看我的demo就会发现的UI设计能力不是很好。并且我对SwiftUI不是非常的熟练。如果有人实现了好的播放器的UI，然后贡献代码到这个项目的话，那我很乐意一起把播放器内核整合到这个播放器UI里面。

[cdguy]

嗯，你们看我的demo就会发现的UI设计能力不是很好。并且我对SwiftUI不是非常的熟练。如果有人实现了好的播放器的UI，然后贡献代码到这个项目的话，那我很乐意一起把播放器内核整合到这个播放器UI里面。

I will share with you in a few weeks a new playerUI proposition (different than the nativeplayer UI); and if you like you can add it @kingslay

[kingslay]

可以的，非常欢迎

[Alanko5]

@cdguy for which platform do you want to make a UI?

[cdguy]

@cdguy for which platform do you want to make a UI?

SwiftUI

[Alanko5]

SwiftUI

Platform:

• tvOS
• iOS/iPadOS
• macOS

[cdguy]

SwiftUI

Platform:

• tvOS
• iOS/iPadOS
• macOS

ios/ipadOS and Tvos will be priority, after, why not macOS

[cdguy]

@kingslay I have finished the ios UI I suppose it would be better if you do the implementation yourself I will send you the SwiftUI code via e-mail

Here are the screenshots

[Alanko5]

@kingslay I have finished the ios UI I suppose it would be better if you do the implementation yourself I will send you the SwiftUI code via e-mail

Here are the screenshots ....

Good job! Why all options have checkmark?

[cdguy]

@Alanko5 those are text fields that needs to be there, of course only the selected field will have the check mark

[cdguy]

@kingslay e-mail sent

[kingslay]

好的，收到了。我有时间的话，把这个代码合并到这个项目里。

[kingslay]

在tvOS上也是用这个ui样式吗？

[cdguy]

在tvOS上也是用这个ui样式吗？

the idea is to display the features of the player with an easy to use approach, AND of course :) to encourage devs to use their own video player design. you can replicate this design to tvos too; but if you want I can share with you swiftUI code as I did for ios.

give me an hour or two and I can share with you the tvos UI @kingslay

[Alanko5]

在tvOS上也是用这个ui样式吗？

the idea is to display the features of the player with an easy to use approach, AND of course :) to encourage devs to use their own video player design. you can replicate this design to tvos too; but if you want I can share with you swiftUI code as I did for ios.

give me an hour or two and I can share with you the tvos UI @kingslay

can you share your tvos ui?

[cdguy]

在tvOS上也是用这个ui样式吗？

the idea is to display the features of the player with an easy to use approach, AND of course :) to encourage devs to use their own video player design. you can replicate this design to tvos too; but if you want I can share with you swiftUI code as I did for ios. give me an hour or two and I can share with you the tvos UI @kingslay

can you share your tvos ui?

in half an hour I will share with @kingslay

[cdguy]

@kingslay please check your mailbox

[Alanko5]

@kingslay please check your mailbox

Native player for tvos:

[Alanko5]

在tvOS上也是用这个ui样式吗？

the idea is to display the features of the player with an easy to use approach, AND of course :) to encourage devs to use their own video player design. you can replicate this design to tvos too; but if you want I can share with you swiftUI code as I did for ios. give me an hour or two and I can share with you the tvos UI @kingslay

can you share your tvos ui?

in half an hour I will share with @kingslay

I would like to test whether the TV control works at all.

[cdguy]

@kingslay please check your mailbox

Native player for tvos:

@Alanko5 Designing the Tvos native playerUI is easier for me to design, however, as mentioned in the “terms & conditions” https://github.com/kingslay/KSPlayer/blob/a4015a4415c4534ceae2bdd87c0300d47ae4afa2/Documents/Terms.md

“ You’re not allowed to copy or modify the app, any part of the app, or our trademarks in any way. You’re not allowed to attempt to extract the source code of the app, and you also shouldn’t try to translate the app into other languages or make derivative versions. The app itself, and all the trademarks, copyright, database rights, and other intellectual property rights related to it, still belong to kingslay.”

to make sure that the video player UI is not copied or used without any modification, I preferred to share this design. If any developer is up to the task, it is to the developer to create a native player UI for its own app.

that’s how I interpret @kingslay ‘s terms & conditions

[kingslay]

@cdguy 因为我的TracyPlayer要上架苹果应用商店，需要有terms & conditions。所以我就通过https://github.com/nisrulz/app-privacy-policy-generator 来自动生成了这个协议。

[kingslay]

@Alanko5 @cdguy 想问你们一个问题，tvos要如何实现当聚焦按钮或是点击按钮的时候。能够自动在按钮的上面或下面弹出一个menu。 我知道在iOS和macos可以用menu和Picker来实现这个效果。但是tvos我不是很熟悉，不知道要如何实现。

[Alanko5]

@Alanko5 @cdguy 想问你们一个问题，tvos要如何实现当聚焦按钮或是点击按钮的时候。能够自动在按钮的上面或下面弹出一个menu。 我知道在iOS和macos可以用menu和Picker来实现这个效果。但是tvos我不是很熟悉，不知道要如何实现。

uimenu does not exist in UIKit (for tvOS). I don't know how it is in swiftUI.

[cdguy]

ou might need to integrate it with UIKit to handle the button press event. Here’s an example Swift code snippet that might be helpful:

SWIFT

import SwiftUI
import UIKit

struct ContentView: View {
    @State private var showMenu = false

    var body: some View {
        VStack {
            Button(action: {
                self.showMenu.toggle()
            }) {
                Image(systemName: "info.circle")
                    .font(.largeTitle)
                    .padding()
            }

            if showMenu {
                // Your existing SwiftUI code for the contextual menu goes here
            }
        }
        // Add a gesture recognizer to the view
        .onAppear {
            let menuPressRecognizer = UITapGestureRecognizer()
            menuPressRecognizer.addTarget(self, action: #selector(menuButtonAction))
            menuPressRecognizer.allowedPressTypes = [NSNumber(value: UIPress.PressType.menu.rawValue)]
            self.view.addGestureRecognizer(menuPressRecognizer)
        }
    }

    // Define the menu button action
    @objc func menuButtonAction() {
        // Dismiss the menu
        self.showMenu = false
    }
}

the - İ - icon (using SF Symbols) is a button. When this button is pressed (action), it toggles the showMenu state variable. If showMenu is true, your existing SwiftUI code for displaying the contextual menu will be executed.

there is also a gesture recognizer to the view using the onAppear modifier. This gesture recognizer detects when the menu button is pressed on the remote control and calls the menuButtonAction function. This function sets the showMenu state variable to false, which dismisses the menu.

[Alanko5]

@kingslay please check your mailbox ...

Native player for tvos: .... @Alanko5 Designing the Tvos native playerUI is easier for me to design, however, as mentioned in the “terms & conditions” https://github.com/kingslay/KSPlayer/blob/a4015a4415c4534ceae2bdd87c0300d47ae4afa2/Documents/Terms.md

“ You’re not allowed to copy or modify the app, any part of the app, or our trademarks in any way. You’re not allowed to attempt to extract the source code of the app, and you also shouldn’t try to translate the app into other languages or make derivative versions. The app itself, and all the trademarks, copyright, database rights, and other intellectual property rights related to it, still belong to kingslay.”

to make sure that the video player UI is not copied or used without any modification, I preferred to share this design. If any developer is up to the task, it is to the developer to create a native player UI for its own app.

that’s how I interpret @kingslay ‘s terms & conditions

If I understand correctly, you have permission from @kingslay to add your code and modify the entire UI for tvOS as well.

[cdguy]

@kingslay please check your mailbox ...

Native player for tvos: .... @Alanko5 Designing the Tvos native playerUI is easier for me to design, however, as mentioned in the “terms & conditions” https://github.com/kingslay/KSPlayer/blob/a4015a4415c4534ceae2bdd87c0300d47ae4afa2/Documents/Terms.md

“ You’re not allowed to copy or modify the app, any part of the app, or our trademarks in any way. You’re not allowed to attempt to extract the source code of the app, and you also shouldn’t try to translate the app into other languages or make derivative versions. The app itself, and all the trademarks, copyright, database rights, and other intellectual property rights related to it, still belong to kingslay.” to make sure that the video player UI is not copied or used without any modification, I preferred to share this design. If any developer is up to the task, it is to the developer to create a native player UI for its own app. that’s how I interpret @kingslay ‘s terms & conditions

If I understand correctly, you have permission from @kingslay to add your code and modify the entire UI for tvOS as well.

Yes I have; and I shared the swift code here and the swiftUI code in private to Kingslay,

The reason I did not share in public the swiftUI code; or designed a carbon copy of the TVOS Native Player is this:

Developers not sponsoring the Ksplayer project would directly use the custom made Native Player UI and use for marketing purposes as they did "their best efforts to implement a custom UI looking like the native player".

design is an area that is as important as coding; if you have great features but a bad design, users wont use the app as the user experience is based also on great design.

This creative work should be rewarded in a way by contributing to the Ksplayer project. Look at all apps using VLCkit or MPV Player; those libraries do not provide elaborated designs and the developers using those libraries all have custom designed player UIs. What I write here has nothing to do with you, it is about the general approach of the devs.

[FaiChou]

@Alanko5 @cdguy 想问你们一个问题，tvos要如何实现当聚焦按钮或是点击按钮的时候。能够自动在按钮的上面或下面弹出一个menu。 我知道在iOS和macos可以用menu和Picker来实现这个效果。但是tvos我不是很熟悉，不知道要如何实现。

uimenu does not exist in UIKit (for tvOS). I don't know how it is in swiftUI.

@available(tvOS 13.0, *)
@MainActor open class UIMenu : UIMenuElement {}

[edge261]

hi, after the update, i'm not able to bring the UI on a live stream.

[elliots]

Hi, has this gotten any further? I'd be very keen to help get it across the line.

[kingslay]

Hi, has this gotten any further? I'd be very keen to help get it across the line.

你可以看下目前最新的UI。如果你觉得某个UI细节可以做的更好的话 那很欢迎你提交代码到这个仓库。UI代码是在 KSVideoPlayerView 这个文件。你可以直接改。