LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add miniplayer

Browse source
This commit is contained in:
Rafael 2022-03-15 15:03:47 -03:00 committed by Thomas Zarebczan
parent 6ce9bd5cf7
commit ebfe644cb8
3 changed files with 119 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/fileRenderFloating/view.jsx
View file

@ -104,8 +104,8 @@ export default function FileRenderFloating(props: Props) {
const { uri: playingUrl, source: playingUriSource, primaryUri: playingPrimaryUri } = playingUri; const { uri: playingUrl, source: playingUriSource, primaryUri: playingPrimaryUri } = playingUri;
const isComment = playingUriSource === 'comment'; const isComment = playingUriSource === 'comment';
const mainFilePlaying = (!isFloating || !isMobile) && primaryUri && isURIEqual(uri, primaryUri); const mainFilePlaying = !isFloating && primaryUri && isURIEqual(uri, primaryUri);
const noFloatingPlayer = !isFloating || isMobile || !floatingPlayerEnabled || hideFloatingPlayer; const noFloatingPlayer = !isFloating || !floatingPlayerEnabled || hideFloatingPlayer;
const [fileViewerRect, setFileViewerRect] = React.useState(); const [fileViewerRect, setFileViewerRect] = React.useState();
const [wasDragging, setWasDragging] = React.useState(false); const [wasDragging, setWasDragging] = React.useState(false);

5
ui/page/livestream/view.jsx
View file

@ -11,6 +11,7 @@ import LivestreamLayout from 'component/livestreamLayout';
import moment from 'moment'; import moment from 'moment';
import Page from 'component/page'; import Page from 'component/page';
import React from 'react'; import React from 'react';
import { useIsMobile } from 'effects/use-screensize';
const LivestreamChatLayout = lazyImport(() => import('component/livestreamChatLayout' /* webpackChunkName: "chat" */)); const LivestreamChatLayout = lazyImport(() => import('component/livestreamChatLayout' /* webpackChunkName: "chat" */));
@ -51,11 +52,13 @@ export default function LivestreamPage(props: Props) {
doSetSocketConnected, doSetSocketConnected,
} = props; } = props;
const isMobile = useIsMobile();
const [activeStreamUri, setActiveStreamUri] = React.useState(false); const [activeStreamUri, setActiveStreamUri] = React.useState(false);
const [showLivestream, setShowLivestream] = React.useState(false); const [showLivestream, setShowLivestream] = React.useState(false);
const [showScheduledInfo, setShowScheduledInfo] = React.useState(false); const [showScheduledInfo, setShowScheduledInfo] = React.useState(false);
const [hideComments, setHideComments] = React.useState(false); const [hideComments, setHideComments] = React.useState(false);
const [layountRendered, setLayountRendered] = React.useState(chatDisabled); const [layountRendered, setLayountRendered] = React.useState(chatDisabled || isMobile);
const isInitialized = Boolean(activeLivestreamForChannel) || activeLivestreamInitialized; const isInitialized = Boolean(activeLivestreamForChannel) || activeLivestreamInitialized;
const isChannelBroadcasting = Boolean(activeLivestreamForChannel); const isChannelBroadcasting = Boolean(activeLivestreamForChannel);

113
ui/scss/component/_content.scss
View file

@ -59,6 +59,119 @@
z-index: 9999; z-index: 9999;
} }
} }
@media (max-width: $breakpoint-small) {
height: 50px;
width: 80px;
top: 3px;
left: calc(50% - 40px);
transform: unset !important;
border: unset;
.content__wrapper--floating {
width: 100%;
height: 100%;
.content__floating-close {
visibility: visible !important;
display: inline;
position: fixed;
top: 12px;
left: calc(50% + 80px - 32px);
height: 32px;
width: 32px;
background-color: rgba(var(--color-primary-static), 0.6) !important;
border-radius: 50%;
.button__content {
justify-content: center;
.icon {
flex-shrink: 0;
// width:20px;
}
}
}
.autoplay-countdown {
display: none;
}
}
.vjs-control-bar {
display: inline-block !important;
opacity: 1 !important;
&::before {
background: unset !important;
}
}
.vjs-control {
display: none;
}
.vjs-play-control {
transform: unset !important;
display: inline !important;
position: fixed !important;
top: 12px !important;
left: calc(50% - 80px) !important;
height: 32px !important;
width: 32px !important;
background-color: rgba(var(--color-primary-static), 0.6) !important;
border-radius: 50% !important;
opacity: 1 !important;
pointer-events: unset !important;
span {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
&::before {
line-height: 32px !important;
}
}
.vjs-control-text {
display: none !important;
}
}
.vjs-play-control.vjs-playing {
.vjs-icon-placeholder::before {
content: '' !important;
}
}
.vjs-play-control.vjs-paused {
.vjs-icon-placeholder::before {
content: '' !important;
}
}
.vjs-play-control.vjs-ended {
.vjs-icon-placeholder::before {
content: '' !important;
}
}
.vjs-progress-control {
top: 32px;
.vjs-slider {
margin: 0 !important;
div,
span {
height: 2px !important;
}
}
}
.content__info {
margin-top: -50px;
opacity: 0;
.button--uri-indicator {
display: none;
}
}
}
} }
.content__viewer--theater-mode { .content__viewer--theater-mode {