Skip to content

Commit

Permalink
Merge pull request #75 from JankariTech/fix/issues-72
Browse files Browse the repository at this point in the history 
fix: viewer stuck on loading if ocis images are not available
  • Loading branch information
@saw-jan
saw-jan authored Aug 29, 2024
2 parents d6954ce + 800f5a8 commit 20dec19
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 187 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Fixed

- viewer stuck on loading if ocis images are not available (https://github.com/JankariTech/web-app-presentation-viewer/pull/75)

### Changed

- Parse and update local image urls directly in the markdown content (https://github.com/JankariTech/web-app-presentation-viewer/pull/61)
Expand Down
3 changes: 3 additions & 0 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,9 @@ async function parseImageUrl(name: string) {
} else {
file = getMediaFile(name)
}
if (!file) {
return
}
const url = await getUrlForResource(unref(currentFileContext).space, file)
// reload the active files
// TODO: implement caching
Expand Down
18 changes: 15 additions & 3 deletions tests/unit/App.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ vi.mock('@ownclouders/web-pkg', () => ({
useAppDefaults: vi.fn().mockImplementation(() => ({
loadFolderForFileContext: vi.fn(),
currentFileContext: {},
activeFiles: []
activeFiles: [
{ name: 'cool.png', path: '/cool.png', mimeType: 'image/png' },
{ name: 'sub', path: '/sub' }
]
})),
useAppFileHandling: vi.fn().mockImplementation(() => ({
getUrlForResource: vi.fn(),
Expand All @@ -16,9 +19,15 @@ vi.mock('@ownclouders/web-pkg', () => ({
currentTheme: { isDark: false }
})),
useClientService: vi.fn().mockImplementation(() => ({
webdav: vi.fn()
webdav: {
listFiles: () => ({
children: [{ name: 'another-cool.jpg', path: '/another-cool.jpg', mimeType: 'image/jpeg' }]
})
}
})),
useAppsStore: vi.fn(),
useAppsStore: () => ({
externalAppConfig: () => []
}),
useConfigStore: vi.fn().mockImplementation(() => ({
serverUrl: 'https://localhost:9200'
})),
Expand Down Expand Up @@ -64,6 +73,9 @@ Ordered list:
### ocCIS Image
![cool](./cool.png)
![non-existing](./non-existing-image.png)
![sub-folder-image](./sub/another-cool.jpg)
---
### Code block
Expand Down
186 changes: 2 additions & 184 deletions tests/unit/__snapshots__/App.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`App component > mount component 1`] = `
"<div id="presentation-viewer-main" class="presentation-viewer">
<spy-stub></spy-stub>
<div role="application" data-transition-speed="default" data-background-transition="fade" class="reveal slide center focused has-horizontal-slides">
<div id="slideContainer" class="slides no-transition" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.2);">
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;" class="present">
<h3 id="slide-1">Slide 1</h3>
<p>Lorem <strong>Bold</strong> <em>Italic</em> <del>strike through</del></p>
<blockquote>
<p>Quote statement</p>
</blockquote>
<ul>
<li><input disabled="" type="checkbox"> check box</li>
</ul>
<ul>
<li><input disabled="" type="checkbox"> check box</li>
</ul>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;" hidden="" aria-hidden="true" class="future">
<h3 id="slide-2">Slide 2</h3>
<p>Unordered list:</p>
<ul>
<li>item 1</li>
</ul>
<ul>
<li>item 2</li>
</ul>
<p>Ordered list:</p>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;" hidden="" aria-hidden="true" class="future">
<h3 id="external-image">External Image</h3>
<p><img src="https://external:9200/cat.jpg" alt="cat"></p>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="uploaded-image">Uploaded Image</h3>
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAAHCCAYAAAB8GMlFAAAAAXNSR0IArs4c6QAAIABJREFUeF==" alt=""></p>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="occis-image">ocCIS Image</h3>
<p><img src="blob:nodedata:a711bed7-0630-4f3e-9d08-e5fab74b7fea" alt="cool"></p>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="code-block">Code block</h3>
<pre class="code-wrapper"><code data-highlighted="yes" class="hljs language-clean"><span class="hljs-keyword">code</span> block</code></pre>
</section>
</div>
<div class="backgrounds no-transition">
<div style="display: block;" data-loaded="true" class="slide-background present">
<div class="slide-background-content"></div>
</div>
<div style="display: block;" data-loaded="true" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: block;" data-loaded="true" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: none;" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: none;" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: none;" class="slide-background future">
<div class="slide-background-content"></div>
</div>
</div>
<div class="slide-number" style="display: none;"></div>
<aside class="controls" style="display: block;" data-controls-layout="edges" data-controls-back-arrows="faded"><button aria-label="previous slide" class="navigate-left" disabled="disabled">
<div class="controls-arrow"></div>
</button>
<button aria-label="next slide" class="navigate-right enabled highlight">
<div class="controls-arrow"></div>
</button>
<button aria-label="above slide" class="navigate-up" disabled="disabled">
<div class="controls-arrow"></div>
</button>
<button aria-label="below slide" disabled="disabled" class="navigate-down">
<div class="controls-arrow"></div>
</button>
</aside>
<div class="progress" style="display: block;"><span style="transform: scaleX(0);"></span></div>
<div class="speaker-notes" data-prevent-swipe="" tabindex="0"></div>
<div class="pause-overlay"><button class="resume-button">Resume presentation</button></div>
<div style="position: absolute; height: 1px; width: 1px; overflow: hidden;" class="aria-status" aria-live="polite" aria-atomic="true"></div>
</div>
</div>"
`;
exports[`App component > render markdown slides 1`] = `
"<div id="presentation-viewer-main" class="presentation-viewer">
<spy-stub></spy-stub>
Expand Down Expand Up @@ -136,98 +44,8 @@ exports[`App component > render markdown slides 1`] = `
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="occis-image">ocCIS Image</h3>
<p><img src="blob:nodedata:0295bafb-5976-468a-a263-685a8872cb96" alt="cool"></p>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="code-block">Code block</h3>
<pre class="code-wrapper"><code data-highlighted="yes" class="hljs language-clean"><span class="hljs-keyword">code</span> block</code></pre>
</section>
</div>
<div class="backgrounds no-transition">
<div style="display: block;" data-loaded="true" class="slide-background present">
<div class="slide-background-content"></div>
</div>
<div style="display: block;" data-loaded="true" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: block;" data-loaded="true" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: none;" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: none;" class="slide-background future">
<div class="slide-background-content"></div>
</div>
<div style="display: none;" class="slide-background future">
<div class="slide-background-content"></div>
</div>
</div>
<div class="slide-number" style="display: none;"></div>
<aside class="controls" style="display: block;" data-controls-layout="edges" data-controls-back-arrows="faded"><button aria-label="previous slide" class="navigate-left" disabled="disabled">
<div class="controls-arrow"></div>
</button>
<button aria-label="next slide" class="navigate-right enabled highlight">
<div class="controls-arrow"></div>
</button>
<button aria-label="above slide" class="navigate-up" disabled="disabled">
<div class="controls-arrow"></div>
</button>
<button aria-label="below slide" disabled="disabled" class="navigate-down">
<div class="controls-arrow"></div>
</button>
</aside>
<div class="progress" style="display: block;"><span style="transform: scaleX(0);"></span></div>
<div class="speaker-notes" data-prevent-swipe="" tabindex="0"></div>
<div class="pause-overlay"><button class="resume-button">Resume presentation</button></div>
<div style="position: absolute; height: 1px; width: 1px; overflow: hidden;" class="aria-status" aria-live="polite" aria-atomic="true"></div>
</div>
</div>"
`;
exports[`App component > render slides 1`] = `
"<div id="presentation-viewer-main" class="presentation-viewer">
<spy-stub></spy-stub>
<div role="application" data-transition-speed="default" data-background-transition="fade" class="reveal slide center focused has-horizontal-slides">
<div id="slideContainer" class="slides no-transition" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.2);">
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;" class="present">
<h3 id="slide-1">Slide 1</h3>
<p>Lorem <strong>Bold</strong> <em>Italic</em> <del>strike through</del></p>
<blockquote>
<p>Quote statement</p>
</blockquote>
<ul>
<li><input disabled="" type="checkbox"> check box</li>
</ul>
<ul>
<li><input disabled="" type="checkbox"> check box</li>
</ul>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;" hidden="" aria-hidden="true" class="future">
<h3 id="slide-2">Slide 2</h3>
<p>Unordered list:</p>
<ul>
<li>item 1</li>
</ul>
<ul>
<li>item 2</li>
</ul>
<p>Ordered list:</p>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;" hidden="" aria-hidden="true" class="future">
<h3 id="external-image">External Image</h3>
<p><img src="https://external:9200/cat.jpg" alt="cat"></p>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="uploaded-image">Uploaded Image</h3>
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAAHCCAYAAAB8GMlFAAAAAXNSR0IArs4c6QAAIABJREFUeF==" alt=""></p>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="occis-image">ocCIS Image</h3>
<p><img src="blob:nodedata:1340c645-900d-4d14-8ab9-6583f065622d" alt="cool"></p>
<p><img src="./non-existing-image.png" alt="non-existing"></p>
<p><img src="blob:nodedata:0295bafb-5976-468a-a263-685a8872cb96" alt="sub-folder-image"></p>
</section>
<section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
<h3 id="code-block">Code block</h3>
Expand Down

0 comments on commit 20dec19

Please sign in to comment.