// // VLCPlayerCompactOverlayView.swift // JellyfinVideoPlayerDev // // Created by Ethan Pippin on 12/26/21. // import Combine import MobileVLCKit import Sliders import SwiftUI import JellyfinAPI struct VLCPlayerCompactOverlayView: View, VideoPlayerOverlay { @ObservedObject var viewModel: VideoPlayerViewModel @ViewBuilder private var mainButtonView: some View { switch viewModel.playerState { case .stopped, .paused: Image(systemName: "play.fill") .font(.system(size: 28, weight: .heavy, design: .default)) case .playing: Image(systemName: "pause") .font(.system(size: 28, weight: .heavy, design: .default)) default: ProgressView() } } @ViewBuilder private var mainBody: some View { VStack { VStack(alignment: .EpisodeSeriesAlignmentGuide) { // MARK: Top Bar HStack(alignment: .center) { HStack { Button { viewModel.playerOverlayDelegate?.didSelectClose() } label: { Image(systemName: "chevron.backward") .padding() .padding(.trailing, -10) } Text(viewModel.title) .font(.system(size: 28, weight: .regular, design: .default)) .alignmentGuide(.EpisodeSeriesAlignmentGuide) { context in context[.leading] } } Spacer() HStack(spacing: 20) { if viewModel.shouldShowGoogleCast { Button { viewModel.playerOverlayDelegate?.didSelectGoogleCast() } label: { Image(systemName: "rectangle.badge.plus") } } if viewModel.shouldShowAirplay { Button { viewModel.playerOverlayDelegate?.didSelectAirplay() } label: { Image(systemName: "airplayvideo") } } // Button { // viewModel.screenFilled = !viewModel.screenFilled // } label: { // if viewModel.screenFilled { // Image(systemName: "rectangle.arrowtriangle.2.inward") // .rotationEffect(Angle(degrees: 90)) // } else { // Image(systemName: "rectangle.arrowtriangle.2.outward") // .rotationEffect(Angle(degrees: 90)) // } // } Button { viewModel.playerOverlayDelegate?.didSelectCaptions() } label: { if viewModel.subtitlesEnabled { Image(systemName: "captions.bubble.fill") } else { Image(systemName: "captions.bubble") } } // MARK: Settings Menu Menu { Menu { ForEach(viewModel.audioStreams, id: \.self) { audioStream in Button { viewModel.selectedAudioStreamIndex = audioStream.index ?? -1 } label: { if audioStream.index == viewModel.selectedAudioStreamIndex { Label.init(audioStream.displayTitle ?? "No Title", systemImage: "checkmark") } else { Text(audioStream.displayTitle ?? "No Title") } } } } label: { HStack { Image(systemName: "speaker.wave.3") Text("Audio") } } Menu { ForEach(viewModel.subtitleStreams, id: \.self) { subtitleStream in Button { viewModel.selectedSubtitleStreamIndex = subtitleStream.index ?? -1 } label: { if subtitleStream.index == viewModel.selectedSubtitleStreamIndex { Label.init(subtitleStream.displayTitle ?? "No Title", systemImage: "checkmark") } else { Text(subtitleStream.displayTitle ?? "No Title") } } } } label: { HStack { Image(systemName: "captions.bubble") Text("Subtitles") } } Menu { ForEach(PlaybackSpeed.allCases, id: \.self) { speed in Button { viewModel.playbackSpeed = speed } label: { if speed == viewModel.playbackSpeed { Label(speed.displayTitle, systemImage: "checkmark") } else { Text(speed.displayTitle) } } } } label: { HStack { Image(systemName: "speedometer") Text("Playback Speed") } } } label: { Image(systemName: "ellipsis.circle") } } } .font(.system(size: 24)) .frame(height: 50) if let seriesTitle = viewModel.subtitle { Text(seriesTitle) .font(.subheadline) .foregroundColor(Color.gray) .alignmentGuide(.EpisodeSeriesAlignmentGuide) { context in context[.leading] } .offset(y: -10) } } Spacer() // MARK: Bottom Bar ZStack { // VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterialDark)) // .cornerRadius(25) // .mask { // Rectangle() // } HStack { HStack { Button { viewModel.playerOverlayDelegate?.didSelectBackward() } label: { Image(systemName: "gobackward.10") .padding(.horizontal, 5) } Button { viewModel.playerOverlayDelegate?.didSelectMain() } label: { mainButtonView .padding(.horizontal, 5) .frame(minWidth: 30, maxWidth: 30) } Button { viewModel.playerOverlayDelegate?.didSelectForward() } label: { Image(systemName: "goforward.10") .padding(.horizontal, 5) } } .font(.system(size: 24, weight: .semibold, design: .default)) // .padding(.trailing, 10) Text(viewModel.leftLabelText) .font(.system(size: 18, weight: .semibold, design: .default)) .frame(minWidth: 70, maxWidth: 70) ValueSlider(value: $viewModel.sliderPercentage, onEditingChanged: { editing in viewModel.sliderIsScrubbing = editing }) .valueSliderStyle( HorizontalValueSliderStyle(track: HorizontalValueTrack(view: Capsule().foregroundColor(.purple)) .background(Capsule().foregroundColor(Color.gray.opacity(0.25))) .frame(height: 4), thumb: Circle().foregroundColor(.purple) .onLongPressGesture(perform: { print("got it here") }), thumbSize: CGSize.Circle(radius: viewModel.sliderIsScrubbing ? 25 : 20), thumbInteractiveSize: CGSize.Circle(radius: 40), options: .defaultOptions) ) Text(viewModel.rightLabelText) .font(.system(size: 18, weight: .semibold, design: .default)) .frame(minWidth: 70, maxWidth: 70) } .padding(.horizontal) } .frame(maxWidth: 800, maxHeight: 50) } .padding(.top) // .padding(.horizontal) .ignoresSafeArea(edges: .top) .tint(Color.white) .foregroundColor(Color.white) } var body: some View { mainBody .contentShape(Rectangle()) .onTapGesture { viewModel.playerOverlayDelegate?.didGenerallyTap() } } } struct VisualEffectView: UIViewRepresentable { var effect: UIVisualEffect? func makeUIView(context: UIViewRepresentableContext) -> UIVisualEffectView { UIVisualEffectView() } func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext) { uiView.effect = effect } } struct VLCPlayerCompactOverlayView_Previews: PreviewProvider { static var previews: some View { ZStack { Color.black .ignoresSafeArea() VLCPlayerCompactOverlayView(viewModel: VideoPlayerViewModel(item: BaseItemDto(runTimeTicks: 720 * 10_000_000), title: "Glorious Purpose", subtitle: "Loki - S1E1", streamURL: URL(string: "www.apple.com")!, hlsURL: URL(string: "www.apple.com")!, response: PlaybackInfoResponse(), audioStreams: [MediaStream(displayTitle: "English", index: -1)], subtitleStreams: [MediaStream(displayTitle: "None", index: -1)], defaultAudioStreamIndex: -1, defaultSubtitleStreamIndex: -1, playerState: .playing, shouldShowGoogleCast: false, shouldShowAirplay: false, subtitlesEnabled: true, sliderPercentage: 0.432, selectedAudioStreamIndex: -1, selectedSubtitleStreamIndex: -1)) } .previewInterfaceOrientation(.landscapeLeft) } } extension CGSize { static func Circle(radius: CGFloat) -> CGSize { return CGSize(width: radius, height: radius) } }