-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
395 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,258 @@ | ||
<template> | ||
<q-dialog v-model="open"> | ||
<div | ||
class="items-center q-pb-lg q-px-lg q-gutter-y-lg bg-secondary-contrast large-overlay" | ||
> | ||
<div class="text-h6 row">{{ $t('add-media-study-bible') }}</div> | ||
<div class="row">{{ $t('add-media-study-bible-explain') }}</div> | ||
<div v-if="bibleBook" class="text-h6 row"> | ||
{{ $t('media-gallery') }} - {{ bibleBooks[bibleBook].standardName }} | ||
</div> | ||
<div | ||
v-if="!!(loadingProgress < 1 && Object.keys(bibleBooks).length === 0)" | ||
class="text-center row items-center justify-center" | ||
> | ||
<q-spinner color="primary" size="md" /> | ||
</div> | ||
<div class="row"> | ||
<q-scroll-area | ||
:bar-style="barStyle" | ||
:thumb-style="thumbStyle" | ||
style="width: 100vw; height: 40vh" | ||
> | ||
<div v-if="bibleBook" class="row q-col-gutter-md"> | ||
<template v-for="mediaItem in bibleBookMedia" :key="mediaItem.id"> | ||
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-2 col-xl-1"> | ||
<div | ||
v-ripple | ||
:class="{ | ||
'cursor-pointer': true, | ||
'rounded-borders-lg': true, | ||
'full-height': true, | ||
'bg-accent-100': hoveredMediaItem === mediaItem.id, | ||
}" | ||
flat | ||
@click="addResource(mediaItem.resource)" | ||
@mouseout="hoveredMediaItem = 0" | ||
@mouseover="hoveredMediaItem = mediaItem.id" | ||
> | ||
<q-card-section class="q-pa-sm"> | ||
<q-img | ||
:src=" | ||
getBestImageUrl( | ||
{ sqr: mediaItem.thumbnail.sizes }, | ||
'md', | ||
) | ||
" | ||
class="rounded-borders" | ||
> | ||
<q-badge | ||
v-if="mediaItem.type === 'video'" | ||
class="q-mt-sm q-ml-sm bg-semi-black rounded-borders-sm" | ||
style="padding: 5px !important" | ||
> | ||
<q-icon class="q-mr-xs" color="white" name="mmm-play" /> | ||
{{ $t('video') }} | ||
</q-badge> | ||
</q-img> | ||
</q-card-section> | ||
<q-card-section class="q-pa-sm"> | ||
<div class="text-subtitle2 q-mb-xs"> | ||
{{ mediaItem.label }} | ||
</div> | ||
</q-card-section> | ||
</div> | ||
</div> | ||
</template> | ||
</div> | ||
<div v-else class="row q-col-gutter-md"> | ||
<template | ||
v-for="[bookNr, book] in Object.entries(bibleBooks)" | ||
:key="bookNr" | ||
> | ||
<div | ||
v-if="book.hasMultimedia" | ||
class="col-xs-4 col-sm-3 col-md-2 col-lg-2 col-xl-1" | ||
> | ||
<div | ||
v-ripple | ||
:class="{ | ||
'cursor-pointer': true, | ||
'rounded-borders-lg': true, | ||
'full-height': true, | ||
'bg-accent-100': hoveredBibleBook === bookNr, | ||
}" | ||
flat | ||
@click="getBibleBookMedia(+bookNr)" | ||
@mouseout="hoveredBibleBook = ''" | ||
@mouseover="hoveredBibleBook = bookNr" | ||
> | ||
<q-card-section class="q-pa-sm"> | ||
<q-img | ||
:src=" | ||
getBestImageUrl( | ||
bibleBookImagesToImageTypeSizes(book.images), | ||
'md', | ||
) | ||
" | ||
class="rounded-borders" | ||
> | ||
</q-img> | ||
</q-card-section> | ||
<q-card-section class="q-pa-sm"> | ||
<div class="text-subtitle2 q-mb-xs"> | ||
{{ book.standardName }} | ||
</div> | ||
</q-card-section> | ||
</div> | ||
</div> | ||
</template> | ||
</div> | ||
</q-scroll-area> | ||
</div> | ||
<div class="row items-center"> | ||
<div class="col"></div> | ||
<div class="col text-right"> | ||
<q-btn | ||
v-if="bibleBook" | ||
:label="$t('back')" | ||
color="primary" | ||
flat | ||
@click="resetBibleBook" | ||
/> | ||
<q-btn v-close-popup :label="$t('cancel')" color="negative" flat /> | ||
</div> | ||
</div> | ||
</div> | ||
</q-dialog> | ||
</template> | ||
<script setup lang="ts"> | ||
import { storeToRefs } from 'pinia'; | ||
// Packages | ||
import { ref } from 'vue'; | ||
// Composables | ||
import { useScrollbar } from 'src/composables/useScrollbar'; | ||
// Helpers | ||
import { getBestImageUrl } from 'src/helpers/jw-media'; | ||
// Types | ||
import type { | ||
BibleBook, | ||
BibleBookImage, | ||
BibleBookMedia, | ||
BibleBookResource, | ||
BibleBooksResult, | ||
ImageTypeSizes, | ||
MediaSection, | ||
} from 'src/types'; | ||
import { whenever } from '@vueuse/core'; | ||
import { fetchJson } from 'src/helpers/api'; | ||
import { errorCatcher } from 'src/helpers/error-catcher'; | ||
import { useCurrentStateStore } from 'src/stores/current-state'; | ||
import { useJwStore } from 'src/stores/jw'; | ||
// Stores | ||
const jwStore = useJwStore(); | ||
const { urlVariables } = storeToRefs(jwStore); | ||
const currentState = useCurrentStateStore(); | ||
const { currentSettings } = storeToRefs(currentState); | ||
// Props | ||
defineProps<{ | ||
section?: MediaSection; | ||
}>(); | ||
const open = defineModel<boolean>({ default: false }); | ||
const { barStyle, thumbStyle } = useScrollbar(); | ||
const bibleBook = ref(0); | ||
const bibleBookMedia = ref<BibleBookMedia[]>([]); | ||
const bibleBooks = ref<Record<number, BibleBook>>({}); | ||
const loadingProgress = ref<number>(0); | ||
const hoveredBibleBook = ref(''); | ||
const hoveredMediaItem = ref(0); | ||
whenever(open, () => { | ||
getBibleBooks(); | ||
}); | ||
const bibleBookImagesToImageTypeSizes = ( | ||
images: BibleBookImage[], | ||
): ImageTypeSizes => { | ||
const imageTypeSizes: ImageTypeSizes = {}; | ||
images.forEach((image) => { | ||
imageTypeSizes[image.type] = image.sizes; | ||
}); | ||
return imageTypeSizes; | ||
}; | ||
const getBibleBooks = async () => { | ||
try { | ||
if (!currentSettings.value) return; | ||
const result = await fetchJson<BibleBooksResult>( | ||
`https://www.${urlVariables.value.base}/en/library/bible/study-bible/books/json/data`, | ||
); | ||
bibleBooks.value = result?.editionData.books || {}; | ||
} catch (error) { | ||
errorCatcher(error); | ||
} finally { | ||
loadingProgress.value = 1; | ||
} | ||
}; | ||
const resetBibleBook = () => { | ||
bibleBook.value = 0; | ||
bibleBookMedia.value = []; | ||
}; | ||
const getBibleBookMedia = async (book: number) => { | ||
bibleBook.value = book; | ||
loadingProgress.value = 0; | ||
try { | ||
const result = await fetchJson<BibleBooksResult>( | ||
`https://www.${urlVariables.value.base}/en/library/bible/study-bible/books/json/multimedia/${book}`, | ||
); | ||
if (!result) { | ||
resetBibleBook(); | ||
return; | ||
} | ||
const key = Object.keys(result.ranges)[0]; | ||
if (!key) { | ||
resetBibleBook(); | ||
return; | ||
} | ||
bibleBookMedia.value = result.ranges[key].multimedia; | ||
} catch (e) { | ||
errorCatcher(e); | ||
resetBibleBook(); | ||
} finally { | ||
loadingProgress.value = 1; | ||
} | ||
}; | ||
const addResource = async (resource: BibleBookResource) => { | ||
try { | ||
console.log('addResource', resource); | ||
if (typeof resource.src == 'string') { | ||
console.log('image', getBestImageUrl({ sqr: resource.sizes }, 'md')); | ||
} else { | ||
const src = resource.src[0]; | ||
if (typeof src === 'string') { | ||
console.log('video cdn url', src); | ||
} else { | ||
console.log('video object', src); | ||
} | ||
} | ||
} catch (error) { | ||
errorCatcher(error); | ||
} | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.