Update story layout

This commit is contained in:
Ali 2023-07-07 20:55:37 +04:00
parent a732b92463
commit 9b7c98a011
5 changed files with 23 additions and 22 deletions

View File

@ -2842,8 +2842,8 @@ class ChatListItemNode: ItemListRevealOptionsItemNode {
hasUnseen: storyState.stats.unseenCount != 0, hasUnseen: storyState.stats.unseenCount != 0,
hasUnseenCloseFriendsItems: storyState.hasUnseenCloseFriends, hasUnseenCloseFriendsItems: storyState.hasUnseenCloseFriends,
theme: item.presentationData.theme, theme: item.presentationData.theme,
activeLineWidth: 2.0, activeLineWidth: 2.33,
inactiveLineWidth: 1.0 + UIScreenPixel, inactiveLineWidth: 1.33,
counters: AvatarStoryIndicatorComponent.Counters( counters: AvatarStoryIndicatorComponent.Counters(
totalCount: storyState.stats.totalCount, totalCount: storyState.stats.totalCount,
unseenCount: storyState.stats.unseenCount unseenCount: storyState.stats.unseenCount

View File

@ -631,7 +631,7 @@ private final class SparseItemGridBindingImpl: SparseItemGridBinding {
} }
if let selectedMedia = selectedMedia { if let selectedMedia = selectedMedia {
if let result = directMediaImageCache.getImage(peer: item.peer, story: story, media: selectedMedia, width: imageWidthSpec, aspectRatio: 0.72, possibleWidths: SparseItemGridBindingImpl.widthSpecs.1, includeBlurred: hasSpoiler || displayItem.blurLayer != nil, synchronous: synchronous == .full) { if let result = directMediaImageCache.getImage(peer: item.peer, story: story, media: selectedMedia, width: imageWidthSpec, aspectRatio: 0.81, possibleWidths: SparseItemGridBindingImpl.widthSpecs.1, includeBlurred: hasSpoiler || displayItem.blurLayer != nil, synchronous: synchronous == .full) {
if let image = result.image { if let image = result.image {
layer.setContents(image) layer.setContents(image)
switch synchronous { switch synchronous {
@ -1960,7 +1960,7 @@ public final class PeerInfoStoryPaneNode: ASDisplayNode, PeerInfoPaneNode, UIScr
fixedItemHeight = nil fixedItemHeight = nil
} }
let fixedItemAspect: CGFloat? = 0.72 let fixedItemAspect: CGFloat? = 0.81
let gridTopInset = topInset let gridTopInset = topInset

View File

@ -88,15 +88,9 @@ public final class AvatarStoryIndicatorComponent: Component {
self.component = component self.component = component
self.state = state self.state = state
let lineWidth: CGFloat
let diameter: CGFloat let diameter: CGFloat
if component.hasUnseen { let maxOuterInset = component.activeLineWidth * 2.0
lineWidth = component.activeLineWidth
} else {
lineWidth = component.inactiveLineWidth
}
let maxOuterInset = component.activeLineWidth + lineWidth
diameter = availableSize.width + maxOuterInset * 2.0 diameter = availableSize.width + maxOuterInset * 2.0
let imageDiameter = availableSize.width + ceilToScreenPixels(maxOuterInset) * 2.0 let imageDiameter = availableSize.width + ceilToScreenPixels(maxOuterInset) * 2.0
@ -120,11 +114,9 @@ public final class AvatarStoryIndicatorComponent: Component {
var locations: [CGFloat] = [0.0, 1.0] var locations: [CGFloat] = [0.0, 1.0]
context.setLineWidth(lineWidth)
if let counters = component.counters, counters.totalCount > 1 { if let counters = component.counters, counters.totalCount > 1 {
let center = CGPoint(x: size.width * 0.5, y: size.height * 0.5) let center = CGPoint(x: size.width * 0.5, y: size.height * 0.5)
let radius = (diameter - lineWidth) * 0.5 let radius = (diameter - component.activeLineWidth) * 0.5
let spacing: CGFloat = 2.0 let spacing: CGFloat = 2.0
let angularSpacing: CGFloat = spacing / radius let angularSpacing: CGFloat = spacing / radius
let circleLength = CGFloat.pi * 2.0 * radius let circleLength = CGFloat.pi * 2.0 * radius
@ -134,6 +126,12 @@ public final class AvatarStoryIndicatorComponent: Component {
for pass in 0 ..< 2 { for pass in 0 ..< 2 {
context.resetClip() context.resetClip()
if pass == 0 {
context.setLineWidth(component.inactiveLineWidth)
} else {
context.setLineWidth(component.activeLineWidth)
}
let startIndex: Int let startIndex: Int
let endIndex: Int let endIndex: Int
if pass == 0 { if pass == 0 {
@ -167,6 +165,8 @@ public final class AvatarStoryIndicatorComponent: Component {
} }
} }
} else { } else {
let lineWidth: CGFloat = component.hasUnseen ? component.activeLineWidth : component.inactiveLineWidth
context.setLineWidth(lineWidth)
context.addEllipse(in: CGRect(origin: CGPoint(x: size.width * 0.5 - diameter * 0.5, y: size.height * 0.5 - diameter * 0.5), size: size).insetBy(dx: lineWidth * 0.5, dy: lineWidth * 0.5)) context.addEllipse(in: CGRect(origin: CGPoint(x: size.width * 0.5 - diameter * 0.5, y: size.height * 0.5 - diameter * 0.5), size: size).insetBy(dx: lineWidth * 0.5, dy: lineWidth * 0.5))
context.replacePathWithStrokedPath() context.replacePathWithStrokedPath()

View File

@ -864,6 +864,7 @@ public final class StoryPeerListComponent: Component {
hasUnseenCloseFriendsItems = false hasUnseenCloseFriendsItems = false
} }
//itemRingAnimation = .loading
let measuredItem = calculateItem(i) let measuredItem = calculateItem(i)
@ -1444,9 +1445,9 @@ public final class StoryPeerListComponent: Component {
let itemLayout = ItemLayout( let itemLayout = ItemLayout(
containerSize: availableSize, containerSize: availableSize,
containerInsets: UIEdgeInsets(top: 4.0, left: component.sideInset - 6.0, bottom: 0.0, right: component.sideInset - 6.0), containerInsets: UIEdgeInsets(top: 4.0, left: component.sideInset - 4.0, bottom: 0.0, right: component.sideInset - 4.0),
itemSize: CGSize(width: 60.0, height: 77.0), itemSize: CGSize(width: 60.0, height: 77.0),
itemSpacing: 24.0, itemSpacing: 14.0,
itemCount: self.sortedItems.count itemCount: self.sortedItems.count
) )
self.itemLayout = itemLayout self.itemLayout = itemLayout

View File

@ -627,8 +627,8 @@ public final class StoryPeerListItemComponent: Component {
let indicatorFrame = avatarFrame.insetBy(dx: -8.0, dy: -8.0) let indicatorFrame = avatarFrame.insetBy(dx: -8.0, dy: -8.0)
let baseLineUnseenWidth: CGFloat = 2.0 let baseLineUnseenWidth: CGFloat = 2.33
let baseLineSeenWidth: CGFloat = 1.0 + UIScreenPixel let baseLineSeenWidth: CGFloat = 1.33
let minimizedLineWidth: CGFloat = 4.3 let minimizedLineWidth: CGFloat = 4.3
@ -651,7 +651,7 @@ public final class StoryPeerListItemComponent: Component {
transition.setPosition(view: self.avatarBackgroundContainer, position: avatarFrame.center) transition.setPosition(view: self.avatarBackgroundContainer, position: avatarFrame.center)
transition.setBounds(view: self.avatarBackgroundContainer, bounds: CGRect(origin: CGPoint(), size: avatarFrame.size)) transition.setBounds(view: self.avatarBackgroundContainer, bounds: CGRect(origin: CGPoint(), size: avatarFrame.size))
let scaledAvatarSize = effectiveScale * (avatarSize.width + 4.0 - 2.0 * 2.0) let scaledAvatarSize = effectiveScale * avatarSize.width
transition.setScale(view: self.avatarContainer, scale: scaledAvatarSize / avatarSize.width) transition.setScale(view: self.avatarContainer, scale: scaledAvatarSize / avatarSize.width)
transition.setScale(view: self.avatarBackgroundContainer, scale: scaledAvatarSize / avatarSize.width) transition.setScale(view: self.avatarBackgroundContainer, scale: scaledAvatarSize / avatarSize.width)
@ -705,7 +705,7 @@ public final class StoryPeerListItemComponent: Component {
self.avatarBackgroundView.isHidden = component.ringAnimation != nil || self.indicatorColorSeenLayer.isHidden self.avatarBackgroundView.isHidden = component.ringAnimation != nil || self.indicatorColorSeenLayer.isHidden
let baseRadius: CGFloat = 30.0 let baseRadius: CGFloat = 30.66
let collapsedRadius: CGFloat = 35.0 let collapsedRadius: CGFloat = 35.0
let indicatorRadius: CGFloat = baseRadius * component.scale + collapsedRadius * (1.0 - component.scale) let indicatorRadius: CGFloat = baseRadius * component.scale + collapsedRadius * (1.0 - component.scale)
@ -800,8 +800,8 @@ public final class StoryPeerListItemComponent: Component {
self?.avatarContent.layer.animateScale(from: 1.08, to: 1.0, duration: 0.15) self?.avatarContent.layer.animateScale(from: 1.08, to: 1.0, duration: 0.15)
}) })
let initialLineWidth: CGFloat = 2.0 let initialLineWidth: CGFloat = baseLineUnseenWidth
let targetLineWidth: CGFloat = 3.0 let targetLineWidth: CGFloat = baseLineUnseenWidth * 1.5
self.indicatorShapeSeenLayer.lineWidth = targetLineWidth self.indicatorShapeSeenLayer.lineWidth = targetLineWidth
self.indicatorShapeSeenLayer.animateShapeLineWidth(from: initialLineWidth, to: targetLineWidth, duration: 0.2, completion: { [weak self] _ in self.indicatorShapeSeenLayer.animateShapeLineWidth(from: initialLineWidth, to: targetLineWidth, duration: 0.2, completion: { [weak self] _ in
self?.indicatorShapeSeenLayer.lineWidth = initialLineWidth self?.indicatorShapeSeenLayer.lineWidth = initialLineWidth