fix: fix media in grouped mode in focused threads (#774)
This commit is contained in:
		
							parent
							
								
									94d0590070
								
							
						
					
					
						commit
						852d86b9e3
					
				
					 4 changed files with 8 additions and 14 deletions
				
			
		| 
						 | 
					@ -1,8 +1,8 @@
 | 
				
			||||||
<div class="autoplay-wrapper  {$largeInlineMedia ? '' : 'fixed-size'}"
 | 
					<div class="autoplay-wrapper  {$largeInlineMedia ? '' : 'autoplay-video-fixed-size'}"
 | 
				
			||||||
     style="width: {width}px; height: {height}px;"
 | 
					     style="width: {width}px; height: {height}px;"
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
    <video
 | 
					    <video
 | 
				
			||||||
    class="autoplay-video {$largeInlineMedia ? '' : 'fixed-size'}"
 | 
					    class="autoplay-video {$largeInlineMedia ? '' : 'autoplay-video-fixed-size'}"
 | 
				
			||||||
    aria-label={ariaLabel || ''}
 | 
					    aria-label={ariaLabel || ''}
 | 
				
			||||||
    style="{focusStyle} background-image: url({poster}); "
 | 
					    style="{focusStyle} background-image: url({poster}); "
 | 
				
			||||||
    {poster}
 | 
					    {poster}
 | 
				
			||||||
| 
						 | 
					@ -30,19 +30,12 @@
 | 
				
			||||||
    display: flex;
 | 
					    display: flex;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .fixed-size {
 | 
					  .autoplay-video-fixed-size {
 | 
				
			||||||
    position: absolute;
 | 
					    position: absolute;
 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
    height: 100%;
 | 
					    height: 100%;
 | 
				
			||||||
    overflow: hidden;
 | 
					    overflow: hidden;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .fixed-size {
 | 
					 | 
				
			||||||
    overflow: hidden;
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    height: 100%;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
  import { store } from '../_store/store'
 | 
					  import { store } from '../_store/store'
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,4 +1,4 @@
 | 
				
			||||||
<div class="lazy-image {fillFixSize ? 'fixed-size': ''}" style={computedStyle} >
 | 
					<div class="lazy-image {fillFixSize ? 'lazy-image-fixed-size': ''}" style={computedStyle} >
 | 
				
			||||||
  <img
 | 
					  <img
 | 
				
			||||||
    class="{fillFixSize ? 'fixed-size-img': ''}"
 | 
					    class="{fillFixSize ? 'fixed-size-img': ''}"
 | 
				
			||||||
    aria-hidden={ariaHidden}
 | 
					    aria-hidden={ariaHidden}
 | 
				
			||||||
| 
						 | 
					@ -23,7 +23,7 @@
 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
    height: 100%;
 | 
					    height: 100%;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  .fixed-size {
 | 
					  .lazy-image-fixed-size {
 | 
				
			||||||
    position: absolute;
 | 
					    position: absolute;
 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
    height: 100%;
 | 
					    height: 100%;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,4 +1,4 @@
 | 
				
			||||||
<div class="non-autoplay-gifv  {$largeInlineMedia ? '' : 'fixed-size'}"
 | 
					<div class="non-autoplay-gifv  {$largeInlineMedia ? '' : 'non-autoplay-gifv-fixed-size'}"
 | 
				
			||||||
     style="width: {width}px; height: {height}px;"
 | 
					     style="width: {width}px; height: {height}px;"
 | 
				
			||||||
     on:mouseover="onMouseOver(event)"
 | 
					     on:mouseover="onMouseOver(event)"
 | 
				
			||||||
     ref:node
 | 
					     ref:node
 | 
				
			||||||
| 
						 | 
					@ -35,7 +35,7 @@
 | 
				
			||||||
    padding: 0;
 | 
					    padding: 0;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .fixed-size {
 | 
					  .non-autoplay-gifv-fixed-size {
 | 
				
			||||||
    position: absolute;
 | 
					    position: absolute;
 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
    height: 100%;
 | 
					    height: 100%;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -74,6 +74,7 @@
 | 
				
			||||||
      "spoiler-btn spoiler-btn"
 | 
					      "spoiler-btn spoiler-btn"
 | 
				
			||||||
      "mentions    mentions"
 | 
					      "mentions    mentions"
 | 
				
			||||||
      "content     content"
 | 
					      "content     content"
 | 
				
			||||||
 | 
					      "media-grp   media-grp"
 | 
				
			||||||
      "media       media"
 | 
					      "media       media"
 | 
				
			||||||
      "details     details"
 | 
					      "details     details"
 | 
				
			||||||
      "toolbar     toolbar"
 | 
					      "toolbar     toolbar"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue