Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

複数選択ハイライトがコラボアイコンより手前になるようにする #54

Merged
merged 2 commits into from
Oct 15, 2024
Merged

複数選択ハイライトがコラボアイコンより手前になるようにする #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2869423
applyを使わず動的classにする
miyaoka Oct 15, 2024
3de7be8
複数選択ハイライトがコラボアイコンより手前になるようにする
miyaoka Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 19 additions & 35 deletions src/components/streams/LiverEventCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,16 @@ const { liverEvent } = toRefs(props);

const focusStore = useFocusStore();
const searchStore = useSearchStore();
const { isFinished, liveDurationLabel, isNew, hasBookmark, hasNotify } = useLiverEvent(liverEvent);
const {
isUpcoming,
isLive,
isFinished,
isHovered,
liveDurationLabel,
isNew,
hasBookmark,
hasNotify,
} = useLiverEvent(liverEvent);

const timeDisplay = computed(() => {
const { isLive, startAt } = props.liverEvent;
Expand All @@ -36,20 +45,6 @@ const timeDisplay = computed(() => {
return strs.join(" ");
});

const isHovered = computed(() => {
if (!focusStore.hoveredTalent) return false;

// 自身がホバー中のタレントか
if (focusStore.hoveredTalent === props.liverEvent.talent.name) return true;

// ホバー中のタレントがコラボタレントに含まれているか
const collaboTalentSet = toRaw(props.liverEvent.collaboTalentSet);
if (collaboTalentSet.has(focusStore.hoveredTalent)) return true;

// ホバー中のコラボタレントにタレントが含まれているか
return focusStore.hoveredCollaboTalentSet.has(props.liverEvent.talent.name);
});

const firstHash = computed(() => {
return props.liverEvent.hashtagList[0];
});
Expand Down Expand Up @@ -98,11 +93,11 @@ function setSearchString(str: string) {
>
<a :href="liverEvent.url" target="_blank" @click="onClickCard">
<div
class="absolute -top-0 left-0 z-10 flex -translate-y-1/2 flex-row items-center gap-1 rounded-full px-2 font-bold shadow"
class="absolute -top-0 left-0 z-20 flex -translate-y-1/2 flex-row items-center gap-1 rounded-full px-2 font-bold shadow"
:class="{
'bg-red-600 text-white': liverEvent.isLive,
'bg-red-600 text-white': isLive,
'bg-gray-300 text-gray-700': isFinished,
'bg-gray-800 text-white': !liverEvent.isLive && !isFinished,
'bg-gray-800 text-white': isUpcoming,
}"
>
<i v-if="liverEvent.isLive" class="i-mdi-play-circle size-5" />
Expand All @@ -124,11 +119,12 @@ function setSearchString(str: string) {
/>

<div
class="flex h-[clamp(80px,80px+1vw,108px)] flex-row items-center justify-center gap-1 overflow-hidden rounded-xl rounded-tl-none border-2 border-gray-800 bg-white shadow-md transition-colors"
class="flex h-[clamp(80px,80px+1vw,108px)] flex-row items-center justify-center gap-1 overflow-hidden rounded-xl rounded-tl-none border-2 shadow-md transition-colors"
:class="{
isFinished: isFinished,
isHovered: isHovered,
isLive: liverEvent.isLive,
'border-gray-800 bg-white': isUpcoming && !isHovered,
'border-gray-600 bg-gray-50': isFinished && !isHovered,
'border-red-600 bg-white': isLive && !isHovered,
'border-amber-600 bg-amber-200': isHovered,
}"
>
<img
Expand Down Expand Up @@ -208,7 +204,7 @@ function setSearchString(str: string) {

<div
v-if="focusStore.isMultiSelectMode && focusStore.multiSelectEventIdSet.has(liverEvent.id)"
class="absolute flex size-full items-center justify-end"
class="absolute z-10 flex size-full items-center justify-end"
>
<div class="absolute inset-0 rounded-xl bg-green-500/30" />

Expand All @@ -220,15 +216,3 @@ function setSearchString(str: string) {
</a>
</div>
</template>

<style scoped>
.isHovered {
@apply border-amber-600 bg-amber-200;
}
.isLive {
@apply border-red-600;
}
.isFinished:not(.isHovered) {
@apply border-gray-600 bg-gray-50;
}
</style>
27 changes: 26 additions & 1 deletion src/components/streams/useLiverEvent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { computed, type Ref } from "vue";
import { computed, toRaw, type Ref } from "vue";
import type { LiverEvent } from "@/services/api";
import { useBookmarkStore } from "@/store/bookmarkStore";
import { useDateStore } from "@/store/dateStore";
import { useEventListStore } from "@/store/eventListStore";
import { useFocusStore } from "@/store/focusStore";

const oneHour = 60 * 60 * 1000;

Expand All @@ -14,6 +15,7 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
const dateStore = useDateStore();
const eventListStore = useEventListStore();
const bookmarkStore = useBookmarkStore();
const focusStore = useFocusStore();

// 配信終了判定
const isFinished = computed(() => {
Expand Down Expand Up @@ -98,8 +100,31 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
return dateStore.currentTime < startTime.value;
});

const isUpcoming = computed(() => {
return !isLive.value && !isFinished.value;
});
const isLive = computed(() => {
return liverEvent.value.isLive;
});
const isHovered = computed(() => {
if (!focusStore.hoveredTalent) return false;

// 自身がホバー中のタレントか
if (focusStore.hoveredTalent === liverEvent.value.talent.name) return true;

// ホバー中のタレントがコラボタレントに含まれているか
const collaboTalentSet = toRaw(liverEvent.value.collaboTalentSet);
if (collaboTalentSet.has(focusStore.hoveredTalent)) return true;

// ホバー中のコラボタレントにタレントが含まれているか
return focusStore.hoveredCollaboTalentSet.has(liverEvent.value.talent.name);
});

return {
isUpcoming,
isLive,
isFinished,
isHovered,
elapsedTime,
liveDuration,
liveDurationLabel,
Expand Down